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
LVL 1
BRMarketingAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

StealthyDevCommented:
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

0
BRMarketingAuthor Commented:
Dear senthurpandian,

thank you very much,
how can make the page semi transparent when I show the banner?
0
StealthyDevCommented:
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
0
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

BRMarketingAuthor Commented:
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
0
StealthyDevCommented:
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

0
BRMarketingAuthor Commented:
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
0
StealthyDevCommented:
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

0
StealthyDevCommented:
Wrong post to this page, please ignore the above comment.
0
StealthyDevCommented:
Hi,

PFA, the code as required by you.

Call onBannerOpen after your banner is opened.

I have enclosed all your body content in "myBody" div element. please revert if you cannot enclose all the content into a div?

<!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);
		onBannerOpen();
        });

		function onBannerOpen()
		{
			$("#myBody").fadeTo("fast",.50);
		}

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

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

<body>
<div id="myBody" style="background-color:blue;">
	other body content
	<br><br><br><br><br><br><br><br><br><br><br><br>
	<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>
</div>


<script type="text/javascript">
    //initMainnav();
</script> 
<!-- Header End -->
 
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BRMarketingAuthor Commented:
You are great,
this answer is perfect
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.