Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Make message not reload every time

  1. #1
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    905
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default Make message not reload every time

    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.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,823
    Thanks
    49
    Thanked 240 Times in 233 Posts
    Blog Entries
    56

    Default

    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).

  3. #3
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    905
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    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?

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,823
    Thanks
    49
    Thanked 240 Times in 233 Posts
    Blog Entries
    56

  5. #5
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    905
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    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".

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,823
    Thanks
    49
    Thanked 240 Times in 233 Posts
    Blog Entries
    56

    Default

    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.

  7. #7
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    508
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    I think you could also make a cookie: http://www.w3schools.com/js/js_cookies.asp
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,823
    Thanks
    49
    Thanked 240 Times in 233 Posts
    Blog Entries
    56

    Default

    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;
    }

  9. #9
    Join Date
    Jul 2006
    Location
    Antwerp, Belgium (Europe)
    Posts
    905
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Default

    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?

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,823
    Thanks
    49
    Thanked 240 Times in 233 Posts
    Blog Entries
    56

    Default

    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.

Similar Threads

  1. How to make sure Javascript file load each time
    By lena in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-23-2012, 04:27 PM
  2. Make Layers Appear Over Time
    By TicTacWoe in forum Looking for such a script or service
    Replies: 40
    Last Post: 12-23-2009, 11:35 PM
  3. Replies: 0
    Last Post: 08-31-2007, 10:34 AM
  4. How Do I make A Time Based T.V. Show?
    By paagle in forum JavaScript
    Replies: 3
    Last Post: 12-21-2005, 06:55 AM
  5. Pausing up-down message scroller? One time scroll only question
    By TerraBlader in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-10-2005, 04:14 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •