How to modify this tab example so it would show diferent data?

rain13 · August 11, 2010

I got this tab example. But it's always on tab 2. how do i modify it so that if i click on tab 1 it would go to tab 1 and display text meant for tab 1?

	<style type="text/css" media="all">	body {		font: 0.8em arial, helvetica, sans-serif;	}	#header ul {		list-style: none;		padding: 0;		margin: 0;	}	#header li {		display: inline;		border: 1px solid;		border-bottom-width: 0;		margin: 0 0.5em 0 0;	}	#header li a {		padding: 0 1em;	}	#header #selected {		padding-bottom: 1px;		background: white;	}	#content {		border: 1px solid;	}	</style><div id="header"><h1>Tabs</h1><ul>	<li><a href="#">1</a></li>	<li id="selected"><a href="#">2</a></li></ul></div><div id="content">	<p>Ispum schmipsum.</p></div>

thanks in advance.

chibineku · August 11, 2010

I'm not clear on the questions. That code doesn't do anything like reveal content. For that you'd need JavaScript.

rain13 · August 11, 2010

Thnaks for tip.How that javascript should look like? I want have 1 tab that displays one text and other tab that displays another text. I have no idea how to do it with javascript. And can I display php file in tab with javascrpt? I want read tab text from php.

chibineku · August 11, 2010

All that stuff can be done, but it's a fairly complex blend of JavaScript and PHP called AJAX (Asynchronous JavaScript and XML) and it's advisable to take your time learning the basics of each first before trying to mix the two.

dsonesuk · August 11, 2010

it really depends on how many tabs and the length of data for each tab. it might suffice with just having the all data added to the page, and only showing data related to tab selected using display:none; and block; through the use of javascript onclick.

rain13 · August 15, 2010

Actually I want to display *.php file in tab, that means tab could contain pages of text or only few characters.Can i use "#include (file.php)" as tab text? and if i click on other tab, how do i change"#include (file.php)" to "#include (file2.php)" ? I mean how do i update contents of tab?

dsonesuk · August 15, 2010

there are several ways to do this.php only1) you will use get value within the url that will reference the page you wish to display, which will reload the page.----------------------------------------------------------------------------php + javascript2) use include to insert content from different php pages, into separate div containers with unique ids, then hide or display the content depending on which tab selected using javascript.but no reload to show required content.all the content will be placed within page, which might increase page loading time, when first loaded.javascript required.3) use value from tab selected, to run ajax function to read the content from specific page, and the place that within a div container with specific id.loads only specific content on click of specific tab.javascript required

dsonesuk · August 15, 2010

php onlydiv id="header"><h1>Tabs</h1><ul><li><a href="thispage.php">default page content</a></li> <li><a href="thispage.php?page=pageone">pageone</a></li> <li><a href="thispage.php?page=pagetwo">pagetwo</a></li></ul></div><div id="content"><?phpif(isset($_GET['page'])){if(file_exists($_GET['page'].'.php')){include($_GET['page'].'.php');}else{echo '<p style="color: red;">Error! page not found</p>';}}else{?><h1>Default page</h1><p>Default Page content</p><?php}?></div>

dsonesuk · August 15, 2010

php javascript<!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">/*<![CDATA[*//*---->*/function showhide(divref) { menuparent = document.getElementById("tabmenu"); innerANCHORs = menuparent.getElementsByTagName("A"); innerLIs = menuparent.getElementsByTagName("li"); for(i=0;i<innerANCHORs.length;i++) { if(divref == i) { document.getElementById("pagecontent"+i).style.display="block"; innerLIs.style.paddingBottom="1px"; innerLIs.style.backgroundColor="#ffffff"; } else { document.getElementById("pagecontent"+i).style.display="none"; innerLIs.style.paddingBottom="0px"; innerLIs.style.backgroundColor="transparent"; } } }window.onload=function() { menuparent = document.getElementById("tabmenu"); innerANCHORs = menuparent.getElementsByTagName("A"); innerLIs = menuparent.getElementsByTagName("li"); for(i=0;i<innerANCHORs.length;i++) { DOMcodeToRun = "innerANCHORs["+i+"].onclick= function() {showhide("+i+")}"; var tmpFunc = new Function(DOMcodeToRun); tmpFunc(); innerANCHORs.href="java script:void(0);"; if(i>0) { document.getElementById("pagecontent"+i).style.display="none"; innerLIs.style.paddingBottom="0px"; innerLIs.style.backgroundColor="transparent"; } else { document.getElementById("pagecontent"+i).style.display="block"; innerLIs.style.paddingBottom="1px"; innerLIs.style.backgroundColor="#ffffff"; } } }/*--*//*]]>*/</script> <style type="text/css" media="all"> body { font: 0.8em arial, helvetica, sans-serif; } #header { } #header ul { list-style: none; padding: 0; margin: 0; } #header li { display: inline; border: 1px solid; border-bottom-width: 0; margin: 0 0.5em 0 0; padding-bottom: 0px; } #header li a { padding: 0 1em; outline:none; text-decoration:none; } #header #selected { padding-bottom: 1px; background: white; } #content { border: 1px solid; width:960px; padding:10px; } </style>  </head><body><div id="header"><h1>Tabs</h1><ul id="tabmenu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li></ul></div><div id="content"><div id="pagecontent0"><?php include (default.php); ?></div> <div id="pagecontent1"><?php include (file.php); ?></div> <div id="pagecontent2"><?php include (file2.php); ?></div></div></body></html>

rain13 · August 15, 2010

thanks. I'll see what i can do with that code. Is there way to load page on click (not when main page loads.)?It doesn work ( I am talking about your 2nd example because first dont have tab like looking and copying style from 2nd example didn't change the look)Your 2nd (longer example displays it's contents on tab 1, but when I click on tab 1 again it says :The requested URL /svn/java%20script:void(0); was not found on this server. it says same thing for tab 2 and 3.

dsonesuk · August 15, 2010

that because when you post your code on this forum javascript will end up with a space between java and script, when it should be one word.innerANCHORs.href="java script:void(0);"; HERES the problem remove space between javascriptthis works by using the id ref to identify which page to load, if it can't find the page a error this page not found message will appear instead <li><a href="#" id="default">1</a></li> = default.php <li><a href="#" id="gallery">2</a></li> = gallery.php <li><a href="#" id="another">3</a></li = another.pagemaster page php

<!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="ajax.js"></script> <script type="text/javascript"> /*<![CDATA[*//*---->*/  function showhide(divref)	 {	 menuparent = document.getElementById("tabmenu");	 	 innerANCHORs = menuparent.getElementsByTagName("A");	 	 innerLIs = menuparent.getElementsByTagName("li");	 	 for(i=0;i<innerANCHORs.length;i++)		 { 		 if(divref == i)			 {			 innerLIs[i].style.paddingBottom="1px";			 innerLIs[i].style.backgroundColor="#ffffff";			 }		 else			 {			 innerLIs[i].style.paddingBottom="0px";			 innerLIs[i].style.backgroundColor="transparent";			 }		 }	 }   window.onload=function()	 {	 menuparent = document.getElementById("tabmenu");	 	 innerANCHORs = menuparent.getElementsByTagName("A");	 	 innerLIs = menuparent.getElementsByTagName("li"); 	 for(i=0;i<innerANCHORs.length;i++)		 {		 DOMcodeToRun = "innerANCHORs["+i+"].onclick= function() {showhide("+i+");ajax_update(this.id);}";		 var tmpFunc = new Function(DOMcodeToRun);		 tmpFunc();		 		 innerANCHORs[i].href="java script:void(0);";		 		 if(i>0)			 {			 innerLIs[i].style.paddingBottom="0px";			 innerLIs[i].style.backgroundColor="transparent";			 }		 else			 {			 innerLIs[i].style.paddingBottom="1px";			 innerLIs[i].style.backgroundColor="#ffffff";			 }		 }		 	 }  /*--*//*]]>*/ </script>  	 <style type="text/css" media="all"> 	 body {		 font: 0.8em arial, helvetica, sans-serif;	 } 		 #header { 	 }	 	 #header ul {		 list-style: none;		 padding: 0;		 margin: 0;	 } 	 #header li {		 display: inline;		 border: 1px solid;		 border-bottom-width: 0;		 margin: 0 0.5em 0 0; 		 padding-bottom: 0px;	 } 	 #header li a {		 padding: 0 1em;		 outline:none;		 text-decoration:none;		 	 } 	 #header #selected {		 padding-bottom: 1px;		 background: white;	 } 	 #content {		 border: 1px solid;		 width:960px;		 padding:10px;	 } 	 </style>	  <!--[if lte IE 7]>  <style type="text/css" media="all">  #header{ position:relative; bottom:0px; }  </style>  <![endif]-->	  </head> <body> <div id="header">  <h1>Tabs</h1>  <ul id="tabmenu">	 <li><a href="#" id="default">1</a></li>	 <li><a href="#" id="gallery">2</a></li>	 <li><a href="#" id="another">3</a></li> </ul>  </div>  <div id="content"> <?php include("default.php"); ?> </div>  </body> </html>

ajax.js

// JavaScript Document  var xmlhttp  function ajax_update(str) { alert(str) xmlhttp=GetXmlHttpObject(); if (xmlhttp==null)   {   alert ("Your browser does not support AJAX!");   return;   } var url="getpage.php?page="+str;  url=url+"&sid="+Math.random(); xmlhttp.onreadystatechange=stateChanged; xmlhttp.open("GET",url,true); xmlhttp.send(null); }  function stateChanged() {  if (xmlhttp.readyState==4) {  document.getElementById("content").innerHTML=xmlhttp.responseText; } }  function GetXmlHttpObject() { if (window.XMLHttpRequest)   {   // code for IE7+, Firefox, Chrome, Opera, Safari   return new XMLHttpRequest();   } if (window.ActiveXObject)   {   // code for IE6, IE5   return new ActiveXObject("Microsoft.XMLHTTP");   } return null; }

getpage.php

<?php if(isset($_GET['page']))	 {	 if(file_exists($_GET['page'].'.php'))		 {		 include($_GET['page'].'.php');		 }	 else		 {		 echo '<p style="color: red;">Error! page not found :  '.$_GET['page'].'</p>';		 }	 }  ?>

rain13 · August 16, 2010

Thanks

rain13 · August 16, 2010

Ah one more problem.

<div id="content"><?php include("default.php"); ?></div>

makes everything below go in tab too.my page looks like:part1tabspart2and that part2 goes in tabs thatway. Any fix?Edit: it wont' happen if i click on tab.

dsonesuk · August 16, 2010

Sorry what?<?php include("default.php"); ?>is what shows when the page first loads, and when tab 1 is selected afterwards, you should change this to the content page, you want to be displayed onloading OR compltetly remove it for just a blank page. when the other tabs are selected, ajax located the selected page, then totally overwrites, replaces everything within <div id="content">the other pages should not have any html, head or body tags all the required is the coding BETWEEN BUT NOT INCLUDING the body tags

rain13 · August 16, 2010

no i mean

<div id="content"><?php include("./tickets/requests.php"); ?></div>

Gets while page messed up but following code don't.

<div id="content"><?php echo "test"; ?></div>

That's what include causeshttp://autoit.pri.ee/pildid/messed.pngThis is how it looks wite echohttp://autoit.pri.ee/pildid/notmessed.pngThis is how i want it look at beginninghttp://autoit.pri.ee/pildid/notmessed2.pngNow it should be more cleare what problem

<div id="content"><?php include("./tickets/requests.php"); ?></div>

causes.for some reason

<div id="content"><?php echo "test"; ?></div>

doesn't cause this.

dsonesuk · August 16, 2010

the only thing that would cause this, is uneven number of open and closed divs, you can tell by the border it thinks it is below the bugs section, so that why its wrapped the bugs area as well, validate your other pages to find these errors.

rain13 · August 16, 2010

the only thing that would cause this, is uneven number of open and closed divs, you can tell by the border it thinks it is below the bugs section, so that why its wrapped the bugs area as well, validate your other pages to find these errors.

requests.php should be ok

<?phpecho ' <h2>Feature requests<h2><style type="text/css" media="all"> .edit {background: url("http://forums.d2jsp.org/images/edit.gif")no-repeat; border: none;"} </style><table style="text-align: left;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td>ID</td> <td>File</td> <td>Summary</td> <td>Status</td> <td>Date</td> <td>Submitter</td> </tr>';?>

also if i start with

<div id="content"><?php echo "test";?></div>

and then click on requests tab, then it displays requests.php with no problems, problems are only if I start viht include thing. But no problems if requests.php is loaded by tab click.That's what i cant understand. Why it don't have any problems if I click on tab? But why i have problems when start with include? and why there's no problem with echo thing?

dsonesuk · August 16, 2010

you would not happen to have a table in bugs area, scenario: page opens first time, the inserted page has unclosed table tag it searches for it end tag, find another table, must be nested tables carry on in vain, div border will match this process to wrap round tables.you load the default page, after clicking one of the other tabs, the content div boundary has now been set, you are just removing and inserting content from other pages, the unclosed table cannot not now go search for its unclosed tag, like it did when the page was first loaded, its content will show as it should but it still has no closed table tag.<?phpecho ' <h2>Feature requests<h2><style type="text/css" media="all"> .edit {background: url("http://forums.d2jsp.org/images/edit.gif")no-repeat; border: none;"} </style><table style="text-align: left;" border="1"cellpadding="2" cellspacing="2"><tbody><tr><td>ID</td><td>File</td><td>Summary</td><td>Status</td><td>Date</td><td>Submitter</td></tr>';?>Where's My Closed TBODY Tag, Forget That! Where's My Closed Table Tag. If only there was some way to validate http://validator.w3.org/ gee thank! you

rain13 · August 16, 2010

Great thanks. all works now. if i ever release it, i should add your name in helpers/contributors list (if you wnat).

How to modify this tab example so it would show diferent data?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived