Jump to content

Php Tab Problem?

tinfanide

By tinfanide
in PHP

Recommended Posts

tinfanide Member

tinfanide

Posted
Posted 
<!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=utf-8" /><title>Untitled Document</title><style>body {    margin: 0;    padding: 0;}#wrapper {    position: relative;    left: 2px;    top: 2px;}#tabMenuBar {    position: absolute;    left: 0;    top: 0;    }#tabMenuContainer {    position: absolute;    left: 0;    top: 30px;    border-top: 0;    border-right: 1px;    border-bottom: 1px;    border-left: 1px;    border: solid #FF9900;    width: 594px;    height: 400px;    }#tabMenu {    margin: 0;    padding: 0;}#tabMenu li {    list-style: none;    float: left;    width: 150px;    height: 30px;        background: #000000;    text-align: center;    line-height: 30px;    }    #tabMenu a {    text-decoration: none;    color: #FFFFFF;    display: block;    outline: none;    }#tabMenu a:visited {    outline: none;    }#tabMenu a:active {    outline: none;    }#tabMenu li:hover {    color: #FFFFFF;    background: #FF9900;    }#tabMenuContainer {    background: #FF9900;    }</style></head><body><div id="wrapper">    <div id="tabMenuBar">	    <ul id="tabMenu">		    <li><a href="php_tabs.php?p=contact" onclick="tab(0)" onfocus="this.blur();">Contact</a></li>		    <li><a href="php_tabs.php?p=events" onclick="tab(1)" onfocus="this.blur();">Events</a></li>		    <li><a href="php_tabs.php?p=forum" onclick="tab(2)" onfocus="this.blur();">Forum</a></li>		    <li><a href="php_tabs.php?p=support" onclick="tab(3)" onfocus="this.blur();">Support</a></li>	    </ul><script>        function tab(t){        for(var x=0; x<4 ;x++){            if(x==t){continue;}            document.getElementById("tabMenu").getElementsByTagName("li")[t].style.background = "#FF9900";            document.getElementById("tabMenu").getElementsByTagName("li")[x].style.background = "#000000";            }        }</script>    </div>    <div id="tabMenuContainer">        <?php                    $pages_dir = 'tabs';                        if(!empty($_GET['p'])){                $pages = scandir($pages_dir,0);                        unset($pages[0], $pages[1]);                $p = $_GET['p'];                                if(in_array($p.'.php', $pages)){                    include ($pages_dir.'/'.$p.'.php');                    } else {                        echo 'nothing found!';                        }                                } else {                    include ($pages_dir.'/'.'home.php');                    }	    ?>    </div></div></body></html>

If I add the php page in the href,the tab feature (when the tab is clicked, that tab's background color is changed. If I empty the href value, it works (just like the below Contact tab) How can I make both features work together? 

<ul id="tabMenu">		    <li><a href="#" onclick="tab(0)" onfocus="this.blur();">Contact</a></li>		    <li><a href="php_tabs.php?p=events" onclick="tab(1)" onfocus="this.blur();">Events</a></li>		    <li><a href="php_tabs.php?p=forum" onclick="tab(2)" onfocus="this.blur();">Forum</a></li>		    <li><a href="php_tabs.php?p=support" onclick="tab(3)" onfocus="this.blur();">Support</a></li></ul>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

When you go to a new page the page refreshes. So you need to run the Javascript function on the new page, after it has refreshed, and figure out on that page which tab to highlight. The window.location.search property will return everything after the ? in the URL, including the ?. http://www.w3schools.com/jsref/prop_loc_search.asp

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
<!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=utf-8" /><title>Untitled Document</title><style>body {margin: 0;padding: 0;}#wrapper {position: relative;left: 2px;top: 2px;}#tabMenuBar {position: absolute;left: 0;top: 0;}#tabMenuContainer {position: absolute;left: 0;top: 30px;border-top: 0;border-right: 1px;border-bottom: 1px;border-left: 1px;border: solid #FF9900;width: 594px;height: 400px;}#tabMenu {margin: 0;padding: 0;}#tabMenu li {list-style: none;float: left;width: 150px;height: 30px;background: #000000;text-align: center;line-height: 30px;}#tabMenu a {text-decoration: none;color: #FFFFFF;display: block;outline: none;}#tabMenu a:visited {outline: none;}#tabMenu a:active {outline: none;}#tabMenu li:hover {color: #FFFFFF;background: #FF9900;}#tabMenuContainer {background: #FF9900;}.tab {background: #FF9900;}</style></head><body><div id="wrapper">    <div id="tabMenuBar">	    <ul id="tabMenu">		    <li><a href="php_tabs.php?p=contact" onclick="tab()" onfocus="this.blur();">Contact</a></li>		    <li><a href="php_tabs.php?p=events" onclick="tab(1)" onfocus="this.blur();">Events</a></li>		    <li><a href="php_tabs.php?p=forum" onclick="tab(2)" onfocus="this.blur();">Forum</a></li>		    <li><a href="php_tabs.php?p=support" onclick="tab(3)" onfocus="this.blur();">Support</a></li>	    </ul><script>function tab(){   if(location.search=="?p=contact"){   alert(0);   document.getElementById("tabMenu").getElementsByTagName("li")[0].className = "tab";   }  }</script>    </div>    <div id="tabMenuContainer">  <?php    $pages_dir = 'tabs';     if(!empty($_GET['p'])){    $pages = scandir($pages_dir,0);     unset($pages[0], $pages[1]);    $p = $_GET['p'];       if(in_array($p.'.php', $pages)){	 include ($pages_dir.'/'.$p.'.php');	 } else {	  echo 'nothing found!';	  }       } else {	 include ($pages_dir.'/'.'home.php');	 }	    ?>    </div></div></body></html>

I've tested with location.search and found out the tab function and the onclick event do not trigger off as expected. It is due to what you said - the scripts should be on the new page which in this case is the php fileI used the contact.php page for testing:But I don't know how to put the JS script inside the php page. Even I put it, it is impossible to trace the document.getElementById on a php page 

 <script>function tab(){   if(location.search=="?p=contact"){   alert(0);   document.getElementById("tabMenu").getElementsByTagName("li")[0].className = "tab";   }  }</script><?php$img[0] = "http://img.tgdaily.net/sites/default/files/stock/article_images/scifi/20111108a_image.jpg";$img[1] = "http://www.thocp.net/biographies/pictures/tesla_nikola1.jpg";$img[2] = "http://www.ciein.com/upload/userfiles/0022.jpg";$img[3] = "http://www.ciein.com/upload/userfiles/0022.jpg";print('<img src='.$img[3].' width="400" height="400" />'); ?>

Can you help me a little bit more? Just no idea of the connection between JS and PHP...

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

I've just figured out how to achieve the effect with just JS in the HTML page, no need to deal with the PHP pages. 

<div id="wrapper">	<div id="tabMenuBar">		<ul id="tabMenu">			<li><a href="php_tabs.php?p=contact" onfocus="this.blur();">Contact</a></li>			<li><a href="php_tabs.php?p=events" onfocus="this.blur();">Events</a></li>			<li><a href="php_tabs.php?p=forum" onfocus="this.blur();">Forum</a></li>			<li><a href="php_tabs.php?p=support" onfocus="this.blur();">Support</a></li>		</ul><script>var t;if(location.search=="?p=contact"){t=0;tab();}if(location.search=="?p=events"){t=1;tab();}if(location.search=="?p=forum"){t=2;tab();}if(location.search=="?p=support"){t=3;tab();}						function tab(){ 			alert(t);			document.getElementById("tabMenu").getElementsByTagName("li")[t].style.background = "orange";			} 	  </script> 	</div>

But needa focus on how to make it like a batch PHP tab generator because in this script I needa set

if(location.search=="?p=contact"){t=0;tab();}if(location.search=="?p=events"){t=1;tab();}if(location.search=="?p=forum"){t=2;tab();}if(location.search=="?p=support"){t=3;tab();}

manually. Less efficient...

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

Yes, I've dragged into JS and finally come up with something that works. 

// external JS document var tabMenu = function(id,tag,attr,color){        for(var t=0; t<document.getElementById(id).getElementsByTagName(tag).length; t++){        if(location.search==document.getElementById(id).getElementsByTagName(tag)[t].getAttribute(attr).substring(document.getElementById(id).getElementsByTagName(tag)[t].getAttribute(attr).indexOf("?",1))){            document.getElementById(id).getElementsByTagName(tag)[t].style.background = color;            }        }    } //<script>window.onload = function(){  tabMenu("tabMenu","a","href","#FF9900");}</script>

This way, I batch do the tab colours. But it gives me another question:I have always been confused by some of the experts online structuring their own scripts in an unusual way (to me).Something like the script below: (of course does not work, I know) 

var tabMenu1 = new tabMenu("tabMenu","a","href","#FF9900");

What is this called? Object Function? Creating own object?Is that JSON?I think I am now ready for learning such syntaxes. I know I can do things in JS without knowing it. I still wanna know how it works, though. Many thanks for your guidance these days.

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
// external JS document var tabMenu = function(id,tag,attr,color){        for(var t=0; t<document.getElementById(id).getElementsByTagName(tag).length; t++){        if(location.search==document.getElementById(id).getElementsByTagName(tag)[t].getAttribute(attr).substring(document.getElementById(id).getElementsByTagName(tag)[t].getAttribute(attr).indexOf("?",1))){            document.getElementById(id).getElementsByTagName(tag)[t].style.background = color;            }        }    } //<script>var tabMenu1 = new tabMenu("tabMenu","a","href","#FF9900");</script> Yes, I've read that before. But that does not explicitly teach me how to create an object that works like a function.Could you tell me a bit why the above codes do not work?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Objects don't work like functions. I'm not really sure what you're trying to do. In your case, you probably don't need the "new" keyword. Check the error console to see if there's anything wrong with your code. And try to indent it properly. Be sure that the element has been create already before calling the function.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...