SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    U.S.
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem of using switch function

    Hi,
    I am using a switch function to toggle those links for display and unlink image will be hidden. But I have just duplicated the first block of javascript for the second tab, it didn't work. This is the first block of switch function, it works for first tab:
    Code:
    <script language="javascript">
    function switch1(div) {
    var option=['one','two','three','four'];
    for(var i=0; i<option.length; i++) {
    if (document.getElementById(option[i])) {
    obj=document.getElementById(option[i]);
    obj.style.display=(option[i]==div)? "block" : "none";
    }
    }
    }
    window.onload=function () {switch1('one');}
    </script>
    html code for this first javascripts:
    Code:
    <div id="one">
    	<div id="main-B"><img src="images/americaninventor.jpg" class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    
    	<div id="two">
    	<div id="main-B"><img src="images/dwts.jpg"  class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    
    	<div id="three">
    	<div id="main-B"><img src="images/exwives.jpg"  class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    	
    	<div id="four">
    	<div id="main-B"><img src="images/nextbest.jpg"  class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    			<div class="headfoot">
    				<div id="L-switches">
    				<div><img src="images/thum_american.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="switch1('one');" class="thumfloat">American Inventor</a></div>
    				<div><img src="images/thum_dwts.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="switch1('two');" class="thumfloat">Dancing with the Stars </a></div>
    				</div>
    				<div id="R-switches">
    				<div><img src="images/thum_ex.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="switch1('three');" class="thumfloat">Ex-Wives Club </a></div>
    				<div><img src="images/thum_next.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="switch1('four');" class="thumfloat">Next Best Things </a></div>
    				</div>
    			</div>
    The second duplicated javascript which isn't working:
    Code:
    <script language="javascript">
    function change(div) {
    var option=['one','two','three','four'];
    for(var i=0; i<option.length; i++) {
    if (document.getElementById(option[i])) {
    obj=document.getElementById(option[i]);
    obj.style.display=(option[i]==div)? "block" : "none";
    }
    }
    }
    window.onload=function () {change('one');}
    </script>
    and the second html code for the second javascript:
    Code:
    <div id="one">
    	<div id="main-B"><img src="images/americaninventor.jpg" class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    
    	<div id="two">
    	<div id="main-B"><img src="images/dwts.jpg"  class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    
    	<div id="three">
    	<div id="main-B"><img src="images/exwives.jpg"  class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    	
    	<div id="four">
    	<div id="main-B"><img src="images/nextbest.jpg"  class="kuang"></div>
    	<div id="main-A"><h2><a href="">Emotional Vatican greeting</a></h2>
    	<p>The parents of missing 4-year-old Madeleine McCann hold hands with Pope Benedict. >><a href="">Personal moment</a></p>
    	<p><a href="">Video of the meeting</a><a href="">Photos</a><br>
    	<a href="">Parents relentless</a> <a href="">More news</a></p>
    	</div>
    	</div>
    			<div class="headfoot">
    				<div id="L-switches">
    				<div><img src="images/thum_american.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="change('one');" class="thumfloat">American Inventor</a></div>
    				<div><img src="images/thum_dwts.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="change('two');" class="thumfloat">Dancing with the Stars </a></div>
    				</div>
    				<div id="R-switches">
    				<div><img src="images/thum_ex.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="change('three');" class="thumfloat">Ex-Wives Club </a></div>
    				<div><img src="images/thum_next.jpg" width="29" height="21" class="thum-kuang"><a href="javascript:void[0];" onclick="change('four');" class="thumfloat">Next Best Things </a></div>
    				</div>
    			</div>
    not sure why? Can anyone give me thread to fix this problem? Much appreciated.
    This is the full html page:
    http://rainbow777.com/tabcontent.shtml

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Validate your HTML. All IDs in a document must be unique.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    U.S.
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you please be more specific for which IDs that you referred? Thanks.

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by begeiste View Post
    Can you please be more specific for which IDs that you referred? Thanks.
    The document at the URL that you gave contains two divs with the id "one", at lines 553 & 602. There are other divs in that document also with none-unique IDs, which not only isn't allowed, but will cause errors when an attempt is made to address them.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    U.S.
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    The document at the URL that you gave contains two divs with the id "one", at lines 553 & 602. There are other divs in that document also with none-unique IDs, which not only isn't allowed, but will cause errors when an attempt is made to address them.
    Thanks a lot.


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
  •