jQuery: Div is not showing when clicked

Expand Post »

Hi,
I have a hidden DIV, which is going to cover all of the screen as part of a lightbox. I wrote my code based on what I found at docs.jquery.com/Tutorials:Basic_Show_and_Hid . When I click on the link to run the lightbox, the div isn't showing even through the z-index is the highest on the page. I've also tried seeing if it was a corrupted version of jQuery. What's wrong?

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<style type="text/css">
#video1
{
        position:absolute;
	top:350px;
        left:0px;
	width:100px;
	height:100px;
	background-color:#00FF00;
	z-index:4;
}
 
#lightbox
{
	position:absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	background-color:#000000;
	opacity:0.7;
	visibility:hidden;
	z-index:5;
}
</style>
<style type="text/css">
#video1
{
        position:absolute;
	top:350px;
        left:0px;
	width:100px;
	height:100px;
	background-color:#00FF00;
	z-index:4;
}
		
#lightbox
{
	position:absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	background-color:#000000;
	opacity:0.7;
	visibility:hidden;
	z-index:5;
}
</style>

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
 $(document).ready(function(){
				$("#video1").click(function(){
					$("#lightbox").show();
					alert("test");
				});
            });
        </script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
 $(document).ready(function(){
				$("#video1").click(function(){
					$("#lightbox").show();
					alert("test");
				});
            });
        </script>

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Index</title>
   </head>
    <body>
<div id="video1"></div>
    </body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Index</title>
   </head>
    <body>
<div id="video1"></div>
    </body>
</html>

Last edited by bsewell; Aug 30th, 2010 at 1:28 pm.

Similar Threads

jQuery \ CSS \ filter rotating or something???? in HTML and CSS
Warning: mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource in PHP
div not showing with no reason in HTML and CSS
Help on showing div tag on the browser in JavaScript / DHTML / AJAX
Ajax problem in DIV in JavaScript / DHTML / AJAX

bsewell

Reputation Points: 10

Solved Threads: 1

Junior Poster in Training

Offline

53 posts
since Sep 2009

Permalink

Aug 30th, 2010

Re: jQuery: Div is not showing when clicked

jQuery's show function doesn't work with the visibility attribute. It works with the display attribute.

Change your JS code to say $("#lightbox").css("visibility", "visible") instead of $("#lightbox").show().

pwinfrey

Reputation Points: 15

Solved Threads: 6

Newbie Poster

Offline

18 posts
since Jul 2010

Permalink

Aug 31st, 2010

Re: jQuery: Div is not showing when clicked

Hi,
thanks for the reply. The code works perfectly now, I needed to add a div tag for lightbox in the XHTML as well as the change needed.

bsewell

Reputation Points: 10

Solved Threads: 1

Junior Poster in Training

Offline

53 posts
since Sep 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript Query Parser

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript to php?

DaniWeb Message

Cancel Changes

User Name
Password