asked on

Javascrpit semi transparent banner page

Dear Experts,
I want to create a semi transparent javascipt on my page, which will show my banner 10 second then disapper automaticly..
if the user do not want to see it, they can simple be able to click the close text or image..

But I want all my page is semi transparent when they open the page,
I'm going to use some flash or png file on the banner..

semi-transparent-banner.jpg

StealthyDev

Use JQuery to make it semi transparent.

Download JQuery from:
http://jquery.com/

Use the attached code for the same. (It will display a div content in 50% transparency for 10 seconds, then will automatically close)

you can call
$("#mydiv").fadeTo("fast",0);
in your close event also

Regards.

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<div id="mydiv" style="background-color:red;">
this is a test message. you can have other objects also
<input value="test">
</div>

<script>
	$("#mydiv").fadeTo("fast",.50);
	var t = setTimeout('$("#mydiv").fadeTo("fast",0);',10000);
</script>

Open in new window

ASKER

Dear senthurpandian,

thank you very much,
how can make the page semi transparent when I show the banner?

StealthyDev

please send me your page so that i can do that for you!

else, just use a div element for that banner and then pass the id of the div element to the JQuery, in my example, "mydiv"

Please Revert

ASKER

Dear Senthurpandian,

I attached the file..
if you put a close button for the people who do not want to wait 10 seconds to wait for it to close, I'd really appriciate..
thank you
indextransparent2.html

StealthyDev

I think, the attached code would help you!

<!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>

<!--Transparent bg -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script>
	$(document).ready(function(){ // On-after load function.
        $("#mydiv").fadeTo("fast",.50);
        var t = setTimeout("closeBanner();",10000);
	});

	function closeBanner()
	{
		$("#mydiv").fadeTo("fast",0);
	}
</script>

	
<style type="text/css">
<!--
#mydiv {
	position:absolute;
	left:273px;
	top:189px;
	width:744px;
	height:328px;
	z-index:1;
}
-->
</style>
</head>

<body>
<div id="mydiv" style="background-color:red;">
<div style="float:right;display:absolute"><a href="javascript: closeBanner();">Close</a></div>
this is a test message. you can have other objects also</div>
<script type="text/javascript">
    //initMainnav();
</script> 
<!-- Header End -->
 
</body>
</html>

Open in new window

ASKER

You are great,
but one last thing,
I don't want the banner be trasnparent or blur, I want inverse..
I mean banner should be seen %100
but the other part of the page should be blur, or semi transparent..

Please check the image that I upload..
thank you very very much,
you are the one..
semi-transparent-banner.jpg

StealthyDev

Does this help you?

$(document).ready(function(){
		 $("#frm").validate({
			rules:{
				slt:{
					required: function(element) {
						return ($("#slt").val() == 0);
					}
				}
			}
			,messages: {
				comment: "Not Zero."
			}
		 });
	});

Open in new window

StealthyDev

Wrong post to this page, please ignore the above comment.

ASKER CERTIFIED SOLUTION

StealthyDev

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

You are great,
this answer is perfect