Page 1 of 2
Tabs with javascript
Posted: Mon Oct 30, 2006 3:10 am
by Luke
I am building a page that will display all of the information about a product. I want there to be a box next to it with three different tabs... like this:
http://www.mc2design.info/testbs.jpg
I have been trying for about two hours to get those tabs to switch the content inside of the box, but I don't know if it's just how late it is, or if I am just a moron, but I can't get it to work any way I try it... here's the html...
Code: Select all
<div id="product_info_tabs">
<ul>
<li class="tab" id="tab_description"><div class="active">Description</div></li>
<li class="tab" id="tab_specs"><a href="#">Specs</a></li>
<li class="tab" id="tab_reviews"><a href="#" onclick="switchContent('reviews')">Reviews</a></li>
</ul>
</div>
<div id="product_info_box">
<div id="description" class="info_tab active">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Vestibulum ut felis. Sed elit. Donec pharetra adipiscing libero. </p>
</div>
<div id="specs" class="info_tab">
<p>Review Info</p>
</div>
<div id="reviews" class="info_tab">
<div class="review_stuff">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam odio nunc, viverra quis, condimentum ac, </p>
<p>Vestibulum ut felis. Sed elit. Donec pharetra adipiscing libero. </p>
</div>
</div>
Posted: Mon Oct 30, 2006 3:20 am
by JellyFish
Can we see some Javascript code for that function, if any?
Posted: Mon Oct 30, 2006 3:22 am
by n00b Saibot
quick two ways that can i can think of:
1. change the contents of <product_info_box> by setting innerHTML
2. switch corresponding content div's display on click
Posted: Mon Oct 30, 2006 3:28 am
by Luke
alright... here's what I have so far... not much:
Code: Select all
function toggleContent(outer, inner){
outerDiv = document.getElementById(outer);
innerDiv = document.getElementById(inner);
// Now I think I need to loop through the nodes in outerDiv and set all except innerDiv to display: none... is that right?
}
Posted: Mon Oct 30, 2006 3:33 am
by n00b Saibot
if by outer & inner you mean <product_info_tabs> and <product_info_box/div>'s then yes
Posted: Mon Oct 30, 2006 3:35 am
by JellyFish
Here's a solution. It's blunt but my coding is allways strait forward like that.
Code: Select all
<script>
function switchContent(contentId)
{
document.getElementById("description").style.display = "none";
document.getElementById("specs").style.display = "none";
document.getElementById("reviews").style.display = "none";
document.getElementById(contentId).style.display = "";
return false;
}
</script>
<div id="product_info_tabs">
<ul>
<li class="tab" id="tab_description"><a href="#" onclick="return switchContent('description');">Description</a></li>
<li class="tab" id="tab_specs"><a href="#" onclick="return switchContent('specs');">Specs</a></li>
<li class="tab" id="tab_reviews"><a href="#" onclick="return switchContent('reviews');">Reviews</a></li>
</ul>
</div>
<div id="product_info_box">
<div id="description" class="info_tab active">
Description
</div>
<div id="specs" class="info_tab" style="display:none;">
Specs
</div>
<div id="reviews" class="info_tab" style="display:none">
<div class="review_stuff">
Reviews
</div>
</div>
It seems to work, although not as good GUI as the picture but 'opefully it'll appease
Posted: Mon Oct 30, 2006 10:51 am
by Luke
Is there a good way to "copy" all of one element's styling and "paste" it onto another?
Posted: Mon Oct 30, 2006 11:01 am
by Weirdan
Code: Select all
elt2.style.cssText = elt1.style.cssText;
Posted: Mon Oct 30, 2006 5:39 pm
by Luke
how can I loop through an element's children and change their styles? I have a javascript book, but it's not making any sense to me when it comes to DOM
Posted: Mon Oct 30, 2006 6:02 pm
by Weirdan
usually you don't need to change the style of all the children because they will inherit most of their styling from their parent
Posted: Mon Oct 30, 2006 6:05 pm
by Luke
here's what I'm doing for now because I'm too frustrated to do it the right way for now...
Code: Select all
function switchContent(tab, content){
document.getElementById('tab_description_link').style.backgroundImage = 'url(images/layout/info_tab.jpg)';
document.getElementById('tab_specs_link').style.backgroundImage = 'url(images/layout/info_tab.jpg)';
document.getElementById('tab_reviews_link').style.backgroundImage = 'url(images/layout/info_tab.jpg)';
document.getElementById('description').style.display = 'none';
document.getElementById('specs').style.display = 'none';
document.getElementById('reviews').style.display = 'none';
if(typeof tab == "string"){
var tab = document.getElementById(tab);
}
if(typeof content == "string"){
var content = document.getElementById(content);
}
tab.style.backgroundImage = 'url(images/layout/info_tab_active.jpg)';
content.style.display = 'block';
return true;
}
I'd like to just supply the function with a parent element for both the tabs and the content... that way, I could add tabs without having to change the code... but it's just way too frustrating for the moment.
Another question... so that javascript is not required, I would like to provide tabs that just change their style depending on a variable set in the url... should I just provide a whole different page for those who have javascript disabled or is there a better way to do it? I don't think document.write would be practical here since it's like 1/2 the page we'd be writing out. Suggestions?
Posted: Fri Nov 03, 2006 10:36 am
by n00b Saibot
Ninja wrote:I'd like to just supply the function with a parent element for both the tabs and the content
can put <elem>.childNodes to good use here...
Ninja wrote:Another question... so that javascript is not required, I would like to provide tabs that just change their style depending on a variable set in the url... should I just provide a whole different page for those who have javascript disabled or is there a better way to do it? I don't think document.write would be practical here since it's like 1/2 the page we'd be writing out.
you are thinking for alternate of js and then you think of document.write.. nice
if alternate to javascript is sought it must be server side & if its on server side you pretty well can just write out an alternate class. very simple enough...
Posted: Fri Nov 03, 2006 10:41 am
by Luke
No no... I meant I don't think it would be practical to document.write the part I want to be available to user with javascript enabled... because it's too long. But that's what I ended up doing anyway...
Code: Select all
<script type="text/javascript">
document.write (' <ul>');
document.write (' <li class="tab" id="tab_description"><a href="javascript:;" id=\'tab_description_link\' onclick="return switchContent(this, \'description\')">Description</a></li>');
document.write (' <li class="tab" id="tab_specs"><a href="javascript:;" id=\'tab_specs_link\' onclick="return switchContent(this, \'specs\')">Specs</a></li>');
document.write (' <li class="tab" id="tab_reviews"><a href="javascript:;" id=\'tab_reviews_link\' onclick="return switchContent(this, \'reviews\')">Reviews</a></li>');
document.write (' </ul>');
</script>
<noscript>
<ul>
<li class="tab" id="tab_description"><a href="/pc/&mvt:global:Category_Code;/&mvt:global:Product_Code;/description/" id='tab_description_link' onclick="return switchContent(this, 'description')" <mvt:if expr="g.open_tab EQ 'description'">class="active"</mvt:if> >Description</a></li>
<li class="tab" id="tab_specs"><a href="/pc/&mvt:global:Category_Code;/&mvt:global:Product_Code;/specs/" id='tab_specs_link' onclick="return switchContent(this, 'specs')" <mvt:if expr="g.open_tab EQ 'specs'">class="active"</mvt:if> >Specs</a></li>
<li class="tab" id="tab_reviews"><a href="/pc/&mvt:global:Category_Code;/&mvt:global:Product_Code;/reviews/" id='tab_reviews_link' onclick="return switchContent(this, 'reviews')" <mvt:if expr="g.open_tab EQ 'reviews'">class="active"</mvt:if> >Reviews</a></li>
</ul>
</noscript>
Posted: Fri Nov 03, 2006 11:33 am
by n00b Saibot
in the noscript you still do use js events? i thought you were gunning for non js option?
Posted: Fri Nov 03, 2006 11:35 am
by Luke
LOL I just copied and pasted and accidentally left those in there... thanks n00b