We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

JavaScript Splash Screen on Body Load

QuantumBG
QuantumBG asked
on
Medium Priority
2,872 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
Comment
Watch Question

Microsoft Dynamics CRM Consultant
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
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..

Author

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

Author

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

Rikin ShahMicrosoft Dynamics CRM Consultant
CERTIFIED EXPERT

Commented:
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
Rikin ShahMicrosoft Dynamics CRM Consultant
CERTIFIED EXPERT

Commented:
@QuantumBG: Can I request you to please accept the solution and assign points.

Thanks,
Rikin
Rikin ShahMicrosoft Dynamics CRM Consultant
CERTIFIED EXPERT

Commented:
initial solution was given by me. can I request some points be assigned to me?
Rikin ShahMicrosoft Dynamics CRM Consultant
CERTIFIED EXPERT

Commented:
initial solution was given by me. can I request some points be assigned to me?

Author

Commented:
Oh yes sorry - I didn't know where to click :)
I'll accept your now

Author

Commented:
Thank you, it worked!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.