SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: Show/hide a box

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/hide a box

    I want to have a box (a <div>) to display shortly after the page is loaded, for it to fade in and for a user to be able to close/hide the box if they wish. I have got most of the way there but after I close the box it reappears. I can't help but think I shouldn't have
    Code:
    style="display:block"
    on the <div> but if I don't it doesn't fade in. My code is as follows:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>
    <style>
    img {
        border: none;
    }
    #infobox {
        text-align: center;
        position: absolute;
        width: 400px;
        bottom: 50px;
        left: 20px;
        padding: .5em;
        opacity: .0;
        display: none;
        color: #222;
        border: solid 1px #222;
    }
    #infobox.visible {
        opacity: 1.0;
        transition: opacity .7s linear;
    }
    #infoboxclose {
        position: absolute;
        top: -6px;
        right: -6px;
    }
    </style>
    <script>
    window.onload = function() {
      setTimeout("showbox()", 500);
    }
    function showbox() {
      document.getElementById("infobox").setAttribute("class", "visible");
    //  document.getElementById("infobox").setAttribute("style", "display:block");
    }
    function hidebox() {
      document.getElementById("infobox").setAttribute("class", "");
    //  document.getElementById("infobox").setAttribute("style", "display:none");
    }
    </script>
    </head>
    <body>
    <div id="infobox" style="display:block">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Vivamus tempus, leo sit amet luctus laoreet, nunc lorem lobortis elit, sit amet egestas urna dolor  quis diam. Quisque tincidunt eros eu erat varius scelerisque gravida turpis egestas. 
    <a href="" onClick="hidebox();"><img src="close.png" height="20" width="20" alt="close" id="infoboxclose" /></a>
    </div>
    </body>
    </html>
    Thanks guys
    blessed are the cracked for they let in the light

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've found the answer! The a href should be a href="#"...
    blessed are the cracked for they let in the light

  3. #3
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    You are on the right track.
    I would recommend not using any inline styling (as you mentioned).
    But, more importantly, I think you should reverse your logic.
    In other words, create a class that HIDES the box (display: none
    Apply that class to the box initially. In your onLoad/Timeout JS call the 'showBox' function which removes the class.
    Then, you can use the 'hideBox' to apply that original class (which hides the box).

    This all can be done [more] easily with JQuery. And you can animate it in addition!!
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    What is happening is that your click is resulting in the page loading up again.

    You can prevent that from happening by disabling the default behaviour of that link. You can achieve that by returning false from the function, and in turn, returning the hidebox function in the onclick attribute.

    You can also remove the display:none from your CSS and you won't need the display:block in your HTML code.

    ===

    There are better ways to achieve what you're wanting to do here, that result in more flexible and easily maintainable code.

    • Keep your HTML and scripting code separate from each other
    • Load your scripts from the end of the body
    • Pass a function to setTimeout instead
    • Target the link instead of the image - and use cascading to reach the img tag
    • Attach events from the scripting code instead of using inline event attributes
    • Use class names for CSS selectors instead of ID tags


    We could spend all day going over details about the above tips, and you're welcome to please ask for more info about any of them.

    After the above improvements, you end up with the following:

    HTML Code:
    <a id="infoboxclose" href="#"><img src="close.png" height="20" width="20" alt="close" /></a>
    ...
    <script>
        ...
    </script>
    </body>
    Code javascript:
    function showbox() {
      document.getElementById("infobox").setAttribute("class", "visible");
    }
    function hidebox() {
      document.getElementById("infobox").setAttribute("class", "");
      return false;
    }
     
    document.getElementById('infoboxclose').onclick = hidebox;
    setTimeout(showbox, 500);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks guys! I have added
    Code:
    document.getElementById('infobox').setAttribute('style', 'display:none');
    to my hidebox() function to avoid the cursor changing when it goes over the hidden box and anchor. I'm not sure if it's the best way to do it...
    blessed are the cracked for they let in the light

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gandalf458 View Post
    Many thanks guys! I have added
    Code:
    document.getElementById('infobox').setAttribute('style', 'display:none');
    to my hidebox() function to avoid the cursor changing when it goes over the hidden box and anchor. I'm not sure if it's the best way to do it...
    It's much better to use cursor:default to achieve what you're wanting with the cursor.

    Code css:
    #infobox {
        ...
        cursor: default;
    }

    It's not a good idea for scripting to replace the entire classname of an element either. Here are some functions that let you add and/or remove a certain name from the class instead.

    For example:

    Code javascript:
    addClass(document.getElementById('infobox'), 'visible');
    Last edited by paul_wilkins; May 16, 2013 at 13:09.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, Paul. The cursor:default works fine and I can clearly see it's a better way to do the job.

    However, replacing
    Code:
    document.getElementById('infobox').setAttribute('class', 'visible');
    with
    Code:
    addClass(document.getElementById('infobox'), 'visible');
    in my showbox() function doesn't seem to work - even if I add class="" to the <div>
    blessed are the cracked for they let in the light

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, the cursor:default doesn't work. The problem occurs if there is something behind the box. I have uploaded my page to http://gandalf458.co.uk/infobox3.html so you can see. Thanks G
    blessed are the cracked for they let in the light

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah - I think addClass is a jquery command? I have found
    Code:
    document.getElementById('infobox').classList.add('visible');
    which seems to do the job...
    blessed are the cracked for they let in the light

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gandalf458 View Post
    However, replacing
    Code:
    document.getElementById('infobox').setAttribute('class', 'visible');
    with
    Code:
    addClass(document.getElementById('infobox'), 'visible');
    in my showbox() function doesn't seem to work
    You will be wanting the hasClass/addClass/removeClass functions from http://snipplr.com/view/67176/ for that to work.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2002
    Location
    Italy
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah - thanks
    blessed are the cracked for they let in the light


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
  •