Help - Search - Members - Calendar
Full Version: Javascript Chrome Menu from dynamic drive
MyFantasyLeague.com Support > MyFantasyLeague Community Forums > Coding and Scripting Chat
Pages: 1, 2
quickolas1
Jul 21 2009, 07:49 PM
You can see the dropdown by clicking on my '09 website or going to:
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

This is all-encompassing so you don't have to download or host the .js files. There are different variations on the chrome menu, but if you want the blue/red/green (or your own color), it'll be do-it-yourself. This color scheme was by done smithktff who was the mastermind behind implementing this to look like cbs commissioner for converts (he should get all the credit).

If you want to use this, you'll be best served by saving the two gif's used on your own webspace and changing the links:
the down arrow & chromemenubg

And then of course you'll need to edit all the links to match it up to your own page

Home Page Message:
CODE
<script language="JavaScript" type="text/javascript">

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="http://i668.photobucket.com/albums/vv45/quickolas1/downarrow.gif" border="0"/>', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
    return totaloffset;
},

css:function(el, targetclass, action){
    var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    if (action=="check")
        return needle.test(el.className)
    else if (action=="remove")
        el.className=el.className.replace(needle, "")
    else if (action=="add" && !needle.test(el.className))
        el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
    if (this.enablereveal[0]){
        if (!dropmenu._trueheight || dropmenu._trueheight<10)
            dropmenu._trueheight=dropmenu.offsetHeight
        clearTimeout(this.revealtimers[dropmenu.id])
        dropmenu.style.height=dropmenu._curheight=0
        dropmenu.style.overflow="hidden"
        dropmenu.style.visibility="visible"
        this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
    }
    else{
        dropmenu.style.visibility="visible"
    }
    this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
    var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
    if (curH<maxH){
        var newH=Math.min(curH, maxH)
        dropmenu.style.height=newH+"px"
        dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
    }
    else{ //if done revealing menu
        dropmenu.style.height="auto"
        dropmenu.style.overflow="hidden"
        clearInterval(this.revealtimers[dropmenu.id])
    }
},

clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
        var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
        var dropmenuW=this.dropmenuobj.offsetWidth
        if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
            edgeoffset=dropmenuW-obj.offsetWidth
    }
    else{
        var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
        var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
        var dropmenuH=this.dropmenuobj._trueheight
        if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
            edgeoffset=dropmenuH+obj.offsetHeight
            if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
                edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
        }
    }
    return edgeoffset
},

dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
        this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
    if (this.iframeshimadded){
        if (this.dropmenuobj.style.visibility=="visible"){
            this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
            this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
            this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
            this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
            this.shimobject.style.display="block"
        }
    }
},

hideshim:function(){
    if (this.iframeshimadded)
        this.shimobject.style.display='none'
},

isContained:function(m, e){
    var e=window.event || e
    var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    if (c==m)
        return true
    else
        return false
},

dynamichide:function(m, e){
    if (!this.isContained(m, e)){
        this.delayhidemenu()
    }
},

delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
    this.css(this.asscmenuitem, "selected", "remove")
    this.dropmenuobj.style.visibility='hidden'
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
    this.hideshim()
},

clearhidemenu:function(){
    if (this.delayhide!="undefined")
        clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false);
    else if (target.attachEvent)
        target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
    if (!this.domsupport)
        return
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    for (var ids=0; ids<arguments.length; ids++){
        var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
        for (var i=0; i<menuitems.length; i++){
            if (menuitems[i].getAttribute("rel")){
                var relvalue=menuitems[i].getAttribute("rel")
                var asscdropdownmenu=document.getElementById(relvalue)
                this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
                this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
                this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
                try{
                    menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
                }catch(e){}
                this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
                    if (!cssdropdown.isContained(this, e)){
                        var evtobj=window.event || e
                        cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                    }
                }, "mouseover")
                this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
                this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
            }
        } //end inner for
    } //end outer for
    if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
        document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
        this.shimobject=document.getElementById("iframeshim") //reference iframe object
        this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
        this.iframeshimadded=true
    }
} //end startchrome

}
</script>

<script type="text/javascript">

function ddtabcontent(tabinterfaceid){
    this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
    this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
    this.enabletabpersistence=true
    this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
    this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
    this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
    this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
    this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
        return document.cookie.match(re)[0].split("=")[1] //return its value
    return ""
}

ddtabcontent.setCookie=function(name, value){
    document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

    expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
        this.cancelautorun() //stop auto cycling of tabs (if running)
        var tabref=""
        try{
            if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
                tabref=document.getElementById(tabid_or_position)
            else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
                tabref=this.tabs[tabid_or_position]
        }
        catch(err){alert("Invalid Tab ID or position entered!")}
        if (tabref!="") //if a valid tab is found based on function parameter
            this.expandtab(tabref) //expand this tab
    },

    cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
        if (dir=="next"){
            var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
        }
        else if (dir=="prev"){
            var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
        }
        if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
            this.cancelautorun() //stop auto cycling of tabs (if running)
        this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
    },

    setpersist:function(bool){ //PUBLIC function to toggle persistence feature
            this.enabletabpersistence=bool
    },

    setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
        this.selectedClassTarget=objstr || "link"
    },

    getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
        return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
    },

    urlparamselect:function(tabinterfaceid){
        var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
        return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
    },

    expandtab:function(tabref){
        var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
        //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
        var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
        this.expandsubcontent(subcontentid)
        this.expandrevcontent(associatedrevids)
        for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
            this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
        }
        if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
            ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
        this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
    },

    expandsubcontent:function(subcontentid){
        for (var i=0; i<this.subcontentids.length; i++){
            var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
            subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
        }
    },

    expandrevcontent:function(associatedrevids){
        var allrevids=this.revcontentids
        for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
            //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
            document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
        }
    },

    setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
        for (var i=0; i<this.hottabspositions.length; i++){
            if (tabposition==this.hottabspositions[i]){
                this.currentTabIndex=i
                break
            }
        }
    },

    autorun:function(){ //function to auto cycle through and select tabs based on a set interval
        this.cycleit('next', true)
    },

    cancelautorun:function(){
        if (typeof this.autoruntimer!="undefined")
            clearInterval(this.autoruntimer)
    },

    init:function(automodeperiod){
        var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
        var selectedtab=-1 //Currently selected tab index (-1 meaning none)
        var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
        this.automodeperiod=automodeperiod || 0
        for (var i=0; i<this.tabs.length; i++){
            this.tabs[i].tabposition=i //remember position of tab relative to its peers
            if (this.tabs[i].getAttribute("rel")){
                var tabinstance=this
                this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
                this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
                this.tabs[i].onclick=function(){
                    tabinstance.expandtab(this)
                    tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
                    return false
                }
                if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
                    this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
                }
                if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
                    selectedtab=i //Selected tab index, if found
                }
            }
        } //END for loop
        if (selectedtab!=-1) //if a valid default selected tab index is found
            this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
        else //if no valid default selected index found
            this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
        if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
            this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
        }
    } //END int() function

} //END Prototype assignment

/***********************************************
* Tab Content script v2.2- &copy; 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
***********************************************/
</script>

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www25.myfantasyleague.com/2009/home/69833" rel="dropmenu1">League Home</a></li>
<li><a href="http://www25.myfantasyleague.com/2009/live_scoring?L=69833" rel="dropmenu2">Live Scoring</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/standings?L=69833" rel="dropmenu3">Standings</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=07" rel="dropmenu4">My Team</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=08" rel="dropmenu5">Stats</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/news_articles?L=69833" rel="dropmenu6">Players</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=22" rel="dropmenu7">Schedule</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=120" rel="dropmenu8">Contests</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=50" rel="dropmenu9">Options</a></li>
<li><a href="http://football25.myfantasyleague.com/2009/support?L=69833" rel="dropmenu10">Help</a></li>
</ul>
</div>

<div id="dropmenu1" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=26">Rules</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=01">Teams & Owners</a>
<a href="http://football25.myfantasyleague.com/2009/accounting_report?L=69833&TYPE=GRID">Finances</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=17">Draft Results</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=29">Message Board</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=123">Calendar</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=09">Scoring</a>
</div>


<div id="dropmenu2" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=169">Preview</a>
<a href="http://football25.myfantasyleague.com/2009/live_scoring?L=69833">GameCenter</a>
<a href="http://football25.myfantasyleague.com/2009/pro_schedule?L=69833">NFL Games</a>
</div>

<div id="dropmenu3" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/standings?L=69833">Overall</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=20">Bar Chart</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=31">Breakdown</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=101">Power Rank</a>
</div>

<div id="dropmenu4" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=02">Set Lineup</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=178">My Watch List</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=46">Add/Drop</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=05">Trade</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=133">On The Block</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=03">Transaction Report</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=118">Service Report</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=105">Roster Grid</a>
</div>

<div id="dropmenu5" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=08">Stats</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=117">Roster Trends</a>
</div>

<div id="dropmenu6" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/news_articles?L=69833">Player News</a>
<a href="http://football25.myfantasyleague.com/2009/options?O=08&CATEGORY=freeagent&L=69833">Free Agents</a>
<a href="http://football25.myfantasyleague.com/2009/player_search?L=69833">Player Search</a>
<a href="http://football25.myfantasyleague.com/2009/injury?L=69833">Injury Report</a>
</div>

<div id="dropmenu7" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=15">Full Schedule</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=16">Team Schedule</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=54">Schedule Grid</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=79">Playoff Schedule</a>
</div>

<div id="dropmenu8" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=120">Survivor</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=121">NFL Pick'em</a>
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=179">CFL Pick'em</a>
</div>

<div id="dropmenu9" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/options?L=69833&O=50">Personal</a>
<a href="http://football25.myfantasyleague.com/2009/menu_page?L=69833&NAME=REPORTS_WIRELESS">Fantasy Alerts</a>
<a href="http://football25.myfantasyleague.com/2009/menu_page?L=69833&NAME=COMMUNICATIONS">Communications</a>
</div>

<div id="dropmenu10" class="dropmenudiv">
<a href="http://football25.myfantasyleague.com/2009/support?L=69833">Help Center</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>


Into your CSS file:
CODE
.chromestyle ul{
border-color: #BBB;
background: url(http://i668.photobucket.com/albums/vv45/quickolas1/chromemenubg.gif) center center repeat-x;}

.chromestyle ul li a{
color: #494949;
border-right-color:#DADADA;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(http://i668.photobucket.com/albums/vv45/quickolas1/chromemenubg.gif) center center repeat-x;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
border-color: #BBB;
background-color: white;
}


.dropmenudiv a{
border-bottom-color: #BBB;
color: black;
}

.dropmenudiv a:hover{
background-color: #F0F0F0;
}

#chromemenu {height: 35px;}

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
width: 100%;
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
border-width: 1px;
border-style: solid;
}

.chromestyle ul li{
display: inline;
margin-left: 0;
}

.chromestyle ul li a{
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
width: 200px;
visibility: hidden;
border-width: 1px;
border-style: solid;
border-bottom-width: 0;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;}
bneuman
Jul 21 2009, 08:19 PM
QUOTE
The parts in BOLD will be the things you'll want to change yourself, mainly the contents of your menu bar (or you'll be linking to my league's website). Please also do not share the band of my images....you can go to my photobucket by copying & pasting the links to the two images needed and download so you can host them yourself (because if I mess with my site....yours will change....and I plan to implement a new color scheme). You'll also need to adjust the colors in the CSS code if you go with a different color scheme.


This is great! I'll check this out in the morning. Thanks... smile.gif
bneuman
Jul 22 2009, 04:49 AM
I changed all parts in red to my information. Created a HPM and added it to my main page. Copied css code and added it my css code. Made changes to point to my hosted image files. Saved and uploaded it to my site. I've done this with both sites. (main and test site)

On both sites I get the menu but when you mouse over the menu no drop downs. Also no small down arrow on either.

I expected it be screwed up on my main site because of 3rd party customization but not on a bare bones test site. Test site = http://www25.myfantasyleague.com/2009/home/59352

I also Controlled F5 and have Use Advanced Editor turned off. Does this ring a bell? Any place or thing to look at?



quickolas1
Jul 22 2009, 11:57 AM
i'll see what i can find tonight
bneuman
Jul 22 2009, 01:36 PM
QUOTE (quickolas1 @ Jul 22 2009, 01:57 PM) *
i'll see what i can find tonight

Ok thanks smile.gif
quickolas1
Jul 22 2009, 04:23 PM
re-posted the code above with Code Tags instead of Quote Tags

looks like you got it to work on your site...
:thumbs up:

if anyone else wants to use this, you'll be best served by saving the two gif's used and input your own links
(the down arrow & chromemenubg)

and then of course you'll need to edit all the links to match it up to your own page
bneuman
Jul 22 2009, 05:17 PM
.
bneuman
Jul 23 2009, 08:01 PM
I got it installed and working with one one issue....



I've searched messed with every setting I could in the css file to adjust the drop down. I can't seem to find the setting or settings to adjust. Can anyone help me out?

It works fine on my test site. I'm assuming its something to do with the 3rd party template I'm running.
quickolas1
Jul 23 2009, 08:30 PM
your page works fine on my computer with firefox and explorer....that dropdown appears directly below "My Team"
bneuman
Jul 23 2009, 08:34 PM
It doesn't work on 3 different computers at work. Two running just IE and one running both IE and FF. Here at home, two desktops and one laptop also have it off. I don't get it? Is it a resolution issue?
quickolas1
Jul 23 2009, 09:38 PM
tenaciousg
Jul 23 2009, 11:03 PM
Just to chime in, you're not going crazy bneuman.

I'm getting the same "off to the right" display that you're showing above. Running Windows XP, Firefox 3.5.1, Rez is 1280x800.

I can't help you -- but can confirm that I see the problem as well.
bneuman
Jul 24 2009, 07:33 AM
I checked the css code as much as I could. Nothing I did worked. I figured it must be in the code for the template. I changed this:

CODE
.pagebody {
width : 1024px;


to

CODE
.pagebody {
width : auto;



So far it seems to work on everything I've checked. I just have a minor issue with the banner and footer graphic. I'll get those fixed today.

If you happen to check out my website please let me know if the drop down is lined up. If not please state your monitor resolution.

thanks,

Bill
PainGain
Jul 24 2009, 11:06 AM
Bneuman,

FYI. Ive been following this thread the past few days and noticed your dropdowns were also not aligned on my computer yesterday. Looks like your fix worked; it looks good.



QUOTE (bneuman @ Jul 24 2009, 07:33 AM) *
I checked the css code as much as I could. Nothing I did worked. I figured it must be in the code for the template. I changed this:

CODE
.pagebody {
width : 1024px;


to

CODE
.pagebody {
width : auto;



So far it seems to work on everything I've checked. I just have a minor issue with the banner and footer graphic. I'll get those fixed today.

If you happen to check out my website please let me know if the drop down is lined up. If not please state your monitor resolution.

thanks,

Bill

tenaciousg
Jul 24 2009, 11:10 AM
Working for me now as well. Looks like you got it.
bneuman
Jul 24 2009, 01:25 PM
So far I've heard back from 4 other league members and it's working for them too. I love it when a plan comes together!

I want to thank quickolas1 for making the code available for all and smithktff for his help with quickolas1 on getting it all working...

Bill
smithktff
Jul 24 2009, 01:44 PM
QUOTE (bneuman @ Jul 24 2009, 03:25 PM) *
So far I've heard back from 4 other league members and it's working for them too. I love it when a plan comes together!

I want to thank quickolas1 for making the code available for all and smithktff for his help with quickolas1 on getting it all working...

Bill


Don't thank me. I had never completed evaluating the script for cross browser compatibility. quickolas1 picked up the ball and ran with it. He deserves the thanks for getting it as far as it has.

bneuman
Jul 24 2009, 03:09 PM
QUOTE (smithktff @ Jul 24 2009, 02:44 PM) *
Don't thank me. I had never completed evaluating the script for cross browser compatibility. quickolas1 picked up the ball and ran with it. He deserves the thanks for getting it as far as it has.


Once again thank you quickolas1.

To take this a step further....is it possible to be able to put say Habman's Stat's App on a Home Page Message and then be able to run it from the drop down menu?

Like options or modules, as an example

<a href="http://football25.myfantasyleague.com/2009/options?L=60689&O=02">Set Lineup</a>
Buddy Ball 2K3
Jul 25 2009, 05:26 AM
Thank you for this menu! Once again this community comes through with some great help for those who are clueless.
quickolas1
Jul 25 2009, 05:13 PM
QUOTE (Buddy Ball 2K3 @ Jul 25 2009, 06:26 AM) *
Thank you for this menu! Once again this community comes through with some great help for those who are clueless.


try replacing the corresponding lines of code for your league with the code below (obviously save your work to date first in case you don't like...or try it with the ccs editor in mozilla first). it matches up your league colors.

CODE
.chromestyle ul{
border-color: #000000;
background: url(http://i668.photobucket.com/albums/vv45/quickolas1/center_caption.gif) center center repeat-x;
}

.chromestyle ul li a{
color: #fff;
border-right-color:#000000;}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(http://i668.photobucket.com/albums/vv45/quickolas1/center_caption.gif) center center repeat-x;}

.dropmenudiv{
border-color: #000000;
background-color: #000000}


.dropmenudiv a{
border-bottom-color: #000;
color: #fff;
background-color: #000}

.dropmenudiv a:hover{
background: url(http://i668.photobucket.com/albums/vv45/quickolas1/center_caption.gif) center center repeat-x;}


then save that image (its your caption header image) under your photobucket and change the links above
quickolas1
Jul 25 2009, 06:09 PM
QUOTE (Buddy Ball 2K3 @ Jul 25 2009, 06:26 AM) *
Thank you for this menu! Once again this community comes through with some great help for those who are clueless.


sidenote...

you've got an extra } in your css after the line:
#live_scoring_summary .report {color: #666;}
its right before the .chrome codes

which is messing with things. delete the }
quickolas1
Jul 25 2009, 06:22 PM
QUOTE (bneuman @ Jul 24 2009, 05:09 PM) *
QUOTE (smithktff @ Jul 24 2009, 02:44 PM) *
Don't thank me. I had never completed evaluating the script for cross browser compatibility. quickolas1 picked up the ball and ran with it. He deserves the thanks for getting it as far as it has.


Once again thank you quickolas1.



here's the same thing with yours, although you've already edited the borders/colors a bit and i kind of like it how it is:

CODE
.chromestyle ul{
border-color: #000000;
background: url(http://nitrografixx.com/graphics/Armchair_Football_Fanatics_2009/caption.jpg) center center repeat-x;
}

.chromestyle ul li a{
color: #fff;
border-right-color:#000000;}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(http://nitrografixx.com/graphics/Armchair_Football_Fanatics_2009/caption.jpg) center center repeat-x;}

.dropmenudiv{
border-color: #000000;
background-color: #000000}


.dropmenudiv a{
border-bottom-color: #000000;
color: #fff;}

.dropmenudiv a:hover{
background: url(http://nitrografixx.com/graphics/Armchair_Football_Fanatics_2009/caption.jpg) center center repeat-x;}


your image is already saved on nitro so no issue there
bneuman
Jul 25 2009, 08:53 PM
QUOTE (quickolas1 @ Jul 25 2009, 07:22 PM) *
QUOTE (bneuman @ Jul 24 2009, 05:09 PM) *
QUOTE (smithktff @ Jul 24 2009, 02:44 PM) *
Don't thank me. I had never completed evaluating the script for cross browser compatibility. quickolas1 picked up the ball and ran with it. He deserves the thanks for getting it as far as it has.


Once again thank you quickolas1.



here's the same thing with yours, although you've already edited the borders/colors a bit and i kind of like it how it is:

CODE
.chromestyle ul{
border-color: #000000;
background: url(http://nitrografixx.com/graphics/Armchair_Football_Fanatics_2009/caption.jpg) center center repeat-x;
}

.chromestyle ul li a{
color: #fff;
border-right-color:#000000;}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(http://nitrografixx.com/graphics/Armchair_Football_Fanatics_2009/caption.jpg) center center repeat-x;}

.dropmenudiv{
border-color: #000000;
background-color: #000000}


.dropmenudiv a{
border-bottom-color: #000000;
color: #fff;}

.dropmenudiv a:hover{
background: url(http://nitrografixx.com/graphics/Armchair_Football_Fanatics_2009/caption.jpg) center center repeat-x;}


your image is already saved on nitro so no issue there


WOW! I love it!! Thank You.... biggrin.gif biggrin.gif
Buddy Ball 2K3
Jul 25 2009, 09:00 PM
QUOTE (quickolas1 @ Jul 25 2009, 07:09 PM) *
QUOTE (Buddy Ball 2K3 @ Jul 25 2009, 06:26 AM) *
Thank you for this menu! Once again this community comes through with some great help for those who are clueless.


sidenote...

you've got an extra } in your css after the line:
#live_scoring_summary .report {color: #666;}
its right before the .chrome codes

which is messing with things. delete the }


Everything worked great! Once again thanks go out to someone helping out on this board.
smackthefirst
Jul 26 2009, 02:57 PM
I'm hoping someone can help me out as I'm very new with CSS but I've taught myself a lot over the past 48 hours. I have a site template from Nitrografixx and I know I can go to them for help, but I also don't want to bother them with changes here and there that I may not go with. Plus the more I can teach myself, the less reliant I will be on them. So TOS, if you see this, shoot me a PM if you have an idea.

So right now I have a duplicate league up, http://www4.myfantasyleague.com/2009/home/28207 and I've added in the menus. I'm not sure if I added them to the CSS correctly as other menus are still present, but I'm dealing with one problem at a time. Right now the problem at hand is that the drop down menus are shifted off to the side as they were in another post earlier. I can change the page body from 1024px to auto but that throws off everything else on the site. So I'm hoping that there is a way to correct the drop down placement without changing the page body to auto which would mean reworking a lot on the site.

So has anyone else dealt with this issue and figured out a code correction? Thanks.
quickolas1
Jul 26 2009, 03:20 PM
QUOTE (smackthefirst @ Jul 26 2009, 04:57 PM) *
So has anyone else dealt with this issue and figured out a code correction? Thanks.


first issue: you still need to put the chrome code into your css

potential next issue is what bneuman did: in the css, try changing the .pagebody width to auto
i noticed on my laptop, nitro's templates each have a scroll bar at the bottom (IE or FF) meaning i have to scroll to the right to see the entire page. not sure if its just my resolution. i'd wager it best matches the images to have 1024.
bneuman
Jul 26 2009, 05:11 PM
To get rid of the other menu find this code:
CODE
#mainnavlist {
height:12px;
margin-left: auto;
margin-right: auto;
z-index: 1;
background: #b1b1b1;
padding: 0px 0px 12px 0px;
margin-top: -2px;
margin-bottom: 0px;
display: none;
}


add the line in red and save code.

To get of the tabbed menu find this code and also add the code in red to it.

CODE
#homepagetabs {
float:left;
left:49%;
position:relative;
text-align:left;
margin-top: 8px;
padding-bottom:4px;
height: 15px;
border: none;
display:none;
}


I don't have a fix for the off set drop down menu's other than what I've done changing from .pagebody width from 1024px to auto.
smackthefirst
Jul 26 2009, 05:38 PM
QUOTE (quickolas1 @ Jul 26 2009, 05:20 PM) *
QUOTE (smackthefirst @ Jul 26 2009, 04:57 PM) *
So has anyone else dealt with this issue and figured out a code correction? Thanks.


first issue: you still need to put the chrome code into your css

potential next issue is what bneuman did: in the css, try changing the .pagebody width to auto
i noticed on my laptop, nitro's templates each have a scroll bar at the bottom (IE or FF) meaning i have to scroll to the right to see the entire page. not sure if its just my resolution. i'd wager it best matches the images to have 1024.


First Issue - Fixed. I had taken it off just playing around because I didn't know if I implemented the CSS code correctly. To be honest, I still don't know if it's right as it doesn't seem to cause anything to change. When using CSS editor in Firefox, I can see the changes under the third tab but I'm not 100% sure that is what I'm supposed to be changing.

Second Issue - While I know that I can update the page body to auto as opposed to 1024px, I don't want to go that route as it throws off the rest of the page. If there's another fix, that's the route I'll go. If not, then I'll work on a different menu option as I don't want to lose the overall layout I have now.
smackthefirst
Jul 26 2009, 07:51 PM
Original post below. I had thought this change worked and was functional, but it is monitor size specific meaning it doesn't work on everyone's computer. Back to the drawing board. But I kept the original post in the even that it sparks some else to come up with a fix.

Well good news and bad news. The good news is that I got them to shift to the right with the page body being set at 1024px and not auto. I had to change var edgeoffset to 330 from 0. Of course, that correction threw me another problem. Now I have the issue of the dropdowns being located somewhere at the top of the screen. I can only see the bottoms of the longer drop downs. Whats odd is I can't figure out why changing the edgeoffset would cause this to occur but it did so now I'm working on figuring this out.
smackthefirst
Aug 1 2009, 02:00 PM
Ok I've figured out a way to fix this (to a point) and wanted to pass it on to everyone else. This is the way to get the menus lined up while not having the page body set to auto. To do this search for the following in the CSS - 'windowedge-this.dropmenuobj.x'

Once you find it, the section that includes it should be changed to this:

CODE
if (windowedge-this.dropmenuobj.x > dropmenuW)  //move menu to the left?
            edgeoffset=dropmenuW-obj.offsetWidth+225


What you need to change is the '<' sign to a '>' sign and then play with the +225 to get it lined up how you like it.

This is the best work around I've been able to find thus far.
Andypro
Aug 10 2009, 03:56 AM
OK, I'm trying this out on my duplicate league, and I've come across one problem, hoping someone here can help:

When you hover over the main menu items, the list pops up, but it's blank. But, when you hover over the list, then you can see them items. I've looked at Quickolas' site and it shouldn't be like that.

What am I doing wrong?

The site is:

Super League Duplicate
smithktff
Aug 10 2009, 01:17 PM
QUOTE (Andypro @ Aug 10 2009, 04:56 AM) *
OK, I'm trying this out on my duplicate league, and I've come across one problem, hoping someone here can help:

When you hover over the main menu items, the list pops up, but it's blank. But, when you hover over the list, then you can see them items. I've looked at Quickolas' site and it shouldn't be like that.

What am I doing wrong?

The site is:

Super League Duplicate


The background color of the div and the text color for the links are the same. The text is there, you just can't see it.
Change this:
CODE
.dropmenudiv a {border-bottom-color: #BBB; color: #494949;}


to this:
CODE
.dropmenudiv a:link {border-bottom-color: #BBB; color: #494949;}

Andypro
Aug 10 2009, 03:10 PM
QUOTE (smithktff @ Aug 10 2009, 02:17 PM) *
QUOTE (Andypro @ Aug 10 2009, 04:56 AM) *
OK, I'm trying this out on my duplicate league, and I've come across one problem, hoping someone here can help:

When you hover over the main menu items, the list pops up, but it's blank. But, when you hover over the list, then you can see them items. I've looked at Quickolas' site and it shouldn't be like that.

What am I doing wrong?

The site is:

Super League Duplicate


The background color of the div and the text color for the links are the same. The text is there, you just can't see it.
Change this:
CODE
.dropmenudiv a {border-bottom-color: #BBB; color: #494949;}


to this:
CODE
.dropmenudiv a:link {border-bottom-color: #BBB; color: #494949;}




Thanks, tried it and it worked initially, but when you click the links, they 'disappear' again. So that when you visit the link, you can't see it anymore.
smithktff
Aug 10 2009, 04:41 PM
QUOTE (Andypro @ Aug 10 2009, 04:10 PM) *
Thanks, tried it and it worked initially, but when you click the links, they 'disappear' again. So that when you visit the link, you can't see it anymore.


That's what I get for trying to take the easy way out. Replace it with this:
CODE
.dropmenudiv a:link, .dropmenudiv a:visited, .dropmenudiv a {border-bottom-color: #BBB; color: #494949;}


This should cover everything except the hover pseudo class which you already have under control.
Andypro
Aug 10 2009, 08:15 PM
QUOTE (smithktff @ Aug 10 2009, 05:41 PM) *
QUOTE (Andypro @ Aug 10 2009, 04:10 PM) *
Thanks, tried it and it worked initially, but when you click the links, they 'disappear' again. So that when you visit the link, you can't see it anymore.


That's what I get for trying to take the easy way out. Replace it with this:
CODE
.dropmenudiv a:link, .dropmenudiv a:visited, .dropmenudiv a {border-bottom-color: #BBB; color: #494949;}


This should cover everything except the hover pseudo class which you already have under control.


Thanks, works great now. By the way, don't you remember Rocky:

"There's no easy way out, there's no shortcut home."
Detective Zito
Apr 1 2010, 04:14 PM
First - Kudos to quickolas1 for this fantastic code.

I have implemented it on my site, changed the links within the menus and colored it in keeping with my site... BUT...

I can't get it to appear on anything other than the home page? If you go ANYWHERE else in the site, it doesn't appear.

Any thoughts?

League URL for reference: http://www25.myfantasyleague.com/2010/home/55834#0
LarryV
Apr 1 2010, 04:56 PM
QUOTE (Detective Zito @ Apr 1 2010, 05:14 PM) *
First - Kudos to quickolas1 for this fantastic code.

I have implemented it on my site, changed the links within the menus and colored it in keeping with my site... BUT...

I can't get it to appear on anything other than the home page? If you go ANYWHERE else in the site, it doesn't appear.

Any thoughts?

League URL for reference: http://www25.myfantasyleague.com/2010/home/55834#0



did you check the box on the homepage message to put it at the header of all pages?
Detective Zito
Apr 1 2010, 05:23 PM
QUOTE (LarryV @ Apr 1 2010, 05:56 PM) *
QUOTE (Detective Zito @ Apr 1 2010, 05:14 PM) *
First - Kudos to quickolas1 for this fantastic code.

I have implemented it on my site, changed the links within the menus and colored it in keeping with my site... BUT...

I can't get it to appear on anything other than the home page? If you go ANYWHERE else in the site, it doesn't appear.

Any thoughts?

League URL for reference: http://www25.myfantasyleague.com/2010/home/55834#0



did you check the box on the homepage message to put it at the header of all pages?


Larry - you are a gentleman and a scholar. Thank you. Sometimes it's the most obvious thing that's causing the problems. Much appreciated.
quickolas1
Apr 1 2010, 06:04 PM
QUOTE (Detective Zito @ Apr 1 2010, 06:23 PM) *
Larry - you are a gentleman and a scholar. Thank you. Sometimes it's the most obvious thing that's causing the problems. Much appreciated.


nice logos and images on your site....do it yourself or paid-for template?
LarryV
Apr 2 2010, 11:59 AM
QUOTE (Detective Zito @ Apr 1 2010, 06:23 PM) *
Larry - you are a gentleman and a scholar. Thank you. Sometimes it's the most obvious thing that's causing the problems. Much appreciated.



Glad i could help.
UCanCallMeMitch
Apr 27 2010, 05:50 PM
Help me out here -

Utilizing the Chrome Menu in my "Records Tab" which is linked to a HPM. When 1st opened I'll get the HPM to show correctly within the tabcontent frame (pagebody) but if I click another drop-down item (i.e., 2007 & Prior) that page appears in a seperate window and not within the tabcontent frame/pagebody like I want. Am I making sense?

To see it in action check out my 2010 Homepage (a work in progress), click the records tab. The 2008 & After League Records will show up in the correct format, but then click on the drop down item 2007 & Prior under "Historical" and you'll see that this report appears on a new page & not within the paramenters of the pagebody/tabcontent.

I know I can get it to work if I place each report in a HPM, but I don't have enough of them left to cover all the individual years back to 2002.

So the question is - what do I need to code to get these pages to apppear with the intended frame? I bet its something simple I overlooked; blink.gif
UCanCallMeMitch
May 3 2010, 06:20 AM
Since there seems to be a lack of interest on this, I'm working on a work-around to my dilemma - I'm hosting the additional pages offsite with css code to reflect the appearance of the Records Page under the Records Tab.
UCanCallMeMitch
May 7 2010, 10:44 AM
Okay, I'm back seeking a solution to a display issue `cause I've exhausted all my bag of tricks on this.

As I said above I'm storing my League Records offsite, but in doing so I've run into a display problem between IE and FF. The best way to describe the problem is to show you. So, see the two images below - the top one is the Chrome Menu as shown in FireFox and the 2nd one is the Inline Menu in Internet Explorer

Firefox:



Internet Explorer:



As you can see the Inline Menu displays correctly, (on all one row), in FF, but not in IE --> Each Menu Item is on a seperate line.

I have played with every class and id in the below script in an attempt to get the menu in IE to display correctly, but can't seem to get it to work. I'm not sure if its caused by some conflicting code, I need to add or adjust one or more the classes/ids or I have a typo (always a possiblity - but don't see one).

In any case, if someone would be so kind as to take a look at the below script/code and tell me what I need to do to get the IE Menu to display correctly it would be greatly appreciated.

CODE
#chromemenu {
height: 35px;
}

.chromestyle {
width: 100%;
font-weight: bold;
}

.chromestyle ul {
border: 1px solid #8E8E8E;
width: 100%;
background: url(http://tgoboys.com/leagues/2010/graphics/th_black.jpg) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle li {
  width: 1050px;
}

.chromestyle ul li {
display: inline;
}

.chromestyle ul li a {
color: gainsboro;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #8E8E8E;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(http://tgoboys.com/leagues/2010/graphics/th_black.jpg) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* CSS Code For Chrome Drop Down Menu */

.dropmenudiv{
border-color: #8E8E8E;
background-color: black;
position:absolute;
top: 0;
font: normal 10px Verdana;
line-height:18px;
z-index:100;
width: 100px;
visibility: hidden;
border-width: 1px;
border-style: solid;
border-bottom-width: 0;
}

.dropmenudiv a{
border-bottom-color: #8e8e8e;
color: gainsboro;
text-align: left;
display: block;
text-indent: 5px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
}

.dropmenudiv a:hover{
background-color: #191919;
color: #FFD700;
}

* html .dropmenudiv a { /*IE only hack*/
width: 100%;
}


P.S. You can see it live at my League #32189 and click the "Records Tab" and then Click "Historical" > "2007 & Prior".
bsweet0us
May 26 2010, 04:54 AM
QUOTE (UCanCallMeMitch @ May 7 2010, 11:44 AM) *
Okay, I'm back seeking a solution to a display issue `cause I've exhausted all my bag of tricks on this.

As I said above I'm storing my League Records offsite, but in doing so I've run into a display problem between IE and FF. The best way to describe the problem is to show you. So, see the two images below - the top one is the Chrome Menu as shown in FireFox and the 2nd one is the Inline Menu in Internet Explorer

Firefox:



Internet Explorer:



As you can see the Inline Menu displays correctly, (on all one row), in FF, but not in IE --> Each Menu Item is on a seperate line.

I have played with every class and id in the below script in an attempt to get the menu in IE to display correctly, but can't seem to get it to work. I'm not sure if its caused by some conflicting code, I need to add or adjust one or more the classes/ids or I have a typo (always a possiblity - but don't see one).

In any case, if someone would be so kind as to take a look at the below script/code and tell me what I need to do to get the IE Menu to display correctly it would be greatly appreciated.

CODE
#chromemenu {
height: 35px;
}

.chromestyle {
width: 100%;
font-weight: bold;
}

.chromestyle ul {
border: 1px solid #8E8E8E;
width: 100%;
background: url(http://tgoboys.com/leagues/2010/graphics/th_black.jpg) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle li {
  width: 1050px;
}

.chromestyle ul li {
display: inline;
}

.chromestyle ul li a {
color: gainsboro;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #8E8E8E;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(http://tgoboys.com/leagues/2010/graphics/th_black.jpg) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* CSS Code For Chrome Drop Down Menu */

.dropmenudiv{
border-color: #8E8E8E;
background-color: black;
position:absolute;
top: 0;
font: normal 10px Verdana;
line-height:18px;
z-index:100;
width: 100px;
visibility: hidden;
border-width: 1px;
border-style: solid;
border-bottom-width: 0;
}

.dropmenudiv a{
border-bottom-color: #8e8e8e;
color: gainsboro;
text-align: left;
display: block;
text-indent: 5px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
}

.dropmenudiv a:hover{
background-color: #191919;
color: #FFD700;
}

* html .dropmenudiv a { /*IE only hack*/
width: 100%;
}


P.S. You can see it live at my League #32189 and click the "Records Tab" and then Click "Historical" > "2007 & Prior".


Mitch - It looks identical to me in FF and IE. Not sure why it's different for you. Maybe a CTRL+F5?

UCanCallMeMitch
May 26 2010, 06:03 PM
bsweet -

Thanks, someone finally took an interest in my dilemma, but since May 7th, (my last post), I was able to resolve it. My bad - should have said something so not to waste your time.

But again, thanks for taking an interest.
Antz
Jun 9 2010, 03:51 PM
Hey guy's I have implimented the chrome drop down menu. I have linked all my league pages where instructed and have entered the css into my css folder. Everything looks great!

I have a couple of snags though and was hoping to find an answer here. My first one is: All the drop down buttons work when I click on them, but when I mouse over all work except "League home" and "Live scoring" I'm wondering if I messed something up in the code and I just can't find it. I'll provide it below.

Second: I used tabs before and I really like the idea of going away completely from them, but I don't know how to link my championship plaque room. Is this possible, if so How do I do this? Before I just put it into a hpm, but now unless I put something on the home page, header or footer, my hpm's seem worthless, unless I just don't understand how to use them in this scenario.

Thanks for looking and let me know if I need to provide my css as well. (I didn't edit this at all so I assumed it wasn't my problem)

Also, I don't know how to make the code into a scroll box, so I apologize for the long post. And on a side note (probably has nothing to do with this topic at all) Does anyone know how to make each teams team page their home page? I want to make it to where when they log in or when they click "Home", their team page is what they see.

Again thanks!


CODE
<script language="JavaScript" type="text/javascript">

var cssdropdown={
disappeardelay: 50, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="http://i668.photobucket.com/albums/vv45/quickolas1/downarrow.gif" border="0"/>', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 8], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)

//No need to edit beyond here////////////////////////

dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
        totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
    return totaloffset;
},

css:function(el, targetclass, action){
    var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
    if (action=="check")
        return needle.test(el.className)
    else if (action=="remove")
        el.className=el.className.replace(needle, "")
    else if (action=="add" && !needle.test(el.className))
        el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
    if (this.enablereveal[0]){
        if (!dropmenu._trueheight || dropmenu._trueheight<10)
            dropmenu._trueheight=dropmenu.offsetHeight
        clearTimeout(this.revealtimers[dropmenu.id])
        dropmenu.style.height=dropmenu._curheight=0
        dropmenu.style.overflow="hidden"
        dropmenu.style.visibility="visible"
        this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
    }
    else{
        dropmenu.style.visibility="visible"
    }
    this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
    var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
    if (curH<maxH){
        var newH=Math.min(curH, maxH)
        dropmenu.style.height=newH+"px"
        dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
    }
    else{ //if done revealing menu
        dropmenu.style.height="auto"
        dropmenu.style.overflow="hidden"
        clearInterval(this.revealtimers[dropmenu.id])
    }
},

clearbrowseredge:function(obj, whichedge){
    var edgeoffset=0
    if (whichedge=="rightedge"){
        var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
        var dropmenuW=this.dropmenuobj.offsetWidth
        if (windowedge-this.dropmenuobj.x < dropmenuW)  //move menu to the left?
            edgeoffset=dropmenuW-obj.offsetWidth
    }
    else{
        var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
        var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
        var dropmenuH=this.dropmenuobj._trueheight
        if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
            edgeoffset=dropmenuH+obj.offsetHeight
            if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
                edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
        }
    }
    return edgeoffset
},

dropit:function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
        this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
    this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
    if (this.iframeshimadded){
        if (this.dropmenuobj.style.visibility=="visible"){
            this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
            this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
            this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
            this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
            this.shimobject.style.display="block"
        }
    }
},

hideshim:function(){
    if (this.iframeshimadded)
        this.shimobject.style.display='none'
},

isContained:function(m, e){
    var e=window.event || e
    var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
    while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
    if (c==m)
        return true
    else
        return false
},

dynamichide:function(m, e){
    if (!this.isContained(m, e)){
        this.delayhidemenu()
    }
},

delayhidemenu:function(){
    this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
    this.css(this.asscmenuitem, "selected", "remove")
    this.dropmenuobj.style.visibility='hidden'
    this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
    this.hideshim()
},

clearhidemenu:function(){
    if (this.delayhide!="undefined")
        clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false);
    else if (target.attachEvent)
        target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
    if (!this.domsupport)
        return
    this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
    for (var ids=0; ids<arguments.length; ids++){
        var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
        for (var i=0; i<menuitems.length; i++){
            if (menuitems[i].getAttribute("rel")){
                var relvalue=menuitems[i].getAttribute("rel")
                var asscdropdownmenu=document.getElementById(relvalue)
                this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
                this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
                this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
                try{
                    menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
                }catch(e){}
                this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
                    if (!cssdropdown.isContained(this, e)){
                        var evtobj=window.event || e
                        cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
                    }
                }, "mouseover")
                this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
                this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
            }
        } //end inner for
    } //end outer for
    if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
        document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
        this.shimobject=document.getElementById("iframeshim") //reference iframe object
        this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
        this.iframeshimadded=true
    }
} //end startchrome

}
</script>

<script type="text/javascript">

function ddtabcontent(tabinterfaceid){
    this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
    this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
    this.enabletabpersistence=true
    this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
    this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
    this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
    this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
    this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
        return document.cookie.match(re)[0].split("=")[1] //return its value
    return ""
}

ddtabcontent.setCookie=function(name, value){
    document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

    expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
        this.cancelautorun() //stop auto cycling of tabs (if running)
        var tabref=""
        try{
            if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
                tabref=document.getElementById(tabid_or_position)
            else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
                tabref=this.tabs[tabid_or_position]
        }
        catch(err){alert("Invalid Tab ID or position entered!")}
        if (tabref!="") //if a valid tab is found based on function parameter
            this.expandtab(tabref) //expand this tab
    },

    cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
        if (dir=="next"){
            var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
        }
        else if (dir=="prev"){
            var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
        }
        if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
            this.cancelautorun() //stop auto cycling of tabs (if running)
        this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
    },

    setpersist:function(bool){ //PUBLIC function to toggle persistence feature
            this.enabletabpersistence=bool
    },

    setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
        this.selectedClassTarget=objstr || "link"
    },

    getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
        return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
    },

    urlparamselect:function(tabinterfaceid){
        var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
        return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
    },

    expandtab:function(tabref){
        var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
        //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
        var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
        this.expandsubcontent(subcontentid)
        this.expandrevcontent(associatedrevids)
        for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
            this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
        }
        if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
            ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
        this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
    },

    expandsubcontent:function(subcontentid){
        for (var i=0; i<this.subcontentids.length; i++){
            var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
            subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
        }
    },

    expandrevcontent:function(associatedrevids){
        var allrevids=this.revcontentids
        for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
            //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
            document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
        }
    },

    setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
        for (var i=0; i<this.hottabspositions.length; i++){
            if (tabposition==this.hottabspositions[i]){
                this.currentTabIndex=i
                break
            }
        }
    },

    autorun:function(){ //function to auto cycle through and select tabs based on a set interval
        this.cycleit('next', true)
    },

    cancelautorun:function(){
        if (typeof this.autoruntimer!="undefined")
            clearInterval(this.autoruntimer)
    },

    init:function(automodeperiod){
        var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
        var selectedtab=-1 //Currently selected tab index (-1 meaning none)
        var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
        this.automodeperiod=automodeperiod || 0
        for (var i=0; i<this.tabs.length; i++){
            this.tabs[i].tabposition=i //remember position of tab relative to its peers
            if (this.tabs[i].getAttribute("rel")){
                var tabinstance=this
                this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
                this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
                this.tabs[i].onclick=function(){
                    tabinstance.expandtab(this)
                    tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
                    return false
                }
                if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
                    this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
                }
                if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
                    selectedtab=i //Selected tab index, if found
                }
            }
        } //END for loop
        if (selectedtab!=-1) //if a valid default selected tab index is found
            this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
        else //if no valid default selected index found
            this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
        if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
            this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
        }
    } //END int() function

} //END Prototype assignment

/***********************************************
* Tab Content script v2.2- &copy; 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
***********************************************/
</script>

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www5.myfantasyleague.com/2010/home/19733#0">League Home</a></li>
<li><a href="http://www5.myfantasyleague.com/2010/live_scoring_summary?L=19733">Live Scoring</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/standings?L=19733" rel="dropmenu3">Standings</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=01&F=0001" rel="dropmenu4">My Team</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=08" rel="dropmenu5">Stats</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/news_articles?L=19733&MYNEWS=1" rel="dropmenu6">Players</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=15" rel="dropmenu7">Schedule</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=120" rel="dropmenu8">Contests</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=50" rel="dropmenu9">Options</a></li>
<li><a href="http://football5.myfantasyleague.com/2010/menu_page?L=19733&NAME=HELP" rel="dropmenu10">Help</a></li>
</ul>
</div>

<div id="dropmenu1" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/menu_page?L=19733&NAME=REPORTS_RULESREPORTS">Rules</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=01">Teams & Owners</a>
<a href="http://football5.myfantasyleague.com/2010/accounting_report?L=19733&TYPE=GRID">Finances</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=17">Draft Results</a>
<a href="http://football5.myfantasyleague.com/2010/mb/board_show.pl?bid=201019733">Message Board</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=123">Calendar</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=09">Scoring</a>
</div>


<div id="dropmenu2" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=169">Preview</a>
<a href="http://football5.myfantasyleague.com/2010/live_scoring?L=19733">GameCenter</a>
<a href="http://football5.myfantasyleague.com/2010/pro_schedule?L=19733">NFL Games</a>
</div>

<div id="dropmenu3" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/standings?L=19733">Overall</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=20">Bar Chart</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=31">Breakdown</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=101">Power Rank</a>
</div>

<div id="dropmenu4" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=02">Set Lineup</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=178">My Watch List</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=46">Add/Drop</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=05">Trade</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=133">On The Block</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=03">Transaction Report</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=118">Service Report</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=105">Roster Grid</a>
</div>

<div id="dropmenu5" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=08">Stats</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=117">Roster Trends</a>
</div>

<div id="dropmenu6" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/news_articles?L=19733">Player News</a>
<a href="http://football5.myfantasyleague.com/2010/options?O=08&CATEGORY=freeagent&L=19733">Free Agents</a>
<a href="http://football5.myfantasyleague.com/2010/player_search?L=19733">Player Search</a>
<a href="http://football5.myfantasyleague.com/2010/injury?L=19733">Injury Report</a>
</div>

<div id="dropmenu7" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=15">Full Schedule</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=16">Team Schedule</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=54">Schedule Grid</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=79">Playoff Schedule</a>
</div>

<div id="dropmenu8" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=120">Survivor</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=121">NFL Pick'em</a>
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=179">CFL Pick'em</a>
</div>

<div id="dropmenu9" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/2010/options?L=19733&O=50">Personal</a>
<a href="http://football5.myfantasyleague.com/2010/menu_page?L=19733&NAME=REPORTS_WIRELESS">Fantasy Alerts</a>
<a href="http://football5.myfantasyleague.com/2010/menu_page?L=19733&NAME=COMMUNICATIONS">Communications</a>
</div>

<div id="dropmenu10" class="dropmenudiv">
<a href="http://football5.myfantasyleague.com/20010/support?L=19733">Help Center</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
posty
Jun 9 2010, 04:27 PM
QUOTE (Antz @ Jun 9 2010, 04:51 PM) *
Hey guy's I have implimented the chrome drop down menu. I have linked all my league pages where instructed and have entered the css into my css folder. Everything looks great!

I have a couple of snags though and was hoping to find an answer here. My first one is: All the drop down buttons work when I click on them, but when I mouse over all work except "League home" and "Live scoring" I'm wondering if I messed something up in the code and I just can't find it. I'll provide it below.

Second: I used tabs before and I really like the idea of going away completely from them, but I don't know how to link my championship plaque room. Is this possible, if so How do I do this? Before I just put it into a hpm, but now unless I put something on the home page, header or footer, my hpm's seem worthless, unless I just don't understand how to use them in this scenario.

Thanks for looking and let me know if I need to provide my css as well. (I didn't edit this at all so I assumed it wasn't my problem)

Also, I don't know how to make the code into a scroll box, so I apologize for the long post. And on a side note (probably has nothing to do with this topic at all) Does anyone know how to make each teams team page their home page? I want to make it to where when they log in or when they click "Home", their team page is what they see.

Again thanks!


You don't have the dropmenu implemented... Change to...

CODE
<li><a href="http://www5.myfantasyleague.com/2010/home/19733#0" rel="dropmenu1">League Home</a></li>
<li><a href="http://www5.myfantasyleague.com/2010/live_scoring_summary?L=19733" rel="dropmenu2">Live Scoring</a></li>
Antz
Jun 9 2010, 07:23 PM
QUOTE (posty @ Jun 9 2010, 05:27 PM) *
QUOTE (Antz @ Jun 9 2010, 04:51 PM) *
Hey guy's I have implimented the chrome drop down menu. I have linked all my league pages where instructed and have entered the css into my css folder. Everything looks great!

I have a couple of snags though and was hoping to find an answer here. My first one is: All the drop down buttons work when I click on them, but when I mouse over all work except "League home" and "Live scoring" I'm wondering if I messed something up in the code and I just can't find it. I'll provide it below.

Second: I used tabs before and I really like the idea of going away completely from them, but I don't know how to link my championship plaque room. Is this possible, if so How do I do this? Before I just put it into a hpm, but now unless I put something on the home page, header or footer, my hpm's seem worthless, unless I just don't understand how to use them in this scenario.

Thanks for looking and let me know if I need to provide my css as well. (I didn't edit this at all so I assumed it wasn't my problem)

Also, I don't know how to make the code into a scroll box, so I apologize for the long post. And on a side note (probably has nothing to do with this topic at all) Does anyone know how to make each teams team page their home page? I want to make it to where when they log in or when they click "Home", their team page is what they see.

Again thanks!


You don't have the dropmenu implemented... Change to...

CODE
<li><a href="http://www5.myfantasyleague.com/2010/home/19733#0" rel="dropmenu1">League Home</a></li>
<li><a href="http://www5.myfantasyleague.com/2010/live_scoring_summary?L=19733" rel="dropmenu2">Live Scoring</a></li>



Wonderful that was my menu problem, thank you for the quick reply.
LarryV
Jun 13 2010, 06:12 AM
I'm having a problem with the drop down menu going behind my Java Script Fade Slide Show which i use as a Commissioner News module.

Here's My Site : CFFL

Is there a way to make the Drop Down Menu go in front of the slide show?


Here is the slide show code
CODE
<table id="commish_news" cellspacing="1" align="center" class="homepagemodule report">
    <caption><span>Commissioner's Desk</span></caption>
    <tbody>
       <tr>
<tr class="oddtablerow">
        <td>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ahill84006.50webs.com/fadeslideshow2.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) 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 this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [610, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["http://i489.photobucket.com/albums/rr257/larryvasta/2010CFFL/League.png", "http://www5.myfantasyleague.com/2010/home/49474?MODULE=MESSAGE11", "_new", ""],
        ["http://i489.photobucket.com/albums/rr257/larryvasta/2010CFFL/Draft.png", "http://www5.myfantasyleague.com/2010/ajax_ld?L=49474", "_new", ""],
                        ["http://i489.photobucket.com/albums/rr257/larryvasta/2010CFFL/Champs.png", "http://www5.myfantasyleague.com/2010/home/49474?MODULE=MESSAGE6", "_new", ""] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})


</script>


<div id="fadeshow1"></div>

<br />


</td>        
</tr>
   </tbody>
</table>
ahill84006
Jun 13 2010, 09:14 AM
QUOTE (LarryV @ Jun 13 2010, 07:12 AM) *
I'm having a problem with the drop down menu going behind my Java Script Fade Slide Show which i use as a Commissioner News module.

Here's My Site : CFFL

Is there a way to make the Drop Down Menu go in front of the slide show?


Here is the slide show code
CODE
<table id="commish_news" cellspacing="1" align="center" class="homepagemodule report">
    <caption><span>Commissioner's Desk</span></caption>
    <tbody>
       <tr>
<tr class="oddtablerow">
        <td>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ahill84006.50webs.com/fadeslideshow2.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) 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 this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [610, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["http://i489.photobucket.com/albums/rr257/larryvasta/2010CFFL/League.png", "http://www5.myfantasyleague.com/2010/home/49474?MODULE=MESSAGE11", "_new", ""],
        ["http://i489.photobucket.com/albums/rr257/larryvasta/2010CFFL/Draft.png", "http://www5.myfantasyleague.com/2010/ajax_ld?L=49474", "_new", ""],
                        ["http://i489.photobucket.com/albums/rr257/larryvasta/2010CFFL/Champs.png", "http://www5.myfantasyleague.com/2010/home/49474?MODULE=MESSAGE6", "_new", ""] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})


</script>


<div id="fadeshow1"></div>

<br />


</td>        
</tr>
   </tbody>
</table>

Have you tried adding it to your header? I have my banner and menu combined in my header. That seems to work for me.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.