Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

JavaScript Splash Screen on Body Load

Posted on 2011-04-22
10
Medium Priority
?
1,930 Views
Last Modified: 2012-05-11
What can I use for loading an image popup 'splash screen' when the body is loaded (with close button)?
Also, it needs to save some cookie on the visitor's browser so when he visit the page again the splash screen don't show again.

Here is an example: http://www.vivacom.bg/
I upload a screenshot, too :)
Thanks!

1.png
0
Comment
Question by:QuantumBG
  • 5
  • 5
10 Comments
 
LVL 20

Accepted Solution

by:
Rikin Shah earned 200 total points
ID: 35446546
The one you have given example for... is a flash splash screen.

here are some references for javascript splash screens.
http://www.dynamicdrive.com/dynamicindex3/dynamicsplash.htm
http://www.experts-exchange.com/Web_Development/Software/Macromedia_Dreamweaver/Q_24499334.html
0
 

Author Comment

by:QuantumBG
ID: 35446807
Hi, again..
Well, I need to load some image on body load (to be transperent also)..
With your links I find jQuery plugin so I used it like this:

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<script src="http://dev.iceburg.net/jquery/jqModal/jqModal.js"></script>
		<script>
			$().ready(function() {
			$('#loadedSlash').jqm( { trigger: '#splashTrigger', overlay: 100, /* Transparent */ overlayClass: 'whiteOverlay'})
			$('input.splash') .hover( function(){ $(this).addClass('splashFocus'); }, function(){ $(this).removeClass('splashFocus'); })
			.focus( function(){ this.hideFocus=true; $(this).addClass('splashFocus'); } )
			.blur( function(){ $(this).removeClass('splashFocus'); } );
			} );
		</script>
		<style>
			div.whiteOverlay { background: url(splash.png) no-repeat center top; }
			div.splashDialog { display: none; overflow: hidden; }
			div.splashDialog input:focus, div.splashDialog input.iefocus { background-color: #eaffc3; }
			input.splash { position: absolute; right: 200px; top: 50px; padding: 0 0 0 19px; height: 19px; width: 0px; background: url(close.gif) no-repeat top left; overflow: hidden; }
		</style>
	</head>
	<body>
		<a href="#" id="splashTrigger">View</a>
		<div id="loadedSlash" class="splashDialog">
			&nbsp;<input type="image" src="close.gif" class="splash jqmClose" />
		</div>
	</body>
</html>

Open in new window


BTW, I'm using splash.png and close.gif to get the work done,
But the screen is loading only after click Close button..
0
 

Author Comment

by:QuantumBG
ID: 35466026
Any help please?
Here's what I've got until the moment:
<html>
	<head>
		<title>Splash</title>
		<style type="text/css">
			#splash { display: none; }
		</style>
		<script language="JavaScript" type="text/javascript">
			function openDiv(element) { var el; el = document.getElementById(element); if (el.style.display != 'block') { el.style.display = 'block'; } else { el.style.display = ''; } }
		</script>
	</head>
	<body onLoad="openDiv('splash');">
		<div id="splash"><img src="images/float-splash.png" onClick="openDiv('splash');" style="position: absolute; left: 100px;" />&nbsp;<img src="images/float-close.png" onClick="openDiv('splash');" style="cursor: pointer;" /></div>
	</body>
</html>

Open in new window


It's working, but when I insert it to my page (with other divs) it kinda stays in a background, behind the other divs.. it's very strange :(

I'm uploading screenshots, too..
1.png
2.png
0
Independent Software Vendors: 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!

 

Author Comment

by:QuantumBG
ID: 35466091
Nevermind, I did it: just needed to insert position: absolute and z-index.. here's the full code:
<html>
	<head>
		<title>Splash</title>
		<style type="text/css">
			#splash { display: none; position: absolute; z-index: 999; }
		</style>
		<script language="JavaScript" type="text/javascript">
			function openDiv(element) { var el; el = document.getElementById(element); if (el.style.display != 'block') { el.style.display = 'block'; } else { el.style.display = ''; } }
		</script>
	</head>
	<body onLoad="openDiv('splash');">
		<div id="splash"><img src="images/float-splash.png" onClick="openDiv('splash');" style="position: absolute; left: 100px;" />&nbsp;<img src="images/float-close.png" onClick="openDiv('splash');" style="cursor: pointer;" /></div>
	</body>
</html>

Open in new window

0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35472644
That's very nice that you have answer you needed!! Apologize I was on the tour and could not get in touch with my PC.

Regards,
Rikin
0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35503017
@QuantumBG: Can I request you to please accept the solution and assign points.

Thanks,
Rikin
0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35503159
initial solution was given by me. can I request some points be assigned to me?
0
 
LVL 20

Expert Comment

by:Rikin Shah
ID: 35503161
initial solution was given by me. can I request some points be assigned to me?
0
 

Author Comment

by:QuantumBG
ID: 35503189
Oh yes sorry - I didn't know where to click :)
I'll accept your now
0
 

Author Closing Comment

by:QuantumBG
ID: 35503195
Thank you, it worked!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question