www.webdeveloper.com
Results 1 to 5 of 5

Thread: Hide/Show requires double click first time, Why??

  1. #1
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856

    Hide/Show requires double click first time, Why??

    I'm testing a page with a .js hide/show <div> overlay to hide/show a video player. The image of the video screen in the center of the page, when clicked, opens a hidden <div> overlay. It works but it requires the viewer to double click the first time. What needs to change to make it "show" the <div> on the first click?
    Once the video <div> is displayed, then it works every time with just one click to hide or show. It's just the first time that requires two clicks to get it to work. Here is the page:
    http://www.cidigitalmedia.com/tutori...ot/index2.html
    Here is the code used to implement the hide show, in the <head>:
    Code:
    <!-- ELEMENTS NEEDED FOR VIDEO PLAYER POPUP -->
    
    <!-- The javascript hide/show -->
    <script type="text/javascript" language="JavaScript">
    <!--
    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
    else { document.getElementById(d).style.display = "none"; }
    }
    //-->
    </script>
    and on the image, which acts as the button:
    Code:
    <a href="javascript:ReverseDisplay('mediaspace2')"><img src="images/vid_button_image.jpg" width="376" height="282" border="0" /></a>
    Thanks for your time!
    Best wishes,
    Eye for Video

  2. #2
    Join Date
    Dec 2010
    Posts
    207
    Probably because the default style.display isn't 'none', unless the element is styled inline.

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    You pegged it exactly
    Code:
    <div id="mediaspace2" style="display:none">
    Works perfectly!
    Thanks for your time!!
    Best wishes,
    Eye for Video

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    function ReverseDisplay(d) {
      var s=document.getElementById(d).style;
      if(s.display != "block" ){ s.display = "block"; } else { s.display = "none"; }
    }

  5. #5
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    I did manage to get it working correctly by using an inline style, but I still appreciate your suggestion. I'll give that a try also as another method to correct the problem.
    Best wishes,
    Eye for Video

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles