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

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
0
BR
Asked:
BR
  • 6
  • 4
1 Solution
 
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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
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
 
BRMarketingAuthor Commented:
You are great,
this answer is perfect
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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