Tabs & Next Button

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Tabs & Next Button

Post 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">&nbsp;</td>
<td class="content"><input name="back2" type="button" value="&laquo; 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 &raquo;" onClick="scroll(0,0);return expandcontent('sc3', this);" class="submitButton"></td>
</tr>

Thank you
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Tabs & Next Button

Post 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

Code: Select all

tags when posting code.
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Re: Tabs & Next Button -> JS File for Tab

Post 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
Last edited by avoosh on Fri Oct 16, 2009 7:31 pm, edited 1 time in total.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Tabs & Next Button

Post by kaszu »

Please edit your post adding [syntax=javascript]...[/syntax] tags, then will read it.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: Tabs & Next Button

Post 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.
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Re: Tabs & Next Button

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Tabs & Next Button

Post by kaszu »

Code: Select all

<input name="next3" type="button" value=" Continue &raquo;" 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.
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Re: Tabs & Next Button

Post 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="&laquo; 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 &raquo;" 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&#058;;" class="current" onClick="return expandcontent('sc1', this)"><strong>1.</strong> Select Categories »</a></li>
<li><a href="javascript&#058;;" onClick="return expandcontent('sc2', this)" theme="#EDEFEC"><strong>2</strong>. Add Item Information</a></li>
<li><a href="javascript&#058;;" onClick="return expandcontent('sc3', this)" theme="#EDEFEC"><strong>3.</strong> Add To Showcase</a></li>
<li><a href="javascript&#058;;" onClick="return expandcontent('sc4', this)" theme="#EDEFEC"><strong>4.</strong> Add Images</a></li>
</ul>
avoosh
Forum Commoner
Posts: 27
Joined: Tue Oct 06, 2009 7:30 pm

Re: Tabs & Next Button

Post by avoosh »

thanks, I got it working now.

tx
Post Reply