/    Sign up×
Community /Pin to ProfileBookmark

two row tab menu – text swapping?

Copy linkTweet thisAlerts:
Mar 16.2005

Hello!

First of all, i just want to introduce myself – i’m new to the board. ? nice to meet you all! ?

I sort of have a problem…and for the past day or so i have been trying to search the net for the code to do what i want, to no success. ?

what i want to do is i have a tab menu that is two-tier, where i have one row that consists of five tabs, and on top of that, i have another row (tier/level/etc/) that consists of another five tabs because to fit on my webpage, i can’t have 10 tabs sitting next to each other…unfortunately it takes up too much room. now, the text part that appears on each tab is just plain text, not graphics, so each tab is broken up into a table (i’ve attached an image of my tab menu) with a cell that holds the plain text that appears on the tab.

now, each text on the tab is a link and when the user clicks on that text on a tab, i want it so that the text in that tab to swap with the active tab’s text (please view the image i attached to see what i’m referring to). for example say i had a tab with the text “CDs” on it…when the user clicks on the “CDs” text I want that text to swap text with the active tab, in this case say that the active tab (when i mean active, i mean the one that is forward/in front of the other tabs currently displaying it’s content page) “Computers”, so that “Computers” text will go in the cell that the “CDs” text was just in, and the “CDs” text goes in the cell the “Computers” text was just in – basically swapping text.

i hope this makes sense! lol! i’m trying to figure out the best way to explain it. ? i apologize if it’s unclear…please ask questions. ?

so basically…is there a way to do this? is so, is it javascript, css, or a blend of each? and if it can be done, please, any guidance or code that can assist me, i would be very grateful!!

thank you!

kind regards,
tiff*

[upl-file uuid=0e14b947-cc27-442e-8e38-1ebfbb4bbe47 size=28kB]tabs.jpg[/upl-file]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarMar 16.2005 — [code=php]<script>
var tdno = 0;
var swaping = false;
function swap(i){
if(swaping){
var tmp = eval("td"+i).innerHTML;
eval("td"+i).innerHTML = eval("td"+tdno).innerHTML;
eval("td"+tdno).innerHTML = tmp;
swaping = false;
}else{
swaping = true;
tdno = i;
};
};
//-->
</script>
<table>
<tr>
<td id="td1" onclick="swap(1)">books</td>
<td id="td2" onclick="swap(2)">clothes</td>
<td id="td3" onclick="swap(3)">CDs</td>
<td id="td4" onclick="swap(4)">DVDs</td>
</tr>
.....
</table>[/code]
Copy linkTweet thisAlerts:
@tiffauthorMar 16.2005 — scragar...

i just tried your code and it worked perfectly! ? i'm going to try and wove it into my page now...

thank you so much!!!!!!! ?

kind regards,

tiff*
Copy linkTweet thisAlerts:
@scragarMar 16.2005 — your welcome.
Copy linkTweet thisAlerts:
@tiffauthorMar 17.2005 — scragar (or anyone who may assist)...

you're code is wonderful, but, my concern is that you have to click one cell and then another to specify these two to swap with one another...i was wondering if there's a way in which when you click a link (i.e. "CDs" or "Clothes" etc.) it will always swap with the same cell, in this case the one in which the "Computers" text is in - because that will always be the active cell. Now, I tried doing this and modified your code so that no matter what link you click on it will swap with the active cell (which I called "td5")...it works, however, you seem to have to click a link TWO times (once, then wait, and then you have to click again - it won't seem to work if you just double-click) to get it to swap. any suggestions on how to fix this so that you only have to click a link ONCE and it will swap with cell "td5"? thank you!! here's how i modified the code:

<script>
var swaping = false;
function swap(i){
if(swaping){
var tmp = eval("td"+i).innerHTML;
eval("td"+i).innerHTML = eval("td5").innerHTML;
eval("td5").innerHTML = tmp;
swaping = false;
}else{
swaping = true;
};
};
</script>

kind regards,

tiff*
Copy linkTweet thisAlerts:
@scragarMar 17.2005 — [code=php]<script type="text/javascript">
<!--
function swap(i){
var tmp = i.innerHTML;
i.innerHTML = td5.innerHTML;
td5.innerHTML = tmp;
};
//-->
</script>
<table>
<tr>
<td id="td1" onclick="swap(this)">1</td>
<td id="td2" onclick="swap(this)">2</td>
<td id="td3" onclick="swap(this)">3</td>
<td id="td4" onclick="swap(this)">4</td>
</tr>
<tr>
<td id="td5" onclick="swap(this)">5</td>
<td id="td6" onclick="swap(this)">6</td>
<td id="td7" onclick="swap(this)">7</td>
<td id="td8" onclick="swap(this)">8</td>
</tr>
</table>[/code]
how's that?
Copy linkTweet thisAlerts:
@tiffauthorMar 17.2005 — scragar...i wish i had your smarts! ? my most sincerest gratitude...thank you!!

kind regards,

tiff*
Copy linkTweet thisAlerts:
@scragarMar 17.2005 — it's all about practice and understanding what the function's bits did.
Copy linkTweet thisAlerts:
@tiffauthorMar 17.2005 — thank you for your comment ? hopefully with practice, my understanding will improve and i'll be able to successfully write good code. ?

kind regards,

tiff*
×

Success!

Help @tiff spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...