SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Help with making panel navigation, possibly with php?

    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

  2. #2
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Zealot Zurev's Avatar
    Join Date
    Feb 2009
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cranial-bore View Post
    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.

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>

  9. #9
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •