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
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