PDA

View Full Version : Tab Content Mods - Bold Highlighted Tab Text & NonHighlighted Background Color Change



wdbc
07-12-2005, 02:45 AM
Script: Tab Content (plus a jscheuer1 hack to remove bottom tablist li bottom border)
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm


I'm again working with this html page on my site: http://www.wdbc.com/templates/nav_tab.cfm which has implemented Tab Content, plus jscheuer1's post to my intial Tab Content modification to get Synced Text in an input form (see post: http://www.dynamicdrive.com/forums/showpost.php?p=12669 - doesn't affect tab content js) as a separate external js, plus another one of jscheuer1's post about making the highlighted tab not have a border under it (see post: http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2 which did affect tab content script itself). My working and commented hacked Tab Content script is at http://www.wdbc.com/templates/tabbed2.js and referenced externally in my site html file.

I would like to 1) Have the text of the highlighted/selected tab LI (tablist LI)be bold (font: bold; note I took the bold styling off the #tablist in my style sheet to begin to attempt to accomplish this) while the other non-highlighted/non-selected tablist LI Text for the other tabs remain non-bold and 2) Use a On hover or onMouseover or similar to have the non-highlighted/non-selected tabbed li's change their background to the color of the theme background (I think is initTabcolor in the script) and then subsequently return upon a onMouseout to the color of the #tablist li a which is defined in the style sheet.

I am trying to mimic what was done at Whois Source (http://www.Whois.sc) for their tabbed content search box which I really like. Does one need to modify the script or can simple CSS be added to make this happen. If so, what are the highlighted tabs called for styling? And any direction one could provide on modifying things is much appreciated especially if the script itself needs to be tinkered with. I can follow directions but I'm a bit of a javascript and css newbie only enough to get by.

In terms of modifying the tab content script, I think I need to modify at minimum the function highlighttab area at least for 1) in some way but I don't know exactly how or what other portions of the script also need to be changed. For 2) I thought I could use simple onMouseOver/onMouseOut in the HTML for each tab li but then, a) I wasn't sure what to put in the onMouseOver/onMouseOut in terms of calling the item (something like: this.id.style.backgroundColor='#EAEAFF'; where #EAEAFF would be that theme color and this.nonesense.here is something that I don't know exactly) and b) it would behave badly using a wrong color upon onMouseout when the tab was highlighted/selected and showing its tab content so it seems I would need to modify the script itself.

After one or both of these hacks, I'm done and will be totally content with this truly great script! DD thanks for creating it.

Matt

wdbc
07-12-2005, 04:22 AM
Please note this post is in reference to 2) in my previous threaded post (Tab Content Mods - Bold Highlighted Tab Text & NonHighlighted Background Color Change at http://www.dynamicdrive.com/forums/showthread.php?p=12682). I continue to bang at my dilemna before folks have a chance to respond.

I figured out how to call the style background color via a onMouseOver/onMouseOut properly. It would be something like: onMouseOver="this.style.backgroundColor=' '" where the color is the theme color for particular li or for the a.current tablist li, the a current color BUT as suspected, if I use onMouseOut the background color is not always correct depending on whether it was a highlighted or non-highlighted tabbed li accordingly. I also thought of just using onMouseOver (which is currently implemented on my site) without the onMouseOut but then the color change persists a bit on the non-highlighted tabs until you click one of them you click a particular one and then they all "clear" to the correct colors. See http://www.wdbc.com/templates/nav_tab2.cfm. Would still like each to have all its correct colors displayed accordingly but with 3 potential colors and just 2 states, I'm not sure how. I'm going to try to do some sort of a:hover effect and see if that will work some how. I'm not too hopeful though as I think I need to mod the script someway.

jscheuer1
07-13-2005, 07:15 AM
That's pretty involved but, to make it like the one at whois, try this added to your current style:

#tablist li a:link, #tablist li a:visited{
color: navy;
text-decoration: underline;
}and this function in place of your current 'highlighttab(aobject)' function:
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++){
tabobjlinks[i].style.backgroundColor=initTabcolor
tabobjlinks[i].style.textDecoration='underline'
tabobjlinks[i].style.fontWeight='normal'
}
for (i=0; i<tabobjlis.length; i++) // Added 7-11-05 per jscheuer1 (http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2)
tabobjlis[i].style.top=0 // Added 7-11-05 per jscheuer1 (http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2)
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.textDecoration='none'
aobject.style.fontWeight='bold'
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
aobject.parentNode.style.top='1px' // Added 7-11-05 per jscheuer1 (http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2)
}

jscheuer1
07-13-2005, 07:29 AM
To get the individual highlight effects changes like at whois, there will need to be other modifications and I suspect using id's for the individual tab headers will be involved. I'll have to get back to you on that one.

jscheuer1
07-13-2005, 08:11 AM
OK, I've got it, yet another new 'highlighttab(aobject)' function:

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++){
tabobjlinks[i].style.backgroundColor=initTabcolor
tabobjlinks[i].style.textDecoration='underline'
tabobjlinks[i].style.fontWeight='normal'
tabobjlinks[i].onmouseover=new Function('this.style.backgroundColor=this.getAttribute("theme")')
tabobjlinks[i].onmouseout=new Function('this.style.backgroundColor=initTabcolor')
}
for (i=0; i<tabobjlis.length; i++) // Added 7-11-05 per jscheuer1 (http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2)
tabobjlis[i].style.top=0 // Added 7-11-05 per jscheuer1 (http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2)
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.textDecoration='none'
aobject.onmouseover=''
aobject.onmouseout=''
aobject.style.fontWeight='bold'
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
aobject.parentNode.style.top='1px' // Added 7-11-05 per jscheuer1 (http://www.dynamicdrive.com/forums/showpost.php?p=11627&postcount=2)
}Note: the changes from the previous update are still included but no longer highlighted. Also, for IE6 to work as expected, all li links must have the theme specified, including the first one.

wdbc
07-17-2005, 05:27 PM
Thank you again John. Superb!