www.webdeveloper.com
Results 1 to 12 of 12

Thread: Manipulating properties of multiple span tags

  1. #1
    Join Date
    Jan 2003
    Location
    Orlando, FL
    Posts
    45

    Manipulating properties of multiple span tags

    Is there a way to use JavaScript to change the style for both of the following <span> tags from display:none to dispaly:block? I can hangle the JavaScript to change 1 of the tags, however I would like to change both at the same time. If I need to uniquely identify each address (ex: id="address1", id="address2", etc.), how would I loop through them? ***NOTE: I cannot predict the number of addresses displayed. This will be used on a search results page.***

    David C. Holley
    <span id="address" style="display:none">
    P.O. Box 123
    Atlanta, GA 12345
    </span>

    Chris Ekhart
    <span id="address" style="display:none">
    1233 Main Street
    Hometown, MA 12345
    </span>

  2. #2
    Join Date
    Dec 2002
    Location
    Calgary, Canada
    Posts
    6,119
    document.getElementById("address").style.display="block";
    Cheers

    Khalid

    Message Posting Guidelines In These Forums, Please read these before posting any question.
    Web site: webapplikations.com
    Web Resources Page:Web Resources

  3. #3
    Join Date
    Jan 2003
    Location
    Orlando, FL
    Posts
    45
    I've got that portion of it, however the code only alters the FIRST <span> tag. I'm dealing with MULTIPLE <span> tags and need to manipulate ALL of them in batch.

  4. #4
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    First of all <span> is a generic inline element. If you assign display property block to it , use <div> instead. Anyway, here is the fastest way to accomplish the task:

    <style>
    .showspans span
    { display: block;
    }
    .hidespans span
    { display: none;
    }
    </style>

    <script>
    function showSpans(show)
    { document.getElementById('spanParent').className=show?'showspans':'hidespans';
    }
    <div <!-- or whatever parent element you are using--> id="spanParent" class="hidespans">
    David C. Holley
    <span>
    P.O. Box 123
    Atlanta, GA 12345
    </span>

    Chris Ekhart
    <span>
    1233 Main Street
    Hometown, MA 12345
    </span>
    </div>

    When you have to change properties of multiple elements, much faster to do it through their parent.
    Last edited by Vladdy; 06-23-2003 at 11:03 AM.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  5. #5
    Join Date
    Jan 2003
    Location
    Orlando, FL
    Posts
    45
    So technically, I'm not changing the actually <span> tags, just the <div> tags. Since the <div> is the parent to the <span> the changes cascades down.

    David H

  6. #6
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    That's why style sheets are cascading
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  7. #7
    Join Date
    Jan 2003
    Location
    Orlando, FL
    Posts
    45
    My adaptation of your example isn't working...

    function showAddressClick()
    {
    if (document.getElementById('showAddressesCheckBox').checked == true)
    {
    document.getElementById('searchResults').className="locationAddressShow";
    }
    else
    {
    document.getElementById('searchResults').className="locationAddressHide";
    }
    }

    </script>

    <html>
    .
    .
    .

    <div id="searchResults"><tr><td width = "392" bgcolor="#000066" bordercolor = "#000066"><span class="contentSectionHeaderLight">Dinner Shows</span></td></tr><tr style="cursorointer;cursor:hand">
    <td width = "392" colspan = "3" bgcolor=#FFFFFF bordercolor = #FFFFFF>
    Location Name</td></tr>
    </div></table>

    .
    .
    .
    </html>

    CSS
    span.locationAddressShow
    {
    font-family: MS Sans Serif,Tahoma, Arial,Garamond, Times New Roman, Helvetica, Tahoma;
    font-size: 8pt;
    font-style: normal;
    display: block
    }

    span.locationAddressHide
    {
    font-family: MS Sans Serif,Tahoma, Arial,Garamond, Times New Roman, Helvetica, Tahoma;
    font-size: 8pt;
    font-style: normal;
    display: none
    }

  8. #8
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    you did not adapt it right, compare css declarations:
    mine:
    .someClass span - defines the style of all children of .someClass
    yours:
    span.someclass - defines the style of span element with class .someClass.

    Also, your incorrect HTML markup could be a problem once you correct that: <tr> can not be a child of <div>
    run your file through validator.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  9. #9
    Join Date
    Nov 2002
    Posts
    4,473
    Originally posted by Khalid Ali:
    document.getElementById("address").style.display="block";
    An "ID" has to be unique - only one object can have a given "ID". The getElementById() will only find the first one, because it isn't supposed to look for any more.

  10. #10
    Join Date
    Jan 2003
    Location
    Orlando, FL
    Posts
    45
    If <tr> can't be a child of <div>, how then do I format the table?
    ...
    To workaround the problem, I suppose that I could resubmit the page each time the Show Address Checkbox is checked/unchecked, however that would result in additional roundtrips to the server. Using DHTML obviously cuts down on the trips and puts the weight of the processing on the client.

  11. #11
    Join Date
    Nov 2002
    Location
    Nashua, NH
    Posts
    3,195
    Why do you need the table in the first place???
    Just remove all the rubbish from your HTML, get CSS right and then accomplishing what you are trying to do becomes very easy.
    Here is a little demo I whipped up for you:
    www.vladdy.net/Demos/BatchShowHide.html
    Last edited by Vladdy; 06-23-2003 at 11:04 PM.
    Vladdy

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  12. #12
    Join Date
    Jan 2003
    Location
    Orlando, FL
    Posts
    45
    The solution has presented itself...

    function showAddressClick()
    {
    var spanElements = document.getElementsByTagName('span');

    for(i=-; i<spanElements.length; i++)
    {
    if(spanElements[i].id == "locationAddress")
    {
    spanElements[i].className == "locationAddressShow";
    }
    }
    }

    I had used getElementsByTagName once before and had completely forgotten about it - until I went to bed last night. (Which isn't the first time that I've solved a problem in bed, I once actually had a solution come to mind in a dream.) All of the addresses are enclosed in <span id="locationAddress"> tags.

    As to your question about using CSS as opposed to tables, I was not aware that it is possible to obtain the same level of formatting and event handling using CSS. On several pages on my site, clicking on the table row executes an additional query/event based on the value. (See http://www.gatewayorlando.com/conten...tRateSheet.asp)

    David H

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