Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do I automatically hide top banner after a few seconds

    I have a top banner on my blog http://markhamelectriciantoronto.blog.ca/

    and

    I would like to automatically hide it after 8 seconds.

    and

    I'd like to hide the top banner forever on all posts or pages after it was displayed on the fisrst page for 8 seconds.


    I have no idea how to do it or even what to look for. I am a beginner. The only thing I know is that I need to place some code into the CSS.


    Can anyone help pls?


    Thanks in advance.


    header image CSS code is

    #header-image {
    background-image:url(http://data8.blog.de/media/210/69082...562b564_o.jpeg) !important;
    height:372px;
    width: 1340px;
    margin-bottom:50px;
    background-position:100% 0;
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Nope, you do not need or want CSS code.

    You could use CSS, but no real reason to.

    You will need to set a cookie (a session cookie, meaning do *NOT* specify an expires time for it).

    Each time you hit the page, you check for the cookie. If it is there, you hide the banner immediately. If it is not there, you create the cookie and then hide the banner after 8 seconds.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    something like this:
    Code:
    <script type="text/javascript">
    (
      function( )
      {
          var banner = document.getElementById("header-image");
          if ( document.cookie.indexOf("HIDEBANNER") >= 0 )
          {
              banner.style.display = "none";
          } else {
              document.cookie = "HIDEBANNER";
              setTimeout( function() { banner.style.display = "none"; }, 8000 );
          }
      }
    )();
    </script>
    Put that code *JUST BEFORE* the </body> of your page and see if it works.

    It's awfully simplistic, but it should be effective.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    vic999 (03-05-2013)

  • #4
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pedant, thank you so very much! (especially for your patience!)

    can I hide the banner on other pages but the first page with simple code similar to this?

    .page-id-3 #header-image {
    display:none;
    }

    I just do not know what to enter for the .page-id-3

    my page URLs look like this http://markhamelectriciantoronto.blo...kham-15525301/

    ---------

    unfortunately I am using a primitive blog.ca platform that did not allow me to use in CSS the code you created.

    blog.ca gives a very limited freedom of what one can do with the CSS

    I think I am not allowed to use any JS in the CSS

    mb you or somebody else can offer me an HTML version of your code? sorry if it is an utterly stupid question


    my CSS code box does NOT even have </body>

    after I put your code in, it gave me "Your CSS contains invalid HTML data."

    just in case, all code I have in the CSS code box is given below

    ----------------------
    #header-image {
    background-image:url(http://data8.blog.de/media/210/69082...562b564_o.jpeg) !important;
    height:372px;
    width: 1340px;
    margin-bottom:50px;
    background-position:100% 0;
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

    #main-inner, #right-inner, #left-inner {
    padding-top:60px !important;
    }

    #blog {
    width: 1000px;
    }

    #main {
    width: 1000px;
    }

    #main-inner {
    background-repeat:repeat-x;
    }

    .post-info {
    display: none;
    }

    .author {
    display:none;
    }

    .date {
    display:none;
    }

    .user {
    display:none;
    }

    .by {
    display:none;
    }

    .prepos {
    display:none;
    }

    #comments {
    display:none;
    }

    #topnavbar {
    display:none;
    }

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    What I gave you is *NOT* CSS code!

    It is *JAVASCRIPT* code.

    It CAN NOT go into your CSS file.

    Effectively, what I gave you *IS* HTML code. That is, you can just drop it into your HTML *as is*.

    It should be put directly into your HTML code, *JUST* before the </body>, as I said.

    Or you can put it in a separate ".js" file and then include that file just befor the </body>.

    I don't know what other silly limitations that site puts on you, but one way you could make the banner disappear on the other pages is to simply put this code *DIRECTLY INTO THE HTML* of the page:
    Code:
    <style type="text/css">
    #header-image { display:none; }
    </style>
    You can put that anywhere in the HTML *before* where the header-image code is.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    vic999 (03-05-2013)

  • #6
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pedant, thank you so very much!

    You are a genius !!!!!!!!!!!!!!!

    thank you 999999999999999999 times !!!!!!!!!


    The site restricts most coding. So I added a widget with your code inside and it worked like a charm!!!!!



    <script type="text/javascript">
    (
    function( )
    {
    var banner = document.getElementById("header-image");
    if ( document.cookie.indexOf("HIDEBANNER") >= 0 )
    {
    banner.style.display = "none";
    } else {
    document.cookie = "HIDEBANNER";
    setTimeout( function() { banner.style.display = "none"; }, 8000 );
    }
    }
    )();
    </script>

    I am so grateful. I now know how to bypass those coding restrictions!!!

    You have just made my day!

    Old Pedant, I hope you could address this issue. I understood what the code does. It puts a cookie on computer or on browser. And the PC/browser does not show the banner anymore, never (if one does not delete the cookie)

    Is it possible to add a code that deletes the cookie in 40 seconds and loops the cycle (displays the banner for 8 sec, hides for 40 sec, displays the banner for 8 sec, hides for 40 sec, etc.) And deletes the cookie when one closes all pages of my website http://markhamelectriciantoronto.blog.ca/


    Thank you
    Last edited by vic999; 03-05-2013 at 06:51 PM.

  • #7
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pedant, thank you so very much!

    The site restricts me from adding a code. So I created a widget and put your code inside.


    It worked like a charm!!!!!!

    You are a genius!


    Thank you 9999999999999999 times !!!!!!!!!!



    <script type="text/javascript">
    (
    function( )
    {
    var banner = document.getElementById("header-image");
    if ( document.cookie.indexOf("HIDEBANNER") >= 0 )
    {
    banner.style.display = "none";
    } else {
    document.cookie = "HIDEBANNER";
    setTimeout( function() { banner.style.display = "none"; }, 8000 );
    }
    }
    )();
    </script>


    If I am correct, the code puts a cookie into a browser or computer. And it will not be possible to see the banner again (unless one deletes the cookie). Right?


    Old Pedant, can you pls add a code that would restore/show the banner in 40 sec? And then loop everything. To make the banner 8 sec on and 40 sec off, 8 sec on and 40 sec off, etc. And delete the cookie upon exit/closing the site

    Thank you so much!!!!!!

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I *REALLY* do NOT think you want to do that. It may seem clever, but all it will do is annoy your users. It's terrible human interface design.

    I have to tell you that I think even hiding the banner image, at all, is a mistake.

    I think a better choice would be to have 3 to 6 banner images that slide in, one after the other. That's pretty standard web design and people are used to it. Gives you a chance to showcase several examples of your work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You are right about appear/disappear!

    Because you are a PRO and I am not.

    Is it possible to at least delete the cookie upon exiting/closing the site?

    I appreciate your time, wisdom and patience

    Believe me, I learned a lot from you!!!!

    Thank you so much

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Quote Originally Posted by vic999 View Post
    Is it possible to at least delete the cookie upon exiting/closing the site?
    Will happen automatically if they close the browser. Only stays there if they don't close the browser and then come back later.

    And it's easy to delete the cookie if they click on some link that you provide to exit, but really tough if they simply close that tab.

    Maybe simplest thing to do is add an expires time to the cookie of, say, 10 minutes from when it is set? Would that be good enough?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    add an expiry time to the cookie of, say, 10 minutes from when it is set? Would that be good enough? ---------- that would be just perfect!


    I am so lucky to have you answering my Qs!!!


    Thank you so much

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,593
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by vic999 View Post
    add an expiry time to the cookie of, say, 10 minutes from when it is set? Would that be good enough? ---------- that would be just perfect!
    Note that if you set an expiry time on the cookie then it will continue to exist after the browser is closed if the browser is closed before the time expires and if it still hasn't expired when they reopen their browser it will be read in again.

    If you don't set an expiry time then the cookie never gets saved to their hard drive and ceases to exist when their browser is closed.

    Which will work better depends on how long your visitors keep their browser open for each time they open it and whether they are likely to return to your site during the one browser session or within a specific time.

    If most of your visitors are unlikely to return to your site during the same browser session then using a session cookie without an expiry time is better as then you don't waste time writing the cookie to their hard drive so as to ensure that it gets retained for the ten minutes if they happen to close their browser during that time.


    The only person likely to visit your site multiple times in one browser session is you.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Okay, try this:
    Code:
    <script type="text/javascript">
    (
      function( )
      {
          var banner = document.getElementById("header-image");
          if ( document.cookie.indexOf("HIDEBANNER") >= 0 )
          {
              banner.style.display = "none";
          } else {
              var later = new Date( (new Date()).getTime() + 10 * 60 * 1000 );
              document.cookie = "HIDEBANNER=YES"; expires="+later.toUTCString());
              setTimeout( function() { banner.style.display = "none"; }, 8000 );
         }
      }
    )();
    </script>
    Change the 10 in there to the number of minutes before the cookie expires.

    UNTESTED. But it looks simple enough it should work. Throw it back at me if it doesn't.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pedant,

    thank you, but the new code does not hide the banner

    I am not smart enough yet to fix that

    --------------------------

    felgall,

    that was a very useful info for me to ponder. As I do not understand the coding limitations I have to ask this Q: is it possible for the code to delete the cookie:

    after 10 minutes

    or

    delete the cookie upon exiting/closing my website?

    or

    delete the cookie upon closing the browser?

    whichever happens first



    The only person likely to visit your site multiple times in one browser session is you. ------------ true!! But I do not know if I need to worry about my cookie littering other ppl's machines.

    Old Pedant & felgall, personally I love the code below. But should I worry about others and removing the cookie at all?

    Thank you for your time. I respect your knowledge so much!

    <script type="text/javascript">
    (
    function( )
    {
    var banner = document.getElementById("header-image");
    if ( document.cookie.indexOf("HIDEBANNER") >= 0 )
    {
    banner.style.display = "none";
    } else {
    document.cookie = "HIDEBANNER";
    setTimeout( function() { banner.style.display = "none"; }, 8000 );
    }
    }
    )();
    </script>

  • #15
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Old Pedant, do you have a personal dev blog?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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