Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Pop up on index page which will not reappear on refresh.

Status
Not open for further replies.
adamuk82

adamuk82

IS-IT--Management
Dec 4, 2009
5
GB
Hi, I have a pop up on my index page which dims the background out and displays an image on middle of page. This seems to work ok, but i don't want it to appear again when they refresh or go back to home page. However, if they leave the website or close there browser, the next time they come on, it will appear again. So basically show each session, once. Here is the code i have used, not my code, im just a newbie.

Code: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div.overlay {
	display:none;
	position:absolute;
	background-image:url(images/overlay.png);
	z-index:1000;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	position:fixed;
}
/* html div.overlay {
	background-color:#000;
	back\ground-color:transparent;
	/*background-image:url(images/roadshow_index_pic.jpg);
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");*/
}
div.message {
	display:none;
	position:fixed;
	background-color:#FFF;
	background-repeat:no-repeat;
	z-index:4000;
	border:#000 1px solid;
	padding:11px 10px 10px 10px;
	left:50%;
	top:400px;
	font:12px Verdana, Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript" language="javascript">
function showOverlay() {
	document.getElementById("overlay").style.display = "block";
}
function hideOverlay() {
	document.getElementById("overlay").style.display = "none";
}
function clickOverlay() {
	hideMessage();
}
function hideMessage() {
	document.getElementById("message").style.display = "none";
	
	hideOverlay();
}
 
function showStartMessage() {
	var message = document.getElementById("message");
	message.style.display = "block";
	message.style.marginLeft = -(message.offsetWidth / 2) + "px";
	showOverlay();
	
	window.setTimeout(hideMessage, 30000);
}	

</script>

	
	</head>
	
	<body onload="showStartMessage()">
<div class="overlay" align="center" id="overlay" onClick="clickOverlay()"><img src="images/roadshow_index_pic.jpg" border="5"/> </div>
<div class="message" id="message"><a href="#" onclick="hideMessage()">Close</a></div>


</body>
P.S
Just a couple of other things, this works fine in FF but IE, the index page shows, underneath the overlay?? any idea's. One last thing, i have the jpg centered, but only horizontal. Any ideas how to align it vertically.

Would be great if anyone could help.

Thanks.
 
Sort by date Sort by votes
Hi

Code: 
[b]function[/b] [COLOR=darkgoldenrod]showStartMessage[/color][teal]()[/teal] [teal]{[/teal]
    [highlight][b]if[/b] [teal]([/teal][COLOR=darkgoldenrod]getCookie[/color][teal]([/teal][green][i]'foo'[/i][/green][teal]))[/teal] [b]return[/b][teal];[/teal][/highlight]
    [b]var[/b] message [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"message"[/i][/green][teal]);[/teal]
    message[teal].[/teal]style[teal].[/teal]display [teal]=[/teal] [green][i]"block"[/i][/green][teal];[/teal]
    message[teal].[/teal]style[teal].[/teal]marginLeft [teal]=[/teal] [teal]-([/teal]message[teal].[/teal]offsetWidth [teal]/[/teal] [purple]2[/purple][teal])[/teal] [teal]+[/teal] [green][i]"px"[/i][/green][teal];[/teal]
    [COLOR=darkgoldenrod]showOverlay[/color][teal]();[/teal]
    
    window[teal].[/teal][COLOR=darkgoldenrod]setTimeout[/color][teal]([/teal]hideMessage[teal],[/teal] [purple]30000[/purple][teal]);[/teal]
    [highlight][COLOR=darkgoldenrod]setCookie[/color][teal]([/teal][green][i]'foo'[/i][/green][teal],[/teal][green][i]'bar'[/i][/green][teal]);[/teal][/highlight]
[teal]}[/teal]
Search the web for implementations of [tt]setCookies()[/tt]/[tt]getCookie()[/tt] functions.

Feherke.
 
Upvote 0 Downvote
Hi, can you tell me why this script wouldn't run correctly on IE? It runs but the website appears below it, not in background. Its fine in FF
 
Upvote 0 Downvote
Hi

No idea. So far you showed no actual content in your example. And we neither know the CSS used by the content.

First of all make sure that your HTML and CSS is valid.
Then post more details. An URL to a publicly accessible copy of that page would be the best.

This part of your question is quite off-topic here. You may get better answers in forum215.

Feherke.
 
Upvote 0 Downvote
Hi

Feherke said:
First of all make sure that your HTML and CSS is valid.
Click to expand...
W3C Markup Validation Service said:
[highlight lightgray] Result: [/highlight] [red]16 Errors, 13 warning(s)[/red]
Click to expand...
W3C CSS Validation Service said:
[COLOR=white red]Sorry! We found the following errors (1)[/color]
Click to expand...
Ah, that is what you mean by "appears below it". If your Explorer is version 6 or older then it is simple : it has no idea what [tt]position: fixed[/tt] means. Just deliver the CSS with [tt]position: fixed[/tt] and put the alternative style for old Explorers in conditional comment :
Code: 
[b]<style[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/css"[/i][/green][b]>[/b]
div.overlay {
    display:none;
    position:fixed;
    background-image:url(images/overlay.png);
    z-index:1000;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
}
div.message {
    display:none;
    position:fixed;
    background-color:#FFF;
    background-repeat:no-repeat;
    z-index:4000;
    border:#000 1px solid;
    padding:11px 10px 10px 10px;
    left:50%;
    top:400px;
    font:12px Verdana, Arial, Helvetica, sans-serif;
}
[b]</style>[/b]
[gray]<!--[if lte IE 6]>[/gray]
[gray]<style type="text/css">[/gray]
[gray]div.overlay {[/gray]
[gray]    position:absolute;[/gray]
[gray]}[/gray]
[gray]div.message {[/gray]
[gray]    position:absolute;[/gray]
[gray]}[/gray]
[gray]</style>[/gray]
[gray]<![endif]-->[/gray]
This is definitely not JavaScript problem.


Feherke.
 
Upvote 0 Downvote
That's brilliant, thanks very much for your help, it's worked. Just have to get these cookies to work now.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
391
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
291
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
300
JScannell
JScannell
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
298
coldbohemia
coldbohemia
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
274
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top