Tabs & Next Button
Moderator: General Moderators
Tabs & Next Button
I am using a tab javascript from http://www.dynamicdrive.com. Below is the code for the tabs. If I click the tab is is uses the active css
<li><a href="javascript:;" onClick="return expandcontent('sc4', this)" theme="#EDEFEC"><strong>4.</strong> Add Images</a></li>
css entry:
#tablist li a.current{
background: #EDEFEC;
}
I also have continue and back buttons on each section (below) but when I navigate using the input buttons the tabs do not use a the css. Can someone help me with the code below so it makes the tab current?
<tr>
<td class="content"> </td>
<td class="content"><input name="back2" type="button" value="« Back " onClick="scroll(0,0);return expandcontent('sc1', this);" style="float: right" class="submitButton"></td>
<td class="content"><input name="next3" type="button" value=" Continue »" onClick="scroll(0,0);return expandcontent('sc3', this);" class="submitButton"></td>
</tr>
Thank you
<li><a href="javascript:;" onClick="return expandcontent('sc4', this)" theme="#EDEFEC"><strong>4.</strong> Add Images</a></li>
css entry:
#tablist li a.current{
background: #EDEFEC;
}
I also have continue and back buttons on each section (below) but when I navigate using the input buttons the tabs do not use a the css. Can someone help me with the code below so it makes the tab current?
<tr>
<td class="content"> </td>
<td class="content"><input name="back2" type="button" value="« Back " onClick="scroll(0,0);return expandcontent('sc1', this);" style="float: right" class="submitButton"></td>
<td class="content"><input name="next3" type="button" value=" Continue »" onClick="scroll(0,0);return expandcontent('sc3', this);" class="submitButton"></td>
</tr>
Thank you
Re: Tabs & Next Button
I think it's because of 'this', which should reference menu A element, not button.
Since you haven't posted JS or link to the tabs script, I can't help.
Please use
Since you haven't posted JS or link to the tabs script, I can't help.
Please use
Code: Select all
tags when posting code.Re: Tabs & Next Button -> JS File for Tab
Code: Select all
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("&") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("&")).toLowerCase();
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].indexOf(strParamName + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return strReturn;
}
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var tab = getURLParam("tab");
if (tab == "") {var tab = "sc1"};
var initialtab=[1, tab]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
Last edited by avoosh on Fri Oct 16, 2009 7:31 pm, edited 1 time in total.
Re: Tabs & Next Button
Please edit your post adding [syntax=javascript]...[/syntax] tags, then will read it.
- John Cartwright
- Site Admin
- Posts: 11470
- Joined: Tue Dec 23, 2003 2:10 am
- Location: Toronto
- Contact:
Re: Tabs & Next Button
I usually won't reem on people for not using appropriate bb codes, but you were clearly asked to use the appropriate tags prior to posting code.
..and as kaszu suggested, we will help you when you can help us help you.
..and as kaszu suggested, we will help you when you can help us help you.
Re: Tabs & Next Button
Doing 50 things at the same time, didn't pay attention, so deserved it. Nice feature, cuts down on scrolling.
I updated and put the code in the code tags. I hope to find the solution. Can someone help with this question.
Thanks
I updated and put the code in the code tags. I hope to find the solution. Can someone help with this question.
Thanks
Re: Tabs & Next Button
Code: Select all
<input name="next3" type="button" value=" Continue »" onClick="scroll(0,0); return expandcontent('sc3', tabobjlinks[3]);" class="submitButton">Re: Tabs & Next Button
Hi and thank you for answering.
the current tab is 2, when clicking the next button to go to tab 3 if I use tabobjlinks[3]);" it highlights tab 4 but if I change it to tabobjlinks[3]);" then tab 3 is highlighted.
If I change the code to sc3', tabobjlinks[3]);" it uses the css for the 4th tab. It need to highlight tab 3. and the back button to highlight tab2
css entry:
#tablist li a.current{
background: #EDEFEC;
}
the current tab is 2, when clicking the next button to go to tab 3 if I use tabobjlinks[3]);" it highlights tab 4 but if I change it to tabobjlinks[3]);" then tab 3 is highlighted.
Code: Select all
<td class="content"><input name="back1" type="button" value="« Back " onClick="scroll(0,0);return expandcontent('sc1', this);" style="float: right" class="submitButton"></td>
<td class="content"><input name="next3" type="button" value=" Continue »" onClick="scroll(0,0);return expandcontent('sc3', tabobjlinks[3]);" class="submitButton"></td>
css entry:
#tablist li a.current{
background: #EDEFEC;
}
Code: Select all
<ul id="tablist">
<li><a href="javascript:;" class="current" onClick="return expandcontent('sc1', this)"><strong>1.</strong> Select Categories »</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc2', this)" theme="#EDEFEC"><strong>2</strong>. Add Item Information</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc3', this)" theme="#EDEFEC"><strong>3.</strong> Add To Showcase</a></li>
<li><a href="javascript:;" onClick="return expandcontent('sc4', this)" theme="#EDEFEC"><strong>4.</strong> Add Images</a></li>
</ul>Re: Tabs & Next Button
thanks, I got it working now.
tx
tx