SitePoint Sponsor

User Tag List

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

    switching menu problem

    Hi,
    Can someone give a tip how to replace those buttons with text along with images like the featured section of frontpage of yahoo.com?
    I have drafted the js codes and css file along html copy. The switch function is working when I click on the buttons ,but not working when I click on the links along with small thums, not sure how to replace them to buttons function? Thanks alot.
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .visible {display:block;}
    .hidden {display:none;}
    #featurebox {
    width: 40%;
    }
    #featurebox div {text-align:left;}
    #two, #three, #four{display:none;}
    #switch1, #switch2 {
    width:100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    }
    #switch1 {float:left;}
    #switch2 {float:right;}
    .thum {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000000;
    border: 1px solid #666666;
    margin-top: 10px;
    }
    .kuang {
    padding: 2px;
    border: 1px solid #999999;
    }
    .feature .bd span,.ft span{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    display:none;
    text-align: left;
    margin-left: 10px;
    }
    .bd .current,.ft .current,.current span{
    display:block;}
    .more, .bullet, .audio, .video, .slideshow, .search, .feature li, .minimantle li, #minimantle li, #localnewsct #newstop li, a#editpage, a#editpage.on,#vsearchtabs dl dt a,#sboxfooter a.yans{
      background-image:url(images/icons_1.3.gif);
      background-repeat:no-repeat;
    }
    .btn-more-2, .hd li.on em, div.hd li.sparkle a, .hd, #mastheadbd .top, #mastheadbd, #doors li a, #today .ft li.on a{
      background-image:url(images/icons_1.3.gif);
      background-repeat:repeat-x;
    }
    #today .ft li.on{
      border:1px solid #afbec5;
      border-color:#afbec5 #afbdc5 #afbdc5 #b0bfc6;
    }
    #today .ft li.on a{
      color:#666;
      background-color:#fcfcfc;
      background-position:0 -296px;
    }
    #footer .strong{
    font-weight:bold;
    }
    #footer ul{
    margin-bottom:3px;
    }
    #footer li{
    display:inline;
    padding:0 0 0 5px;
    margin: 0 0 0 2px;
    border-left-width:1px;
    border-left-style:solid;
    }
    #footer li.first{
    border:0;
    padding-left:0;
    margin-left:0;
    }
    .bd .current,.ft .current,.current span{display:block;}
    #today .bd ul.inline{
    margin-left:-10px;
    }
    #today .bd ul.inline li{
    display:inline;
    float:none;
    margin:-2px 0 -2px 4px;
    padding-left:5px;
    border-left:1px solid #B0BEC7;
    }
    #today .bd ol li a{
    display:block;
    *display:inline;
    zoom:1;
    }
    #today .ft{
    position:relative;
    padding:0 5px 22px;
    _padding:0 5px 23px;
    background:#fff;
    }
    #today .ft ul{
    float:left;
    *float:none;
    padding:2px 0 0;
    width:100%;
    }
    #today .ft li{
    position:relative;
    float:left;
    width:46%;
    margin-right:2%;
    min-height:30px;
    _height:30px;
    border:1px solid #fff;
    }
    #today .ft li img{
    float:left;
    margin:0 5px 0 2px;
    padding:1px;
    border:1px solid #9eb1c0;
    border-color:#9eb1c0 #677787 #677787 #9eb1c0;
    }
    #today .ft li a{
    display:block;
    padding:2px 0;
    margin:1px;
    min-height:22px;
    _height:22px;
    font:normal 77% verdana;
    }
    #today .ft li a .editor{
    position:absolute;
    left:0;
    }
    #footer .strong{
    font-weight:bold;
    }
    #footer ul{
    margin-bottom:3px;
    }
    #footer li{
    display:inline;
    padding:0 0 0 5px;
    margin: 0 0 0 2px;
    border-left-width:1px;
    border-left-style:solid;
    }
    #footer li.first{
    border:0;
    padding-left:0;
    margin-left:0;
    }
    -->
    </style>
    <script language="javascript" type="text/javascript">
    function switch1(div)
    {
    if (document.getElementById('one'))
    {
    var option=['one','two','three','four'];
    for(var i=0; i<option.length; i++)
    { obj=document.getElementById(option[i]);
    obj.style.display=(option[i]==div)? "block" : "none"; }
    }
    }
    //
    window.onload=function(){switch1('one');}
    </script>
    </head>
    
    <body>
    <h1>Testing the scripts</h1>
    
    <div id="featurebox">
    <div id="switch1">
    <div id="one"><img src="images/light.gif" class="kuang" align="left" hspace="20"><div class="feature"><span>
    <h3><a class=video href=s/496115>Fantasy in the sand</a></h3>
    <p>Sit back, relax, and watch as an artist sketches a soothing story using just sand and her hands.&nbsp;&nbsp;<a  href="">»Video</a></p>
    <ul>
    <li><a class=search href="">The artist</a></li>
    <li><a class=bullet href="">More sand art</a></li>
    <li><a class=bullet href="">Be discovered: Upload your video</a></li>
    </ul>
    </span></div></div>
    <div id="two"><img src="images/football.jpg" class="kuang" align="left" hspace="20"><div class="feature"><span>
    <h3><a class=video href="">Left behind legends</a></h3>
    <p>With the Super Bowl dominating the headlines, many retired NFL legends struggle to survive.&nbsp;&nbsp;<a  href="">»Video</a></p>
    <ul>
    <li><a class=search href="">An insider's take on the big game</a></li>
    <li><a class=bullet href="">Picks</a></li>
    <li><a class=bullet href="">NFL</a></li>
    </ul>
    </span></div></div>
    <div id="three"><img src="images/artist.gif" class="kuang" align="left" hspace="20"><div class="feature"><span>
    <h3><a class=video href="">Fantasy in the sand</a></h3>
    <p>Sit back, relax, and watch as an artist sketches a soothing story using just sand and her hands.&nbsp;&nbsp;<a  href="">»Video</a></p>
    <ul>
    <li><a class=search href="">Buy Valentine's Day gifts</a></li>
    <li><a class=bullet href="">The Secret language of men</a></li>
    <li><a class=bullet href="">Be discovered: Upload your video</a></li>
    </ul>
    </span></div></div>
    <div id="four"><img src="images/valentine.jpg" class="kuang" align="left" hspace="20"><div class="feature"><span>
    <h3><a class=video href="">Four ways to ruin Valentine's</a></h3>
    <p>Predictable gifts are a big turnoff. Follow these tips to avoid a Valentine's Day disaster.&nbsp;&nbsp;<a  href="">»Video</a></p>
    <ul>
    <li><a class=search href="">The artist</a></li>
    <li><a class=bullet href="">More sand art</a></li>
    <li><a class=bullet href="">Be discovered: Upload your video</a></li>
    </ul>
    </span></div></div>
    
    <!-- <h4>Toggle the button below to read the current news</h4> -->
    
    <div id="thum">
    <input type="button" value="one" onclick="switch1('one')" />
    <input type="button" value="two" onclick="switch1('two')" />
    <input type="button" value="three" onclick="switch1('three')" />
    <input type="button" value="four" onclick="switch1('four')" />
    </div>
    <div id="todayft" class="ft">
    <span id="footer1" class="current">
    <ul id="todaystories1">
    <li id="featured1|126" class="on" onclick="switch1('one')"><img src="images/artist.gif" alt="" width="29" height="21" border="0" class="kuang"><a href="">Watch an artist sketch a sand fantasy</a></li>
    <li id="featured2|99" onclick="switch1('two')"><img src="images/call.gif" alt="" width="29" height="21"  border="0" class="kuang"><a href="">Find out the top careers for 2007</a></li>
    </ul>
    <ul>
    <li id="featured3|114" onclick="switch1('three')"><img src="images/man.gif" alt="" width="29" height="21"  border="0" class="kuang"><a href="">Ditka compares Super Bowl Bears, old and new</a></li>
    <li id="featured4|111" onclick="switch1('four')"><img src="images/light.gif" alt="" width="29" height="21"  border="0" class="kuang"><a href="">Could one state ban standard light bulbs?</a></li>
    </ul>
    <div id="more-featured" class="btn-more"><b>»
    <a href=r/tm>More Featured</a></b></div>
    </span>
    <span id="footer2">
    </span>
    <span id="footer3">
    </span>
    <span id="footer4">
    </span>
    </div>
    <!-- the thum list --->
    
    </div>
    </div>
    </body>
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm busy with a client right now, but just so you know, <span> cannot contain block level elements like lists, paragraphs and DIVs. Only inline elements, like A, STRONG, EM, and the like.

    Please go to http://validator.w3.org/ and validate your HTML before making any other changes .

  3. #3
    SitePoint Addict
    Join Date
    Jun 2004
    Location
    U.S.
    Posts
    258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I'm busy with a client right now, but just so you know, <span> cannot contain block level elements like lists, paragraphs and DIVs. Only inline elements, like A, STRONG, EM, and the like.

    Please go to http://validator.w3.org/ and validate your HTML before making any other changes .
    Thanks my friend.


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
  •