Help with making panel navigation, possibly with php?

**team1504** · Dec 12, 2010 19:05

Hi guys,
I am trying to use less javascript in my site and where I can jQuery instead. In an earlier version of my site, I used Adobe Spry tabbed panels navigation (The link takes you to a simple demo). However, that involves js and including the spry js library.

So I was wondering if there is anyway I could do this in PHP and if someone could help me start a simple version of it?

What it is in a navigation where each link is a tab and the Spry dynamically replaces the old content with the new content when a new tab is selected.

Here is some html I quickly wrote up so I could explain it better:

Code HTML4Strict:

<!DOCTYPE HTML>
<html lang="en"
<head>
<meta charset="UTF-8">
<title> Tabbed panel menu with php</title>
<style>
#navigationContainer{
                        background-color:#000;
                        width:100%;
                        height:16px;
 }
ul#listContainer{
                 margin: auto 0px auto 0px;
                 color:#fff;
                 width:62%;
}
ul#listContainer li a{
                       background-color:#000;
                       color:#fff;
                       text-decoration:none;
                       width:25%;
}
ul#listContainer li a:hover{
                       text-decoration:underline;
}
ul#listContainer li a:active{
                       background-color:#ccc;
                       text-decoration:none;
}                   
.panel{
        color:#fff;
        font-size:12px;
}
#wrapper{
              margin:auto 0px auto 0px;
              width:62%;
              height:100%;
}
#content{
             background-color:#ccc;
             width:90%;
             height:48%;
}
</head>
<body>
<div id="navigationContainer">
<ul class="listContainer">
      <li id="panel1" class="panel"><a href"#panel1">Panel 1</a></li>
      <li id="panel1" class="panel"><a href"#panel2">Panel 2</a></li>
      <li id="panel1" class="panel"><a href"#panel3">Panel 3</a></li>
      <li id="panel1" class="panel"><a href"#panel4">Panel 4</a></li>
</ul>
</div>
<div id="wrapper">
        <div id="content">
        <div>
</div>
</body>
</html>

And then an include to a php file or the php in the head that writes content, lets just say text for now, in #content.
If #panel1 is clicked then "This is the content in panel 1" is written

is this possible and I hope someone can help me achieve this in PHP. Please let me know if you need any more explanation or if you have any questions, comments, or solutions

Thanks in Advance & Best Regards,
Team 1504

**team1504** · Dec 12, 2010 19:07

Another thing: The reason why I do not want to just link to separate webpages is that I want to have the content seems to load instantaneously as in the 3rd SPRY demo.

**cranial-bore** · Dec 12, 2010 22:26

PHP can't write anything to the page after it's been sent.
So, if you go without JS then you will need to do a page reload, which is what you're trying to avoid.

What you can do is have your markup contain different content divs (inside #content), and use JS to swap the
visibility of them depending on which tab is clicked.
The content for all tabs will be in the markup, but only one will be visible at a time.

If you're already using jQuery on your pages then check out jQuery UI Tabs

or you could write your own JS to handle the clicking/hiding/showing to avoid having to load jQuery UI onto your page.

**Zurev** · Dec 12, 2010 22:42

Originally Posted by cranial-bore

PHP can't write anything to the page after it's been sent.
So, if you go without JS then you will need to do a page reload, which is what you're trying to avoid.

What you can do is have your markup contain different content divs (inside #content), and use JS to swap the
visibility of them depending on which tab is clicked.
The content for all tabs will be in the markup, but only one will be visible at a time.

If you're already using jQuery on your pages then check out jQuery UI Tabs

or you could write your own JS to handle the clicking/hiding/showing to avoid having to load jQuery UI onto your page.

However an ajax script (or ajax through jQuery) wouldn't be too difficult to do, and would avoid loading every single page into the initial home page at first.

**team1504** · Dec 13, 2010 13:24

I forgot that without javascript or a library based off of javascript, php can not update the page after it is loaded. Thank you for the help.
an thank you cranial-bore for reminding me about jQuery UI. I have looked at it since it first came out.
And it should be faster because I am already linking the jQuery main library instead of linking a whole separate library, such as the SPRY one.

**cranial-bore** · Dec 13, 2010 17:34

Well (although I suggested it) jQuery UI can be quite weighty. Bigger than jQuery its self.
If you only need simple tabs use this example. The extra JS is only 738 bytes.

HTML Code:

<div id="navigationContainer">
<ul class="listContainer">
      <li class="panel"><a href="#panel1">Panel 1</a></li>
      <li class="panel"><a href="#panel2">Panel 2</a></li>
      <li class="panel"><a href="#panel3">Panel 3</a></li>
      <li class="panel"><a href="#panel4">Panel 4</a></li>
</ul>
</div>
<div id="wrapper">
        <div id="content">
        	<div id='panel1' class='panel'>Content of panel 1 goes here...</div>
        	<div id='panel2' class='panel'>Content of panel 2 goes here...</div>
        	<div id='panel3' class='panel'>Panel 3 goes here...</div>
        	<div id='panel4' class='panel'>Panel 4 is last <em>and</em> least. It&rsquo;s crap.</div>
        </div>
</div>

Code JavaScript:

<script type="text/javascript">
var panels = {
 
	init : function() {
 
		if(!$('#navigationContainer')[0]) {
			return;
		}
 
		//Show only first panel
		panels.hideAll();
		$('#content .panel:nth-child(1)').removeClass('hidden');
 
		//Tab clicks
		$('#navigationContainer').delegate('a', 'click', panels.tabClick);
	},
 
	hideAll : function() {
		$('#content .panel').addClass('hidden');
	},
 
	tabClick : function(ev) {
		ev.preventDefault();
		var href = ev.currentTarget.href;
 
		//array of matches. [0] will be like #panel2
		var panel_id = href.match(/#(.+)$/); 
 
		if(!panel_id) {
			return;
		}
 
		panels.hideAll();
		$(panel_id[0]).removeClass('hidden'); //show correct panel
	}
};
 
$(document).ready(panels.init);
</script>

You'll need to define the .hidden class in your CSS for this to work.
Also, I fixed up your markup. You have multiple elements with the ID of panel1 and no = sign before your href.

**team1504** · Dec 13, 2010 21:45

Thank you, I will probably try it out tomorrow after my exam and let you know.
Thanks for the code & the help.

Also, I wrote that html really fast and knew I was going to make some mistakes. Thanks for proofreading an fixing it.

-Team 1504

**team1504** · Dec 13, 2010 21:52

I actually put it together right now and maybe I made a mistake, but the all the tabs are showing on document ready.

Here is the code I put together and a link to a live version

Code HTML4Strict:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
		.hidden{
		       display:none;
		       color:#fff;
		}
		</style>
		<script type="text/javascript">
var panels = {
 
    init : function() {
 
        if(!$('#navigationContainer')[0]) {
            return;
        }
 
        //Show only first panel
        panels.hideAll();
        $('#content .panel:nth-child(1)').removeClass('hidden');
 
        //Tab clicks
        $('#navigationContainer').delegate('a', 'click', panels.tabClick);
    },
 
    hideAll : function() {
        $('#content .panel').addClass('hidden');
    },
 
    tabClick : function(ev) {
        ev.preventDefault();
        var href = ev.currentTarget.href;
 
        //array of matches. [0] will be like #panel2
        var panel_id = href.match(/#(.+)$/); 
 
        if(!panel_id) {
            return;
        }
 
        panels.hideAll();
        $(panel_id[0]).removeClass('hidden'); //show correct panel
    }
};
 
$(document).ready(panels.init);
</script>
	</head>
	<body>
		<div id="navigationContainer">
<ul class="listContainer">
      <li class="panel"><a href="#panel1">Panel 1</a></li>
      <li class="panel"><a href="#panel2">Panel 2</a></li>
      <li class="panel"><a href="#panel3">Panel 3</a></li>
      <li class="panel"><a href="#panel4">Panel 4</a></li>
</ul>
</div>
<div id="wrapper">
        <div id="content">
        	<div id='panel1' class='panel'>Content of panel 1 goes here...</div>
        	<div id='panel2' class='panel'>Content of panel 2 goes here...</div>
        	<div id='panel3' class='panel'>Panel 3 goes here...</div>
        	<div id='panel4' class='panel'>Panel 4 is last <em>and</em> least. It&rsquo;s crap.</div>
        </div>
</div>
	</body>
</html>

**cranial-bore** · Dec 13, 2010 23:47

You haven't included jQuery in your page. I didn't, because you said you already had it. Also script should load at the bottom of the <body> section, not in the header.

**team1504** · Dec 14, 2010 09:22

stupid mistake sorry.
I was just testing the code alone first.
Yes it works! :-) Thank you. I play around with this and jQuery UI and see how fast-loading and small I can get the tabs to be and let you know.

User Tag List

Thread: Help with making panel navigation, possibly with php?

Thread Tools

Display

Help with making panel navigation, possibly with php?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions