SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    toggle text with onclick

    Hi, I am using prototype to add a "blind" up and down functionality when I click on a table element. Works Great!

    Now, i would like to toggle the [-] in the "altlink" span to match the state. Ie, if a person clicks on the table, the "formhide1" span will collapse, and the [-] should turn into a [+]. Visa versa, when the now collapsed "formhid1" span is expanded the [+] should turn into a [-]

    HTML Code:
    <table style="width:100%;cursor:pointer;" class="mainmenu5" cellspacing="0" cellpadding="4" onclick="new Effect.toggle($(\'formhide1\'),\'blind\')">
    <tr>
    <td style="font-size:9pt;">
    <img src="http://fashdax.com/images/spacer.gif" class="sqr" style="vertical-align:middle;" alt="" width="7" height="7" />
    <span style="vertical-align:middle;"><b><span style="font-size:11pt;">C</span>ITY OF THE MONTH :: '.$row_city_month->city_name.'</b></span>
    </td><td style="font-size:7pt;text-align:right;">
    <span class="altlink">[-]</span>
    </td>
    </tr>
    </table>

  2. #2
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd probably add an .innerHTML statement to replace the text in your existing functions. Give the span an ID and you could do:

    document.getElementById("some_id").innerHTML = '[+]';
    document.getElementById("some_id").innerHTML = '[-]';

  3. #3
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes sense. However, the question is how do I write a function to toggle between these?

  4. #4
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I was thinking you might be able to put it into the existing Javascript for the "blind" up/down feature. Could you post the related code?

  5. #5
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    I had a quick question.

    The 'innerHTML' statement. Does it replace all HTML withing the specified element with the specified string ? (as in your previous post above).

    I'm assuming that this will work with a <div> as well, rigth? As long as it also has an ID value.

    Thanks
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  6. #6
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes.. the innerHTML of any object will replace everything inside that object (all children elements)
    ie:
    <div id="div1">
    <div id="childDiv">Text</div>
    <p> Paragraph</p>
    </div>

    if you do document.getElementById('div1').innerHTML = '';
    you'll have:
    <div id="div1"></div>

  7. #7
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There won't be a problem changing the html to have a div id. The problem will be adding the javascript.

    The function that uses the blind up and down toggle is in a library called Prototype. I use it through out my site so adding the code to the library isn't a good option.

    I was thinking about calling a second function with the onClick event and that's where I got stuck.... Not sure how to make a function to toggle the innerhtml statements.

  8. #8
    Resistance is Futile webgodjj's Avatar
    Join Date
    Nov 2002
    Location
    Madison, WI USA
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I need something similar to this... however, this code doesn't work. Maybe someone knows how to make this work?

    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function switchWindowHandle(targetId) {
    	if (document.getElementById){
    		target = document.getElementById(targetId);
    		if (target.nodeValue == "[-]"){
    			target.innerHTML = '[+]';
    		} else {
    			target.innerHTML = '[-]';
    	}
    }
    
    //-->
    </script>
    </head>
    
    <body>
    
    
    <a href="#" onclick="switchWindowHandle(test_div)">clck</a>
    
    The changing text is: <div id='text_div'>[-]</div>
    </body>
    </html>

  9. #9
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Just a small typo there. Change it to :

    <a href="#" onclick="switchWindowHandle('text_div')">clck</a>
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software


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
  •