...

View Full Version : Need Tabs



JasonReynolds
06-22-2010, 09:20 PM
Hey guys, No clue what the code is for this. I did try creating one but it dramaticly failed. Just wondering what is the code for a box with tabs where if you click the tabs it provides information i the box below. and does not link you to a site. And i need 6 tabs on it. Thanks for people that can provide.

Keleth
06-22-2010, 09:24 PM
What you're looking for is Javascript, and if its dynamic, AJAX. Basically you design a box and 6 tabs, with 6 hidden content pieces within. Have one default to showing, and when someone clicks a tab, have it hide the current content and display the new content.

Remember: PHP is a processing language, at the end all it sends to the user is text. If you have it send HTML, the user gets HTML. If you have it send JS, the user gets JS. PHP doesn't do anything on the users end.

johnduarte
06-22-2010, 09:33 PM
Depends how you want it to work. You can use javascript to show/hide content, or as Keleth said, AJAX, or you can use php to show content based on, say a string in the URL using $_GET.

For example with php, you would have a link in the tab



<div class="tab"><a href="?tab=1">Tab1</a></div>
<div class="tab"><a href="?tab=2">Tab2</a></div>


Then in your php, you would check to see if any of the tabs were set



$ts = $_GET['tab'];


Then just a matter of displaying content based on which tab was selected.



if($ts == 1){
echo 'tab 1 was clicked';
}


edit, sorry misread the original post on what exactly you were looking for

phpcodelearner
06-22-2010, 09:59 PM
do you have dreamweaver it has some cool tabbed pannels you can use

http://www.recipester.org/images/a/a4/Create_tab_navigation_bar_using_spry_tabbed_panels-6.png


http://www.google.co.uk/search?client=firefox-a&rls=org.mozilla%3Aen-GB%3Aofficial&channel=s&hl=en&source=hp&q=spry+tabbed+panel&meta=&btnG=Google+Search

http://labs.adobe.com/technologies/spry/samples/tabbedpanel/tabbed_panel_sample.htm

if you have not tell me and i will try and knock you something up using spry(ajax/javascript/html)

JasonReynolds
06-22-2010, 10:01 PM
Nope i use Microsoft Expression Web

phpcodelearner
06-22-2010, 10:03 PM
is that tabbed panel in the pic what u want????

JasonReynolds
06-22-2010, 10:06 PM
Sure please.

phpcodelearner
06-22-2010, 10:10 PM
will do it now
so you want that panel with 6 tabs correct if i am wrong

JasonReynolds
06-22-2010, 10:12 PM
6 panels
Katar
Cariae
Sarissa
Hatzring
Azura-EU
Tairen

(Don't ask about the names XD)

Fou-Lu
06-22-2010, 10:15 PM
So this is... a JS question, or an HTML one or what? I need to know where to move this to.

JasonReynolds
06-22-2010, 10:16 PM
php =/

Keleth
06-22-2010, 10:20 PM
If you are just getting premade code, make sure to figure out whats going on too... I'm not a fan of code that comes right out of stuff like dreamweaver... its messy, inefficient, and trying to fix it to do something you want later on is a pain.

As far as things go, this is a pretty easy module to build on your own



<div id="tabbedContent">
<div id="tab1" class="tab">Tab 1</div>
<div id="tab2" class="tab">Tab 2</div>
<div id="tab3" class="tab">Tab 3</div>
<div id="tab4" class="tab">Tab 4</div>
<div id="tab5" class="tab">Tab 5</div>
<div id="tab6" class="tab">Tab 6</div>
<div id="content1" class="content">Content 1</div>
<div id="content2" class="content">Content 2</div>
<div id="content3" class="content">Content 3</div>
<div id="content4" class="content">Content 4</div>
<div id="content5" class="content">Content 5</div>
<div id="content6" class="content">Content 6</div>
</div>

In your CSS, set the tabs to float with a width according to what you want so they stack horizontally, and hide all the content you don't want. Then with the JS, do something like


document.getElementById('tab1').click = function() {
document.getElementById('tab1').style.display = 'display';
document.getElementById('tab2').style.display = 'none';
document.getElementById('tab3').style.display = 'none';
document.getElementById('tab4').style.display = 'none';
document.getElementById('tab5').style.display = 'none';
document.getElementById('tab6').style.display = 'none';
}

Its a bit messy, and there are cleaner ways of doing it, such as a framework, but it'll do the job on short notice.

phpcodelearner
06-22-2010, 10:21 PM
done if you pm me your email ill send it u now just knocked up something with dream weaver you can edit all looks eg colour size est by the css. :)

do anything u want with it.

Keleth
06-22-2010, 10:21 PM
php =/

This isn't a PHP topic at all, as I mentioned early on. PHP can't alter content on the user end... PHP simply processes a file and sends the user text. If you're looking for how to make tabbed content, this is a JS question. If you're curious if this can be done without JS, its more an HTML question, but lest there is some big piece of HTML I don't know, it can't be done without JS.

tomws
06-22-2010, 10:22 PM
So this is... a JS question, or an HTML one or what? I need to know where to move this to.

I think you need to move it to Freeloaders' Corner.

Oh, wait. There's not one of those.

met
06-22-2010, 10:23 PM
honestly

http://docs.jquery.com/UI/Tabs

tomws
06-22-2010, 10:24 PM
But, met... that would require using the Google tubes. So.. much... worrrrk.

Keleth
06-22-2010, 10:24 PM
I think you need to move it to Freeloaders' Corner.

Oh, wait. There's not one of those.

I wanted to say it too... I just didn't know if it was appropriate...

Just goggling "Tabbed content" gives all the results you could want.

JasonReynolds
06-22-2010, 10:25 PM
I did search for Tabs on google. And tom, Your one of those people that join people to flame? W/e... And yes there is a php section. and yes there is PHP involved so it does belong here.

met
06-22-2010, 10:25 PM
i think you need to move it to freeloaders' corner.

Oh, wait. There's not one of those.

:D


but, met... That would require using the google tubes. So.. Much... Worrrrk.

so painfully true

Keleth
06-22-2010, 10:28 PM
I did search for Tabs on google. And tom, Your one of those people that join people to flame? W/e... And yes there is a php section. and yes there is PHP involved so it does belong here.

Jason... no... PHP is not involved in what you're trying to do, in the least. You can involved it, but you can also put a car in water... doesn't make it a boat.

JasonReynolds
06-22-2010, 10:29 PM
Yeah php can be included, and i wanted the php included...

phpcodelearner
06-22-2010, 10:30 PM
sent you the tabbed panel tell me if you did not recive

Keleth
06-22-2010, 10:31 PM
Yeah php can be included, and i wanted the php included...

Last time I'll say it, cuz I feel like I'm wasting my time: PHP is not involved in your question. Tabbed content without changing the webpage has NOTHING to do with PHP. It is a javascript question.

Mods, I apologize if I'm coming off aggressive. This is more... resigned.

Fou-Lu
06-22-2010, 10:47 PM
Yes indeed, moving to JS forum then.

Oh, and....

I think you need to move it to Freeloaders' Corner.

Oh, wait. There's not one of those.

Request added :D
Lol

On the plus side, this one isn't that bad. Have you seen this one: http://www.codingforums.com/showthread.php?t=198556

jmrker
06-23-2010, 02:05 AM
Try this ...

TabMenu.js


// TabMenu.js

function showTab (tabNum) {

// Build Tab and Content ID's based on the tab number
var tabID = 'Tab' + tabNum;
var contentID = 'Content' + tabNum;

// Get the LI object based on the tabID
objLI = document.getElementById(tabID);

// If the object exists
if (objLI) {
// Get the LI Objects parent (which should be the UL element the LI tag is in)
objUL = objLI.parentNode;

// Get all LI's in the UL and set their class and color
var LIs = objUL.getElementsByTagName("li");
for (var i = 0; i < LIs.length; i++) {
var classString = 'Tab TabColor';
LIs[i].className = classString;
}

// Show wanted tab is seleted
objLI.className += ' Selected';

// *****
// ***** Step 2 - Show Tab Content
// *****

// Scan for all DIV objects on page that contain the classname TabContent and hide them
var divObj = document.getElementsByTagName('div');
for (var i = 0; i < divObj.length; i++) {
if (divObj[i].className.indexOf("TabContent") >= 0) divObj[i].style.display='none';
}

// Show wanted content DIV
contentObj = document.getElementById(contentID);
if ( typeof contentObj != "undefined" && contentObj != null ) contentObj.style.display='';
}
}

function BuildTabs() {

// Scan for all UL objects on page that contain the classname TabContainer
var ulObj = document.getElementsByTagName('ul');

for (var i = 0; i < ulObj.length; i++) {
if (ulObj[i].className.indexOf("TabContainer") >= 0) {

// Get all LI's in the UL and set their class name to "Tab"
var LIs = ulObj[i].getElementsByTagName("li");
for (var j = 0; j < LIs.length; j++) {

// Assign Tab Class and Color
var classString = 'Tab TabColor';
if (j==0) classString += ' Selected';
LIs[j].id = "Tab" + j;
LIs[j].className = classString;
LIs[j].innerHTML = "<a href=\"#" + j + "\" onClick=\"showTab('" + j + "');\">" +
LIs[j].innerHTML +
"</a>";
}
}
}

// Scan for all DIV objects on page that contain the classname TabContent
var divObj = document.getElementsByTagName('div');
var cnt = 0;
for (var i = 0; i < divObj.length; i++) {

if (divObj[i].className.indexOf("TabContent") >= 0) {

// Hide it
divObj[i].style.display='none';
divObj[i].id = "Content" + cnt;

// Create colored line and insert it as first item in content div
lineDiv = document.createElement("div");
lineDiv.className = "TabTopLine TabColor";
divObj[i].insertBefore(lineDiv, divObj[i].firstChild);

// See if TabContent Div contains a top level navigation div
var topNavFound = false;
var tabNavObj = divObj[i].getElementsByTagName('div');
for (var j = 0; j < tabNavObj.length; j++) {
// If top level navigation div found then change background color to match tab
if (tabNavObj[j].className.indexOf("TabTopNavContent") >= 0) {
tabNavObj[j].className += " TabColor";
topNavFound = true;
}
}

// Display first one
cnt+= 1;
if (cnt == 1) divObj[i].style.display='';
}
}

// If URL has a hash value then assume it contains the ID of the tab you wish to display
// so call the showTab function
locationHash = window.location.hash;
if (locationHash.length > 0) showTab(locationHash.substring(1));
}

window.onload = BuildTabs;


TabMenu.css


/* TabMenu.css */

.PageContainer {
width:640px;
}

.TabContainer {
border-bottom:1px solid #9f9f9f;
clear:both;
display:block;
height:24px;
list-style-type: none;
margin:0;
padding:0 0 0 10px;
}

.Tab {
border-left:1px solid #9f9f9f;
border-top:1px solid #9f9f9f;
border-right:1px solid #9f9f9f;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
height: 15px;
margin-right:2px;
opacity: .6;
/* filter: alpha(opacity=60); */
padding:4px 10px;
}

.Tab:hover {
opacity: 1;
/* filter: alpha(opacity=100); */
}

.Tab a {
color:#5F5F5F;
text-decoration:none;
}

.TabContent {
background:#FFFFFF;
border-left:1px solid #9f9f9f;
border-right:1px solid #9f9f9f;
border-bottom:1px solid #9f9f9f;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
min-height:200px;
}

.TabContent p {
margin:0px;
padding:8px;
}

.TabTopLine {
display:block;
height:3px;
line-height:3px;
}

.TabTopNavContent {
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
height:20px;
}

.TabTopNavContent a {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-left:8px;
}

.Selected {
border-left:1px solid #9f9f9f;
border-top:1px solid #9f9f9f;
border-right:1px solid #9f9f9f;
/* filter: alpha(opacity=100); */
opacity: 1;
padding:5px 10px 4px 10px;
}

.Selected a {
border:0;
color:#000000;
font-weight:bold;
text-decoration:none;
}

/* This is the background colors for the tabs */
.TabColor {
background:#FEDA00;
}


TabMenu.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Easy Tab Navigation Example 2</title>
<script src="TabMenu.js"></script>
<link href="TabMenu.css" rel="stylesheet" type="text/css">
</head>


<body>


<div class="PageContainer">

<ul class="TabContainer">
<li>Tab 0</li>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>

<div class="TabContent">

<div class="TabTopNavContent">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>

</div>
<p>I am the content for Tab 0</p>
</div>

<div class="TabContent">
<p>I am the content for Tab 1</p>
</div>

<div class="TabContent">
<p>I am the content for Tab 2</p>

</div>

<div class="TabContent">
<p>I am the content for Tab 3</p>
</div>

</div>

</body>
</html>

Change the HTML code to meet your needs.
CSS can change colors, etc.
JS is pretty stable and should not need any changes.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum