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 :D

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