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
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.
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.
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.
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.
<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.
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.
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.