Advanced Search

Results 1 to 7 of 7

Thread: Tab it like Yahoo.

  1. #1
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tab it like Yahoo.

    Hi all,

    I am using this tabbing script.
    http://www.dynamicdrive.com/dynamici...tabcontent.htm

    I want to create a tab menu that look like the http://www.yahoo.com , such that when the tab is selected and active, I could customise the active anchor tab color only, instead of changing the color of the tag together with the content with it.

    Currently, i could only manage to control the look of the content by editing the #SC1 in css. Is there any way to seperate the look of the active tab and the active content?


    Thank you very much.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Find this line in the script:

    Code:
    aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
    Change it to this:

    Code:
    aobject.style.backgroundColor=themecolor
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot for the fast respond!

    However, is it possible to assign a new className to the tab only where i could control the style of it, such as fonts and bg image.

    aobject.className=sClass

    Currently, I could only control the bg color of it which limits the visual I want to create.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    Perhaps but, I don't think so because the className attribute of the default aobject is in use by the script. However, all of the aobject's id's seem to be available to be put into play. This would leave you free to co-opt the theme attribute to use as a variable to hold the active id name of each individual aobject (in the code):

    Code:
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    collecttablinks()
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].id=''
    var themeId=aobject.getAttribute("theme")? aobject.getAttribute("theme") : ''
    aobject.id=themeId
    }
    Then in the markup, ex:

    Code:
    <li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="idNum1">What's New</a></li>
    This would allow you to define unique style settings for each aobject's active state, ex:

    Code:
    #idNum1 {
    define property/value pairs here
    }
    The default aobject style would continue to be defined by these rules:

    Code:
    #tablist li a{
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: white;
    }
    and any setting therein that wasn't changed by the unique active id's style definitions would be retained in the active state.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot!!!

    It really works well now

  6. #6
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi

    Can you please share the final code...I am having a hard time extracting the Yahoo code..

    Thanks in advance !

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,704
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    As far as I can tell, neither Yahoo nor Dynamic Drive are still using the type of tabs that they were when this thread was started last December. I looked over my archives and found this file dated from that time which uses the DD code from that period (we never take code from copyrighted sites like Yahoo, it was just mentioned as an example of how the OP wanted their menu to look). It may or may not be of use:

    Code:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    
    
    #tablist{
    padding: 3px 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0.1em;
    font: bold 12px Verdana;
    }
    
    #tablist li{
    list-style: none;
    display: inline;
    margin: 0;
    position:relative;
    }
    
    #tablist li a{
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: white;
    }
    
    #tablist li a:link, #tablist li a:visited{
    color: navy;
    }
    
    #tablist li a.current{
    background: lightyellow;
    }
    
    #tabcontentcontainer{
    width: 400px;
    /* Insert Optional Height definition here to give all the content a unified height */
    padding: 5px;
    border: 1px solid black;
    }
    
    .tabcontent{
    display:none;
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Tab Content script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Set tab to intially be selected when page loads:
    //[which tab (1=first tab), ID of tab content to display]:
    var initialtab=[1, "sc1"]
    
    ////////Stop editting////////////////
    
    function cascadedstyle(el, cssproperty, csspropertyNS){
    if (el.currentStyle)
    return el.currentStyle[cssproperty]
    else if (window.getComputedStyle){
    var elstyle=window.getComputedStyle(el, "")
    return elstyle.getPropertyValue(csspropertyNS)
    }
    }
    
    var previoustab=""
    
    function expandcontent(cid, aobject){
    if (document.getElementById){
    highlighttab(aobject)
    detectSourceindex(aobject)
    if (previoustab!="")
    document.getElementById(previoustab).style.display="none"
    document.getElementById(cid).style.display="block"
    previoustab=cid
    if (aobject.blur)
    aobject.blur()
    return false
    }
    else
    return true
    }
    
    function highlighttab(aobject){
    if (typeof tabobjlinks=="undefined")
    collecttablinks()
    for (i=0; i<tabobjlinks.length; i++)
    tabobjlinks[i].style.backgroundColor=initTabcolor
    for (i=0; i<tabobjlis.length; i++)
    tabobjlis[i].style.top=0
    var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
    aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
    aobject.parentNode.style.top='1px'
    }
    
    function collecttablinks(){
    var tabobj=document.getElementById("tablist")
    tabobjlinks=tabobj.getElementsByTagName("A")
    tabobjlis=tabobj.getElementsByTagName("li")
    }
    
    function detectSourceindex(aobject){
    for (i=0; i<tabobjlinks.length; i++){
    if (aobject==tabobjlinks[i]){
    tabsourceindex=i //source index of tab bar relative to other tabs
    break
    }
    }
    }
    
    function do_onload(){
    var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
    var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
    collecttablinks()
    initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
    initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
    if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
    var cookieparse=get_cookie(cookiename).split("|")
    var whichtab=cookieparse[0]
    var tabcontentid=cookieparse[1]
    expandcontent(tabcontentid, tabobjlinks[whichtab])
    }
    else
    expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
    }
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    
    
    </script>
    
    <script type="text/javascript">
    
    //Dynamicdrive.com persistence feature add-on
    
    var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
    var persisttype="local" //enter "sitewide" for Tab content order to persist across site, "local" for this page only
    
    function get_cookie(Name) { 
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { 
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function savetabstate(){
    var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
    var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab
    document.cookie=cookiename+"="+cookievalue
    }
    
    window.onunload=savetabstate
    
    </script>
    </head>
    <body>
    <ul id="tablist">
    <li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
    <li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
    <li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
    <li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
    </ul>
    
    <DIV id="tabcontentcontainer">
    
    <div id="sc1" class="tabcontent">
    Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
    </div>
    
    <div id="sc2" class="tabcontent">
    Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.
    </div>
    
    <div id="sc3" class="tabcontent">
    Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.
    </div>
    
    <div id="sc4" class="tabcontent">
    <form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
    <p>Search Dynamic Drive:<br />
    <input name="q" type="hidden" />
    <input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>
    </form>
    </div>
    
    
    </DIV>
    </body>
    </html>
    You may want to use the updated Dynamic Drive version instead:

    http://www.dynamicdrive.com/dynamici...tabcontent.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •