SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using javascript to add HTML attributes

    i have the following code.
    Code HTML4Strict:
    <div id="who">
    <div id="whoshort">
    <h2>WHO ARE WE</h2>
    <p>stuff</p>
    <a href="javascript: void;" onclick="new Effect.toggle($('wholong'),'blind')">More...</a>
    </div><!-- closes whoshort -->
    <div id="wholong" style="display: none;">
    <p>More Stuff</p>
    <a href="#who" onclick="new Effect.toggle($('wholong'),'blind')">Close</a>
    </div><!-- closes wholong -->
    </div><!-- closes who -->
    The onclick refer to script.aculo.us effects.

    At the moment this works fine, however I now need to make it degrade so that everything is ok if javascript is turned off, therefor I need to sort out this
    Code HTML4Strict:
    <div id="wholong" style="display: none;">
    so that the style attribute is added dynamically by javascript.

    I am a bit of a noob when it comes to javascript, I know that I need to use the GetElementById, but from there i'm stumped.
    Can anyone help?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    document.getElementById("wholong").style.display = "none";

  3. #3
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there any way I can use regular expressions with this so that it targets any element with an ID that ends in long?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Use document.getElementsByTagName(*) and loop through them all. In your loop, check whether "long" is in the ID of the element in the current iteration by doing:
    Code:
    if (elements[i].id.indexOf('long') > -1) { ... }
    .

  5. #5
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You must of missed the bit where I said I was a noob

    You lost me at the loop bit.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note, you actually would want to omit both the "More" link and the "Close" link if JavaScript was not enabled, so here's an example that creates both of them:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset:utf-8">
      <title></title>
    </head>
    <body>
    <div id="who">
        <div id="whoshort">
            <h2>WHO ARE WE</h2>
            <p>stuff</p>
        </div><!-- closes whoshort -->
        <div id="wholong">
            <p>More who Stuff</p>
        </div><!-- closes wholong -->
    </div><!-- closes who -->
    
    <div id="what">
        <div id="whatshort">
            <h2>what ARE WE</h2>
            <p>stuff</p>
        </div><!-- closes whatshort -->
        <div id="whatlong">
            <p>More what Stuff</p>
        </div><!-- closes whatlong -->
    </div><!-- closes what -->
    
    <div id="where">
        <div id="whereshort">
            <h2>where ARE WE</h2>
            <p>stuff</p>
        </div><!-- closes whereshort -->
        <div id="wherelong">
            <p>More where Stuff</p>
        </div><!-- closes wherelong -->
    </div><!-- closes where -->
    
    
    <script src="scriptaculous-js-1.8.1/lib/prototype.js" type="text/javascript"></script>
    <script src="scriptaculous-js-1.8.1/src/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
    window.onload = function() {
        var i, moreLink, closeLink;
        var shortReg = /short$/;
        var longReg = /long$/;
        // Loop through all div elements (this assumes you'll always apply the ids to div elements)
        var allElements = document.getElementsByTagName('div');
        for (i = 0; i < allElements.length; i++) {
            if (allElements[i].id) {
                if (shortReg.test(allElements[i].id)) {
                    // Append a More... link
                    moreLink = document.createElement('a');
                    var id = allElements[i].id;
                    moreLink.href = "#";
                    moreLink.onclick = function(id) {
                        id = id.replace('short', 'long');
                        return function() {
                            new Effect.toggle($(id),'blind');
                            return false;
                        };
                    }(id);
                    moreLink.appendChild(document.createTextNode("More..."));
                    allElements[i].appendChild(moreLink);
                }
                else if (longReg.test(allElements[i].id)) {
                    // Append a Close link
                    closeLink = document.createElement('a');
                    var id = allElements[i].id;
                    closeLink.href = "#" + id.substr(0,id.length - 4);
                    closeLink.onclick = function(id) { 
                        return function() {
                            new Effect.toggle($(id),'blind');
                        };
                    }(id);
                    closeLink.appendChild(document.createTextNode("Close"));
                    allElements[i].appendChild(closeLink);
                    // hide this element
                    allElements[i].style.display = "none";
                }
            }
        }
    };
    </script>
    
    </body>
    </html>

  7. #7
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers, that works great.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.


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
  •