PDA

View Full Version : 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:

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


This is the JavaScript 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/16586451/change-php-variable-from-jquery-value-using-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/entry.php?292-From-frameset-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 (http://mesdomaines.nu/chechu).
index.html:


<!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


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


<!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>


<!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>


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.

Beverleyh
09-13-2014, 09:42 AM
Like Deadweight, I think a cookie would be a good choice.

- the message box loads by default,
- a click on the "close" button sets a cookie on the user's device and at the same time the message box is set to display:none (the cookie path is set to the root domain and maybe set the expiry for 30 days),
- on each subsequent page-load, if the cookie is detected, the message box is again set to display:none

Does that sound about right?

Quirksmode has 3 convenient cookie JavaScript functions here: http://www.quirksmode.org/js/cookies.html - createcookie, readcookie and erasecookie

chechu
09-15-2014, 08:06 AM
Thanks for your replies.
I have put the message entirely into the megamenu, so that issue is resolved. But now something else comes up with the megamenu.
Please have a look at www.lichaamengeest.be (http://www.lichaamengeest.be), and view the menu. In IE, when hovering the video, the whole menu disappears, whilst in FF and GC you can easily play the video there, as supposed to. How come?

Because it is a heavy menu, I guess I'll give it a try to use the javascript option Arie proposed, so that reloading of the menu is avoided. Just two questions: is the script SEO-friendly, and is it possible to have the url without #?

molendijk
09-15-2014, 10:06 AM
I haven't explicitly checked whether the script is SEO-friendly. But I think it is, because the pages on sites where I use this menu are easilly found. Moreover, as the whole menu (plus header etc.) is put in index.html (in its html format), it should be search-friendly.
We can't have the url without #, because the whole method relies on hashchange, where # plays an essential role.
As for the video, I don't know why is disappears in IE. Can you give me the code for the menu, so that I can check it out?

chechu
09-15-2014, 10:18 AM
If the # can't be removed, then I can't use it as all links will be broken.
These are the codes for the menu:

- html (I shortened it a bit):


<div class="megamenu_container megamenu_light_bar megamenu_light">
<div class="page_wrapper">
<ul class="megamenu mobile">
<li><a href="#" class="megamenu_drop">Inspiratie</a>
<div class="dropdown_fullwidth">
<span class="italic">
<div class="col_3">
<img src="img/geboden.jpg" />
<br><a href="index.php"> korte gedachten (home)</a>
</div>
<div class="col_3">
<img src="img/sitemap.jpg" />
<br><a href="teksten4.php"> inzichten</a>
</div>
<div class="col_3">
<img src="img/indrukken.jpg" />
<br><a href="indrukken.php"> indruk-wekkend</a>
</div>
<div class="col_3">
<img src="img/geluk.jpg" />
<br><a href="watbetekentgeluk.php"> wat betekent geluk</a>
</div>
</span>
<div class="divider-border1"></div>
<div class="col_6">
<div class="video_container">
<iframe src="http://www.youtube.com/embed/jae24Q6Nbj4?rel=0"></iframe>
</div>
</div>
<div class="col_6">
<hr style="width:100%; height:1px; background-color:#eee; margin-top:-1px;">
<div class="col_6">
<span class="italic">
<a href="teksten3.php#21">21| stop er nu toch eens mee</a>
<br><a href="teksten3.php#22">22| tijd vragen schaadt</a>
</span>
</div>
<div class="col_6">
<span class="italic">
<a href="teksten1.php#9">09| zoektocht en herbronning</a>
<br><a href="teksten1.php#10">10| onvolmaaktheid</a>
</span>
</div>
</div>
<div class="col_6">
<hr style="width:100%; height:1px; background-color:#eee; margin-top:-1px;">
<div class="col_6">
Wat betekent geluk?
<span class="italic"><br><a href="watbetekentgeluk.php"> bekijk getuigenissen</a></span>
</div>
<div class="col_6">
<div class="fb-like" data-href="http://facebook.com/lichaamengeest" data-send="true" data-layout="button_count" data-show-faces="true"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

- css: http://lichaamengeest.be/css/menu.css

molendijk
09-15-2014, 08:12 PM
Replace

<div class="video_container">
<iframe src="http://www.youtube.com/embed/jae24Q6Nbj4?rel=0"></iframe>
</div>
with:


<div class="video_container" id="video_container" >
<iframe src="http://www.youtube.com/embed/jae24Q6Nbj4?rel=0" ></iframe>
</div>

then put the following code on the page where you want the menu to do its job, at the end of the body section:


<script>
//see http://www.pinlady.net/PluginDetect/IE/
var tmp = document.documentMode, e, isIE;
try{document.documentMode = "";}
catch(e){ };
isIE = typeof document.documentMode == "number" ? !0 : eval("/*@cc_on!@*/!1");
try{document.documentMode = tmp;}
catch(e){ };
if (isIE)
{
document.getElementById('video_container').style.zIndex=-1;
}
</script>

It all boils down to this: the video container must have a negative zIndex in IE, not in the other browsers.

Why do you say If the # can't be removed, then I can't use it as all links will be broken? After all, you don't have hundreds of links.

chechu
09-16-2014, 07:40 AM
Thanks Arie.
Strangely enough your solution only works for the video in the first menu-item, but not with the others.
Through social media a lot has been linked to the site, so now I can't start changing the url's.

molendijk
09-16-2014, 10:47 AM
I didn't know that you had the video on more than one page, so I used document.getElementById . But given the fact that you use it on more pages, we need a script that uses the classname of the video container. Here it is (at the end of the body section):


<script type="text/javascript">
function correct_ie(tag,className) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == className){
els.item(i).style.zIndex="-1";
}
}
}
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {correct_ie('div','video_container')}
</script>

As for the links, I wasn't aware of the social media thing. Yes, that's a problem.

chechu
09-16-2014, 11:08 AM
All works fine now. Thanks a lot, Arie!!
Another thing I'm looking into is infinite scrolling for the homepage. As you seem to be a javascript wizard: any suggestions? I always ran into scripts conflicts before ...

molendijk
09-16-2014, 11:52 AM
No, I'm not a real wizard. For instance, I don't know much about infinite scrolling. I'm not a fan of it, see this article (http://www.smashingmagazine.com/2013/05/03/infinite-scrolling-lets-get-to-the-bottom-of-this/).

chechu
09-16-2014, 12:15 PM
Indeed a feature to think about.
Thanks, Arie.