• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2802
  • Last Modified:

Transparent div using JQuery

I need to create a transparent div. If possible I want to use JQuery to do this. I've searched for tutorials, but I can't get them working. I think it shouldn't be too difficult, just a div with a given width and height, black background color on a picture or white background body, and the black should be 50% transparent.
0
R7AF
Asked:
R7AF
  • 2
  • 2
2 Solutions
 
kadabaCommented:
not sure what you are looking out for... here is a simple code though

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
		$("#testDiv").fadeTo("slow", 0.5);
  });
  </script>
  <style type="text/css">
  #testDiv{
  background-color:black;
  width:300px;
  height:300px;
  }
  </style>
</head>
<body>
  <div id="testDiv">
  </div>
</body>
</html>

Open in new window

0
 
hieloCommented:
>> and the black should be 50% transparent.
adjust the opacity to suit your needs:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		$(function(){
			$("#myDiv").css({"opacity":0.5,"background-color":"black","color":"white","width":"100px","height":"100px"});
		});
		</script>
	</head>
	<body>
		<div id="myDiv">Hi</div>	
	</body>
</html>

Open in new window

0
 
kadabaCommented:
what would be the advantage of applying the css in the script way when browser could as well as parse the same while rendering it self...

about opacity a small clarification, does fade not use opacity internally..

thanks
0
 
hieloCommented:
>>what would be the advantage of applying the css in the script way when browser could as well as parse the same while rendering it self
You mean declaring it in a STYLE tag or in linked css file? If so, jquery handles the opacity internally. To clarify, IE does not use a css attribute called opacity. Intead it uses a filter. So if you were to do this on a STYLE tag or css file, you would need to account for these browser differences.

>>about opacity a small clarification, does fade not use opacity internally..
Yes, but user may not actually want a fading effect.
0
 
R7AFAuthor Commented:
Thanks! I got what I needed. The fade-effect is a nice extra. The solution from Hielo is indeed useful as well, as it solves browser issues.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now