mboehler3 Posted August 13, 2009 Share Posted August 13, 2009 I am referencing this site here: http://www.barelyfitz.com/projects/tabber/ to try and set up a tab content script.The site makes it seem easy. In step 1 I enter this code into my page: <div class="tabber"> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab" title="MyTabTitle"> Section two content. </div></div> And get this nice looking result:But when you get to step 3, he throws in the <ul> to dictate the tabs. However, when I implement his code: <div class="tabberlive"> <ul class="tabbernav"> <li class="active"> <a href="java script:void(null)" onclick=""> Section One</a> </li> <li> <a href="java script:void(null)" onclick=""> MyTabTitle</a> </li> </ul> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab"> Section two content. </div></div> ...into my page, I get a distorted look:I want to be able to incorporate the <ul> into my site so I can style the tabs. He provides other examples on his page, but none of them use an unordered list. Am I missing something obvious here? Thank you in advance to anyone who can offer some help and thought. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2009 Share Posted August 13, 2009 the onclick runs a javascript dom code, to show required content, but at the same time hiding the unwanted content.usually using display: none; to hide. and display: block; to show required content.or in this case to change the classname as listed in tabber.js file Link to comment Share on other sites More sharing options...
mboehler3 Posted August 13, 2009 Author Share Posted August 13, 2009 the onclick runs a javascript dom code, to show required content, but at the same time hiding the unwanted content.usually using display: none; to hide. and display: block; to show required content.or in this case to change the classname as listed in tabber.js fileThank you for your input. So what changes do I have to make on my end? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2009 Share Posted August 13, 2009 you don't use the unordererd list code shown, this is what the original code is transformed into.you should have link to css and javascript file in page like so<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript" src="tabber.js"></script><link href="example.css" type="text/css" rel="stylesheet" /></head><body><div class="tabber"> <div class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab" title="MyTabTitle"> Section two content. </div></div></body></html> when you open this page the javascript turns the current code into (using firefox select all->right click-> View selection source) the code below, which now uses an unordered list.<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><script type="text/javascript" src="tabber.js"></script><link href="example.css" type="text/css" rel="stylesheet"></head><body><div class="tabberlive"><ul class="tabbernav"><li class="tabberactive"><a title="Section One" href="java script:void(null);">Section One</a></li><li class=""><a title="MyTabTitle" href="java script:void(null);">MyTabTitle</a></li></ul> <div title="" class="tabbertab"> <h3>Section One</h3> Section one content. </div> <div class="tabbertab tabbertabhide" title=""> Section two content. </div> </div></body></html>and then the example.css file styles the unordered list produced. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.