Make message not reload every time

**chechu** · 09-12-2014, 08:58 AM

Hey all,
I have this little message box that shows up in between content, with a 'close' feature. The code is inserted in a php file that shows up on every page of my website. Now the box shows up on every page you load even when I close it on one particular page. I'd like to have it that, once you've clicked 'close', that it not only disappears on that page, but also does not appear again on every other page that you will visit.

This is the html code:

Code:

		<div class="message closable-message success">
			<p>Please also check this out ...</p>
		</div>

This is the JavaScript code:

Code:

  // Close message box button
  $(".message.closable-message").append("<div class=\"close-message\">[close]</div>").find(".close-message").click(function() {
    $(this).parent(".message").fadeOut("fast");
  });

Can anyone help me out, please, indicating what to add in the JavaScript code ? Thanks.

**molendijk** · 09-12-2014, 11:16 AM

The reason why it continues to show up on every page is that the jquery-fadeOut script doesn't modify the php-file that is on every page. You should either use a script that dynamically empties the php-file, or put the div somewhere outside the content pages (in an iframe, for instance).

**chechu** · 09-12-2014, 11:23 AM

Thanks for your reply.
I placed the message in the php file, because I need it to be visible on every page of entry.
Any idea how to dynamically empty the php-file, please?

**molendijk** · 09-12-2014, 01:43 PM

See http://stackoverflow.com/questions/1...ajax-same-page

**chechu** · 09-12-2014, 01:57 PM

Not sure if this is exactly what I need. Please allow me to clearify my question.

The above message html code is part of the php file called header, because the header is the same on every page but I happen to change the header often.
Because of that, the message comes up on every page.

Now, with JavaScript, I'd like to see the header file still loading on every page, but that the message, once clicked on "close" does not appear again on the next pages you'll visit (otherwise it gets annoying).

I guess there should be a line added to the script saying "you've been visible in this browser session, now don't show up again".

**molendijk** · 09-12-2014, 03:02 PM

The only easy way I can think of is to 'mimic' framesets, see http://www.dynamicdrive.com/forums/e...-to-hashchange.
That method allows you to change content in index.html (where the header is) at any time. After that, going from one page to another will not affect the modification(s) because there's no reload of index.html. No php needed.

**Deadweight** · 09-12-2014, 04:08 PM

I think you could also make a cookie: http://www.w3schools.com/js/js_cookies.asp

**molendijk** · 09-12-2014, 05:29 PM

Chechu, here's something you can experiment with. With IE and Google Chrome it only works online. Demo here.
index.html:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>From framesets to hashchange</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
body {font-family: verdana; font-size: 12px}
</style>
</head>
<body>
<!-- HEADER: -->
<div style="position: fixed; left:0;top:0;right:0;height: 25%; background: yellow; text-align: center">
<div id="message" style="width: 200px; height: 100px; background:#dedede; margin:auto; margin-top: 10px; padding-left: 5px; padding-right: 5px">
<div style="float: right; cursor: pointer" onclick="document.getElementById('message').style.display='none'; document.getElementById('get_message').style.display='block'">X</div><br><br>
Hallo zuiderbuur, hoe gaat het?<br>
Hallo zuiderbuur, hoe gaat het?<br>
</div>
<div id="get_message" style="display: none; width: 200px; height: 40px; background:#dedede; margin:auto; margin-top: 10px; padding-left: 5px; padding-right: 5px">
Klik <a href="javascript: void()" onclick="document.getElementById('message').style.display='block'; document.getElementById('get_message').style.display='none'">here</a> to get the original message
</div>
</div>
<div style="position: absolute; top: 100px">
<a href="#home.html">Home</a>
<a href="#page1.html">Page 1</a>
<a href="#page2.html">Page 2</a>
</div>
<!-- etc. -->
<!-- DIV FOR THE CONTENT PAGES HERE: -->
<div id="content_pages" style="position: absolute; top: 26%; margin-top: 20px"></div>
<script>
function hash_change()
{
$('#content_pages').load(location.hash.substring(1,location.hash.length))
$('*').scrollTop(0)
}
window.onhashchange=hash_change;
window.onload=hash_change;
if(window.location.hash=='')window.location.replace('#home.html')
</script>
</body>
</html>

home.html

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>From framesets to hashchange</title>
<script src="orph.js"></script>
</head>
<body>
This is home<br>
If you hide the grey box in the header, it will be gone for each page of this site.
</body>
</html>

page1.html:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>From framesets to hashchange</title>
<script src="orph.js"></script>
</head>
<body>
This is page 1.<br>
If you hide the grey box in the header, it will be gone for each page of this site.
</body>
</html>

page2.html:<br>

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>From framesets to hashchange</title>
<script src="orph.js"></script>
</head>
<body>
This is page 2<br>.
If you hide the grey box in the header, it will be gone for each page of this site.
</body>
</html>

orph.js:<br>

Code:

function orph()
{

//dont't allow pages to show as 'orphans' (without the main page). The main page is called 'index.html' here
if(window.location.hash=='')
{
{window.location='index.html#'+document.URL.substring(document.URL.lastIndexOf('/')+1, document.URL.length);}
}

}


if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", orph, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", orph );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            orph();
        };
    }
    else
        window.onload = orph;
}

**chechu** · 09-13-2014, 07:52 AM

Thanks a lot for both your answers, gentlemen.
Arie, your proposal looks indead like a valuable solution, and it even makes browsing easier, but it has two downsides: mobile is required and it conflicts with JS already installed.
Should I go for the cookies then?

**molendijk** · 09-13-2014, 09:15 AM

Chechu, do you mean my script doesn't function on mobiles? I haven't tried that yet. It should be possible.
The javascript conflict can easily be fixed, I think. (There are probably several conflicting onloads).
As for the cookies, I wonder if that's feasible. Deadweight may have a proposal?
Whatever the solution, it must be something that does not reload the header at page transition and yet changes the url (at page transition). That's what my script takes care of.