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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Unhappy Script not catching first trigger event?

    Hey everyone,

    In the code below its simply being used to hide/show a div "content" whose CSS display value is set to NONE initially, the problem is this script ignores or doesn't fire on the first click, but it works perfect if i click the link a second time. The page has NO other scripts running. any ideas?

    Code:
    <a href="javascript:void(0)" onmousedown="if(document.getElementById('content').style.display == 'none'){ document.getElementById('content').style.display = 'block'; }else{ document.getElementById('content').style.display = 'none'; }">Contest Rules</a>
    ARCLite Studio

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    wow that's weird. it doesnt detect that it's set to none so it sets it to non ( inline) on the first click, then sets it to block (inline) on the second click

    I'm interested in the answer myself. if you set the style to display none inline, it works as expected.

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Cool

    Quote Originally Posted by DanInMa View Post
    wow that's weird. it doesnt detect that it's set to none so it sets it to non ( inline) on the first click, then sets it to block (inline) on the second click

    I'm interested in the answer myself. if you set the style to display none inline, it works as expected.
    Hey DanInMa, Thanks didn't try to set it Inline but your right it triggers as expected that way. Even though this fixes the immediate problem I still think this is strange behavior so if anyone else has ideas on it, I'd still like to hear them.

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You can't read the 'style.property' of an element unless it has either been assigned using JS code or is set using an inline style. But on the second mousedown it has been set by your JS, so it can then be read.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    ARCLite Studio (05-02-2011)

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Thanks Andrew, I understand now. seems strange that it can't read the value set in CSS style TAG but in any case it's a lesson learned. Thanks.

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    That's what getComputedStyle() is for ... at least for "modern browsers". Internet Explorer needs a push to the right direction with http://snipplr.com/view/13523/getcomputedstyle-for-ie/

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Better use two classes. And call a function, do not write an inline code. And use onclick
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    #content.hidden{
    display:none;
    }
    #content.shown{
    display:block;
    }
    </style>
    <script type="text/javascript">
    function showhide(id){
    var div=document.getElementById(id);
    div.className=div.className=='hidden'?'shown':'hidden';
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="showhide('content');return false">Contest Rules</a>
    <br>
    <br>
    <div id="content" class="hidden"> Content</div>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Tags for this Thread

    Posting Permissions

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