SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help finding the first 11 letter in an element id

    Hello,

    Your help with this would be greatly appreciated. I have text that can be too long at times so I am going to truncate when it is too long. But I want to roll over the truncated text and show the full version of the text. Right now that is working fine.

    What I need help with is this: all of these <divs> and there ids will be created dynamically. The first few letters of the id will be the same but the last part will be a random number. When the page opens the the <div>s that are supposed to be collapsed are not; so I figure I should create a function that will collapse them onload.

    My first question is:

    I want to do a for loop through all the elements by id but only reference the first 11 letters of there name. I have the function started but it I am doing something wrong. Can you take a look at function collapseAll(x) and see why it isn't collapsing then all onload?

    My second question is:

    Do you think collapsing them onload is the right way to do it? I am concerned that when the page loads that there will be a bunch of <div>s collapsing all over the place (not attractive)

    Here is a working version: http://www.servicewhale.com/expandableDiv.htm

    code is below
    Thanks for you help!

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    
        function expand(x){
            var expandAction = document.getElementById(x);
           
            expandAction.style.display="block";
        }
    
        function collapse(x){
            var collapseAction = document.getElementById(x);
           
            collapseAction.style.display="none";
        }
       
        function collapseAll(x){
             
           
            for (var i = 1; i <= document.getElementById(x.substring(0, 12)).length; i++)
               {
                    document.getElementById(x.substring(0, 12)).style.display="none";
               }
    					 
    					 
        }
    </script>
    
    </head>
    <body onload="collapseAll('ProductFull')">
    
    <div id="ProductTrunc_1" onmouseover="expand('ProductFull_1');" onmouseout="collapse('ProductFull_1');" class="productName">
        Some Text
    </div>
    <div id="ProductFull_1" class="productNameGridView">
        Some More Text Some More Text Some More Text Some More Text Some More Text
    </div>
    <div id="lowerText_1">
        Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
    </div>
    
    <div id="ProductTrunc_2" onmouseover="expand('ProductFull_2');" onmouseout="collapse('ProductFull_2');" class="productName">
        Some Text
    </div>
    <div id="ProductFull_2" class="productNameGridView">
        Some More Text Some More Text Some More Text Some More Text Some More Text
    </div>
    <div id="lowerText_2">
        Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
    </div>
    
    <div id="ProductTrunc_3" onmouseover="expand('ProductFull_3');" onmouseout="collapse('ProductFull_3');" class="productName">
        Some Text
    </div>
    <div id="ProductFull_3" class="productNameGridView">
        Some More Text Some More Text Some More Text Some More Text Some More Text
    </div>
    <div id="lowerText_3">
        Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text Lower Text
    </div>
                                                  
    </body>
    </html>
    Last edited by matches; Aug 27, 2007 at 07:43. Reason: error in link

  2. #2
    SitePoint Wizard rozner's Avatar
    Join Date
    Oct 2002
    Location
    Paris
    Posts
    1,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need to do getAllTags('div'), that's not the right function name but something like that exists, then you can do getId on each and compare to the substring. The onload problem can be annoying as it will show until the page loads. You can get around this using CSS. If you're creating the divs dynamically, create them as hidden divs, do like, createElement('div').style.visibilty = 'hidden'

    This way they're not visible during the load.

  3. #3
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need to do getAllTags('div'), that's not the right function name but something like that exists
    Thanks for the info. I assume that "getAllTags()" is a Javascript function. Does anyone have any idea what the name is. I did a search for it and something like it but I have come up with nothing.

  4. #4
    SitePoint Wizard rozner's Avatar
    Join Date
    Oct 2002
    Location
    Paris
    Posts
    1,058
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah I decided to actually look it up, it's

    document.getElementsByTagName(tagname)


    And I believe this returns an array that you can loop through

  5. #5
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help rozner! I am just trying to understand this. If I code:

    Code:
               var e = document.getElementsByTagName("div")	
    				
    	   for (var i = 1; i <= e.length; i++)
               {
                    document.write(i)
               }
    all I get is 1. There are a lot more than just 1 <div> on the page. Am I doing something wrong?

  6. #6
    SitePoint Addict Wildhoney's Avatar
    Join Date
    Apr 2006
    Location
    Nottingham
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the style properly display: hidden to hide all your elements that you want hidden before hand. That will prevent the unfavorable collapsing of the elements.

    As for your loop. It would be something like this:

    Code:
    pDivs = document.getElementsByTagName('div');
    
    for(iIndex = 0; iIndex < pDivs.length; iIndex++)
    {
    	if(!pDivs[iIndex].getAttribute('id'))
    	{
    		continue;
    	}
    	
    	alert(pDivs[iIndex].getAttribute('id').substr(0, 11));
    }
    Perfect!
    TalkPHP.com - The Friendly PHP Community

    Watch Reaper Online - Watch Chuck Online

  7. #7
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you say "Use the style properly display: hidden" do you mean do this programatically with javascript or write in the CSS code? I figure if I write in the CSS then the Javascript wont be able to change it. But I can be really off base there. I will try anyway.

  8. #8
    SitePoint Addict Wildhoney's Avatar
    Join Date
    Apr 2006
    Location
    Nottingham
    Posts
    246
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Write it with the CSS so it does not lag. Javascript can override the CSS by setting the styles dynamically when you want to change them:

    Code:
    document.getElementById('myElement').style.hidden = 'none';
    TalkPHP.com - The Friendly PHP Community

    Watch Reaper Online - Watch Chuck Online

  9. #9
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! Thank you!


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
  •