Thursday, 31 Jan 2008
Same Page navigation, is a wonderful idea if you have a great artistic (complicated) design and you dont want to we fighting with every time you make a new page, or if you are just plain lazy.
If you want to see how it works before starting, here is an example: TECHNICAL NINJA EXAMPLE
This is all in one page. Make sure you name your page index.php; important since you will be using php on it (I know you knew, just making sure).
index.php
1. add the basic HTML tag <HTML> and at the bottom of the page add the </HTML>. (easy enough)
2. now lets add the JAVASCRIPT that makes the form submit without the need of any “submit button”:
<script type=”text/javascript” language=”javascript”>
function sender(form){
form.submit();
}
</script>
In case you didn’t know, this is a function (yes sender is the name and ‘form’ its parameter (the one you will send from the HTML form later on)), and its only job is for the form to submit when changed. And thats it for the Java Script.
3. Lets open our HTML <BODY> tag and remember to close it after you enter the code </BODY>.
4. Now lets make an HTML Drop-down menu; in this case a simple FORM.
<form action=”index.php” name=”form” method=”post”>
<select name=”selection” onChange=”sender(form)”>
<option value=”">– Select a Section –</option>
<option value=”home”>Home</option>
<option value=”about”>About us</option>
<option value=”services”>Services</option>
<option value=”blog”>Blog</option>
<option value=”contactus”>Contact US</option>
</select>
</form>
The important line here is “<select name=”selection” onChange=”sender(form)”>”. “selection” is the value name that the form will POST (send) to the browser and with the “onChange=”sender(form)” you will tell it to run the JavaScript function. As you can imagine, you can change those options to whatever fits your needs. And Hey, thats it with the HTML.
Now lets go to the super cool (just in case you get excited with php) PHP. We are going to use something that the great gods of PHP gave us as a token of their love == switch. Switch is a great little word that in lame terms, does something different for each option you can pick. If you pick Services it will give you something different than if you click Contact us. (Great huh?)
First lets assign whatever comes from the form to a variable; in this case $page. (just if you have no background of php; we use a $ sign in front of the variable name, just to let it know its a variable. as you probably noticed you dont do that on Javascript (cant they just get along?). You will also notice that in PHP you end each statement with a (;) , another one of those you dont need to to in javascript (but you can).
$page = $_REQUEST["selection"];
// I prefer to use $_REQUEST instead of $_POST or $_GET, just to make sure it picks either or. (in case you are wondering what the heck is //; thats what we use to comment lines in PHP.
Now to the actual Switch code. First we call it and assign the variable to use. Then we give him all the different options and in the end a default option, something to do when none of the previous is present.
switch ($page){
case “home”:
$content = “<h2>HOME</h2>Home Page.”;
break;
case “about”:
$content = “<h2>About Us</h2>We are Awesome.”;
break;
case “services”:
$content = “<h2>Services</h2>You pay, we give you service… SHOW ME THE MONEY!”;
break;
case “blog”:
$content = “<h2>Blog</h2>We love to talk…or write…”;
break;
case “contactus”:
$content = “<h2>CONTACT US</h2>Give me a call.”;
break;
default:
$content = “<h2>HOME</h2>Go, change the page… Frank is the BEST!”;
}
See, what we are doing here is assigning a different text to show with each option, but you could change this for links, pictures, paragraphs, or all together, anything that fits into the <BODY> </BODY> of HTML, can go into these variables. In case you don’t know, php can use either (”) or (’) for an echo (yes, echo is like the document.write of js, or print in other Languages.
For the end we will add an echo of the variable $content. In really lame terms we are saying: Dude, show on screen whatever I wrote on the $content for the option I chose on the form.
echo $content;
?>
In case you were wondering, <?php and ?> are the tags for the beginning and end of a PHP code, and a question that no one ever answered for me. Yes, you can use as many as you want in different parts of the code.
And thats it!!! It should work. If for some reason it isn’t check the whole code HERE.
***I learned this from a fellow blogger, you can see his tutorial in Spanish at The Melbos Experiment.
January 31st, 2008 at 5:11 pm
THX!
February 10th, 2008 at 1:11 am
[...] Page Navigation Javascript / PHP Tutorial This entry was written by admin. Bookmark the permalink. Follow any comments here with the RSS feed for this post.Content related [...]
May 12th, 2010 at 1:38 pm
По моему мнению Вы не правы. Я уверен. Давайте обсудим. Пишите мне в PM, поговорим….
Флорист, озеленитель, менеджер по закупке цветов. If you want to see how it works before starting, here is an example: TECHNICAL NINJA EXAMPLE
This is all […….