SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reusable toggle function

    Hello there, I am trying to adapt a toggle function so that I can use it for more than one element on the page but I am having no joy.

    1) I have 2 divs "#people and #animals" each containing 3 absolutely positioned images

    HTML Code:
    			<div id="people">
                                        <img src="people/Miles.jpg" id="people1" alt="Miles"/>
                                        <img src="people/Jason.jpg" id="people2" alt="Jason"/>
                                        <img src="people/Rivera.jpg" id="people3" alt="Rivera"/>
                                    </div>
                                    <div id="animals">
                                        <img src="pets/chuck.jpg" id="anim1" alt="Chuck"/>
                                        <img src="pets/skip.jpg" id="anim2" alt="Skip"/>
                                        <img src="pets/ted.jpg" id="anim3" alt="Ted"/>
                                    </div>
    2) I then have two more divs elsewhere on the page which control the view of each person and animal

    HTML Code:
    		<div class="tools">
                                    <div id="viewpeople">
                                        <ul>
                                            <li><a href="#people1">Show Miles's picture</a></li>
                                            <li><a href="#people2">Show Jason's picture</a></li>
                                            <li><a href="#people3">Show Rivera's picture</a></li>
                                        </ul>
                                    </div>
                                    <div id="viewpeople">
                                        <ul>
                                            <li><a href="#anim1">Show Miles's pet</a></li>
                                            <li><a href="#anim2">Show Jason's pet</a></li>
                                            <li><a href="#anim3">Show Rivera's pet/a></li>
                                        </ul>
                                    </div>
                 </div>
    3) Finally I have the functions necessary to toggle both people and animals when the user mouses over the links in the tools div.


    Code JavaScript:
    function initShowHide() {
    hide();
    var itempreview = [ "viewpeople", "viewanimals" ];
    for (var mylinks in itempreview) {
    var as = document.getElementById(itempreview[mylinks]).getElementsByTagName('a')
    for (var i = 0; i < as.length; i++) {
    as[i].onmouseover = function() {
    show(this);
    return false;
    }
    }
    }
    }
     
    function show(s) {
    	hide();
    	var id = s.href.match(/#(\w.+)/)[1];
    	document.getElementById(id).style.display = 'block';
    }
     
    function hide() {
    	var people = document.getElementById('people').getElementByTagName('img');
    	var animal = document.getElementById('animals').getElementsByTagName('img');
        var toggle = people + animal;
    	for (var i = 0; i < toggleable.length; i++) {
    		toggleable[i].style.display = 'none';
    	}
    }
    window.onload = initShowHide;

    But none of it is working and this is very likely because I am not sure how to parse more than one ID into the code. How can this be achieved. I tried with GetElementByClassName but javascript does not have this function apparently.

    Could anyone help?

    Cheers

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm note sure, what would you like to do. If I will write it simmilar way, it will look like this:
    Code:
    <script type="text/javascript">
    <!--//--><![CDATA[//><!--
    function initShowHide() {
    hide();
    var divsId=['viewpeople','viewanimals'];
    for(var Idd in divsId) if(divsId.hasOwnProperty(Idd)){
    var lnk=document.getElementById(divsId[Idd]).getElementsByTagName('a');
    for(var i=0;i<lnk.length;i++){
    lnk[i].setAttribute('rel',lnk[i].href.substring(lnk[i].href.lastIndexOf('#')+1)); //lnk[i].href.match(/#(\w.+)/)[1]
    lnk[i].onmouseover=function(){
    hide();
    id=this.getAttribute('rel');
    document.getElementById(id).childNodes[0].style.display='block';
    return false;
    };
    }
    }
    }
    function hide(){
    var toggleId=['people1','people2','people3','anim1','anim2','anim3'];
    for(var Ids in toggleId) if(toggleId.hasOwnProperty(Ids)){
    var im=document.getElementById(toggleId[Ids]).getElementsByTagName('img');
    for(var i=0;i<im.length;i++){
    im[i].style.display='none';
    }
    }
    }
    window.onload=initShowHide;
    //--><!]]>
    </script>
    <div class="tools">
    <div id="viewpeople">
    <ul>
    <li><a href="#people1">Show Miles's picture</a></li>
    <li><a href="#people2">Show Jason's picture</a></li>
    <li><a href="#people3">Show Rivera's picture</a></li>
    </ul>
    </div>
    <div id="viewanimals">
    <ul>
    <li><a href="#anim1">Show Miles's pet</a></li>
    <li><a href="#anim2">Show Jason's pet</a></li>
    <li><a href="#anim3">Show Rivera's pet</a></li>
    </ul>
    </div>
    </div>
    <div id="people1"><img src="some.jpg" alt="img people1" width="200" height="100" /></div>
    <div id="people2"><img src="some.jpg" alt="img people2" width="200" height="100" /></div>
    <div id="people3"><img src="some.jpg" alt="img people3" width="200" height="100" /></div>
    <div id="anim1"><img src="some.jpg" alt="img anim1" width="200" height="100" /></div>
    <div id="anim2"><img src="some.jpg" alt="img anim2" width="200" height="100" /></div>
    <div id="anim3"><img src="some.jpg" alt="img anim3" width="200" height="100" /></div>


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
  •