SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle Javascript works on second click, not first.

    Greetings, As the thread title explains, my toggle javascript only works on the second and subsequent clicks. not the first.

    here's the page:
    http://tinyurl.com/yozdgh

    Here's the javascript code in the head:
    Code:
    <script language="javascript">
      function toggleDiv(divid){
        if(document.getElementById(divid).style.display == 'none'){
          document.getElementById(divid).style.display = 'block';
        }else{
          document.getElementById(divid).style.display = 'none';
        }
      }
    </script>
    And the button:
    Code:
    <a href="javascript:;" onclick="toggleDiv('detailspecs');">Details</a>
    Here's the css page:
    http://tinyurl.com/2yrjw8
    Do a quick page "Find" of "#detailwraper" to skip to the css code that applies to this section.

    I've encountered this problem before but don't remember how I solved it.

    It happens in Firefox Mac, Safari Mac and IE 6 PC.

    Assistance would be greatly appreciated.

    Much thanks.

    John.

  2. #2
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everything looks ok in regards to the javascript and the css. In the css, the display property is initially set (if it were not set, the if statement in your javascript wouldn't evaluate to true).

    Try adding a document.writeln(divid) before the if statement, just to see what is being passed on the first click, to your javascript.

    You may try changing your href="javascript:;" to href="#"

    If that doesn't work, if you have a css editor with syntax hilighting, check to make sure you don't have any unterminated properties (i.e. ; missing at the end of your css property)...I've seen weird stuff happen if a css property is not terminated by a ;
    intragenesis, llc professional web & graphic design

  3. #3
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Holmescreek!
    Try adding a document.writeln(divid) before the if statement, just to see what is being passed on the first click, to your javascript.
    I tried this. Though I'm pretty sure I didn't have the syntax correct when I added it, I got a flash of "detailspecs" which is the div id.


    You may try changing your href="javascript:;" to href="#"
    Tried it. Same result.


    Check to make sure you don't have any unterminated properties
    I'm using Dreamweaver and Coda. Both highlight when there's an unterminated property.


    HOWEVER, If I initially set #detailspecs to "display:block;" the button DOES toggle on the first click, changing the display to "none" so that the "detailspecs" div hides.

    Does THAT offer any more clues?

    Does this mean I need to post this over in a CSS forum instead?

    Thanks again.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have the following:
    Code:
     if(document.getElementById(divid).style.display == 'none'){ ... }
    Try alerting document.getElementById(divid).style.display and you will notice that it will alert an empty string. Meaning no value has been set.

    You probably defined the display to be none in a style block or an external css file. This will script would work if you defined your CSS inline, meaning using the style tag.

    Read the following to find out why this is the case.

  5. #5
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script language="javascript">
      function toggleDiv(divid){
      
      x = document.getElementById(divid).style;
          
          
        if(x.display == 'none' || x.display == ''){
          x.display = 'block';     
        }else{
          x.display = 'none';
        }
        
      }
    </script>

    That will fix it.
    intragenesis, llc professional web & graphic design

  6. #6
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    You probably defined the display to be none in a style block or an external css file. This will script would work if you defined your CSS inline, meaning using the style tag.
    Yeah, I was wondering about this myself, after figuring it wasn't picking up the initial value, I checked exactly what value was being passed on the first and subsequent clicks. I read the article, but really doesn't explain why javascript won't pick up the value from an external style sheet. I just used (|| somestyle == '') --- so, it is possible to use this as a work around for external style sheets (at least in this case). But, for example, if a property where set to "red" in an external style sheet, you wouldn't be able to retrieve the value.

    The link to the article that you posted doesn't really explain why javascript can't fetch the value of the property on the first click, but will on subsequent clicks. Any clues? I try to avoid inline styles at all cost, editing the inline html kind of defeats the purpose of having style sheets (separation of content and presentation.)
    intragenesis, llc professional web & graphic design

  7. #7
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved!

    Quote Originally Posted by holmescreek View Post
    [code]

    That will fix it.
    Certainly did! Thanks so much. And I was able to leave my css external.

    FYI, I tried putting the style inline before. Still had the problem.

    Thanks to both of ya for your time and effort!

  8. #8
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the future, what you could do is set up a javascript function that runs when the page is initially loaded. This seems to fix problem with external style sheets as well...

    For instance a function that automatically sets detailspecs_1, detailspecs_2 etc., to display="none" for all of the divs.

    For example, the first function (below) hides all the divs when the page loads i.e. detailspecs_1, detailspecs_2...detailspecs_4

    The section function, called during and onclick(), hides/collapses all the divs by calling hideall(), then expands/shows whatever div was clicked on.

    Code:
     <script language=javascript>
    
      function hideall(){
        var numdivs=4;
    	for(i=1; i <= numdivs; i++) {
    	  x = document.getElementById('detailspecs_' + i).style;
          x.display = "none";
    	 }
    	
      }
      
      function showlayer(layerid){
         hideall();
    	 x = document.getElementById(layerid).style;
         x.display = "block";
      }
      
    </script>
    intragenesis, llc professional web & graphic design


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
  •