Page 1 of 1
Tabs & Next Button
Posted: Thu Oct 15, 2009 11:07 am
by avoosh
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
Re: Tabs & Next Button
Posted: Thu Oct 15, 2009 11:14 am
by kaszu
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
Re: Tabs & Next Button -> JS File for Tab
Posted: Thu Oct 15, 2009 11:18 am
by avoosh
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
Re: Tabs & Next Button
Posted: Thu Oct 15, 2009 4:21 pm
by kaszu
Please edit your post adding [syntax=javascript]...[/syntax] tags, then will read it.
Re: Tabs & Next Button
Posted: Thu Oct 15, 2009 8:03 pm
by John Cartwright
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.
Re: Tabs & Next Button
Posted: Fri Oct 16, 2009 7:49 pm
by avoosh
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
Re: Tabs & Next Button
Posted: Sat Oct 17, 2009 7:47 am
by kaszu
Code: Select all
<input name="next3" type="button" value=" Continue »" onClick="scroll(0,0); return expandcontent('sc3', tabobjlinks[3]);" class="submitButton">
I changes "this" to "tabobjlinks[3]", 3 is an index of A element in #tablist, which needs to be highlighted. I assumes 4-th tab item corresponds 'sc3' content.
Re: Tabs & Next Button
Posted: Sat Oct 17, 2009 10:47 am
by avoosh
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.
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>
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;
}
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
Posted: Sat Oct 17, 2009 11:24 am
by avoosh
thanks, I got it working now.
tx