...

View Full Version : JavaScript Question



ronni_e
01-07-2004, 07:06 PM
I dont know how to program in javascript at all but I was told JavaScript is the answer to my problem. Im developing a template driven website using PHP. On the main template there is a set of links for navigation. Here is my examle

> Home
Photos
Contact

When the website loads you are of course at the "home" link. I want this link to be in bold and have a ">" beside it.. Since this is the first page I can set this by default in the template however if the contact link is clicked then the bold and ">" is still on the home.. Someone said java script could be used to read the page name then add the bold and ">" to the proper link??? Here is what I desire when the contact link is clicked and you are taken to the contact page:

Home
Photos
> Contact

Can someone write a simple function for this or show me where one is on the web?

Skyzyx
01-07-2004, 07:15 PM
First off, welcome to the forums! :p

Second, I think this would be pretty easy. However, seeing as you're new to JavaScript, I'd hate to give you some code, and have you not know how to apply it to your specific situation.

Did you have a link to the site in question, so that we could see that code, ID's, classes, etc., that you're working with?

ronni_e
01-07-2004, 07:17 PM
Link To WebPage (http://www.ronniewilliams.net/sachin/GD/contact/)

There is the link to the page with the Menu in question. I have very minor experience in JavaScript. I have enough knowledge to edit scripts and to understand what is going on, I just dont have the abilities to write a script from scratch.

ronni_e
01-07-2004, 07:18 PM
Please keep in mind the links are dummy links.. the "Contact" link is the only one that actually points to the correct page.. the index link is Index Page (http://www.ronniewilliams.net/sachin/GD/)

Skyzyx
01-07-2004, 07:58 PM
Well, if I might make a recommendation: Learn CSS (http://www.w3schools.com/css/default.asp). It will save you many, many, many grey hairs, much stress, and will add several years to your life.

After that, take some time to learn (if not XHTML), valid HTML. Although most web browsers don't enforce it, you should really get in the habit early of quoting every single attribute (whether it's one word or many), keep tags and attributes all lowercase, and make sure that you nest tags properly. For example:


Bad Nesting
<b><i>Apples and Oranges</b></i>

Good Nesting
<b></i>Apples and Oranges</i></b>

Better Nesting (with better tags)
<strong><em>Apples and Oranges</em></strong>


If you start developing these good habits now, it won't kill you when your skills improve and you decide to move up to the current web language, XHTML. :thumbsup:

The code you're using now for your menu is overly complex. Keeping the use of font tags (which would be better replaced with the CSS language), you can simplify what you had with this:


<!-- Start Of Main Menu -->

<font face="arial" size="2" color="#000000">

Main Menu<br>
<span id="home">&amp;nbsp;&amp;nbsp;<a href="/">Home</a></span><br>
<span id="blog">&amp;nbsp;&amp;nbsp;<a href="/blog/">Blog</a></span><br>
<span id="photos">&amp;nbsp;&amp;nbsp;<a href="/photos/">Photo Albums</a></span><br>
<span id="links">&amp;nbsp;&amp;nbsp;<a href="/links/">Links</a></span><br>
<span id="quotes">&amp;nbsp;&amp;nbsp;<a href="/quotes/">Quotes</a></span><br>
<span id="contact">&amp;nbsp;&amp;nbsp;<a href="/contact/">Contact</a></span><br>

</font>


You'd want to add a JavaScript to your page that reads which page it's on from the URL, and adjust the menu from there. This script does exactly that. If you're not anywhere else on the site, it defaults to home... which makes the most sense.


if (location.href.indexOf('/blog/') != -1) document.getElementById('blog').innerHTML='&amp;raquo;&amp;nbsp;<a href="/blog/"><i>Blog</i></a>';
else if (location.href.indexOf('/photos/') != -1) document.getElementById('photos').innerHTML='&amp;raquo;&amp;nbsp;<a href="/photos/"><i>Photo Albums</i></a>';
else if (location.href.indexOf('/links/') != -1) document.getElementById('links').innerHTML='&amp;raquo;&amp;nbsp;<a href="/links/"><i>Links</i></a>';
else if (location.href.indexOf('/quotes/') != -1) document.getElementById('quotes').innerHTML='&amp;raquo;&amp;nbsp;<a href="/quotes/"><i>Quotes</i></a>';
else if (location.href.indexOf('/contact/') != -1) document.getElementById('contact').innerHTML='&amp;raquo;&amp;nbsp;<a href="/contact/"><i>Contact</i></a>';
else document.getElementById('home').innerHTML='&amp;raquo;&amp;nbsp;<a href="/"><i>Home</i></a>';


Hope this helps! :thumbsup:

ronni_e
01-07-2004, 08:09 PM
Thanks for your help.. I do know CSS and Valid HTML... Im in the process of doing that right now. I just layed out the design in Dreamweaver and got it how I wanted now im going through and implimenting the CSS and also making the HTML valid or at least trying to.. I know there are several bad nesting elements etc and that will be fixed with time..

Ive not implimented your code yet but I will soon to see if it works.. Thanks for your time and help.

ronni_e
01-07-2004, 09:08 PM
I tried the code out but im getting an error. Its an error that says the document.getElementById('blog') is null or not an object.. Ive changed the code slightly to try and fix the problem but its still there.. You can view the code at the following link by viewing the source: Webpage (http://www.ronniewilliams.net/sachin/GD/contact/) . Any ideas?

Skyzyx
01-08-2004, 02:21 AM
It's not working because you didn't use the HTML that I gave you. You're getting the:


document.getElementById('blog') is null or not an object

... because you removed the span's with the ID's that are required to make this work.

Use the HTML code I gave you, place the script inside the HEAD, and have the script run when the body loads. Take the JavaScript, and make a function out of it, like so:


function changeMenu() {
if (location.href.indexOf('/blog/') != -1) document.getElementById('blog').innerHTML='&amp;raquo;&amp;nbsp;<a href="/blog/"><i>Blog</i></a>';
else if (location.href.indexOf('/photos/') != -1) document.getElementById('photos').innerHTML='&amp;raquo;&amp;nbsp;<a href="/photos/"><i>Photo Albums</i></a>';
else if (location.href.indexOf('/links/') != -1) document.getElementById('links').innerHTML='&amp;raquo;&amp;nbsp;<a href="/links/"><i>Links</i></a>';
else if (location.href.indexOf('/quotes/') != -1) document.getElementById('quotes').innerHTML='&amp;raquo;&amp;nbsp;<a href="/quotes/"><i>Quotes</i></a>';
else if (location.href.indexOf('/contact/') != -1) document.getElementById('contact').innerHTML='&amp;raquo;&amp;nbsp;<a href="/contact/"><i>Contact</i></a>';
else document.getElementById('home').innerHTML='&amp;raquo;&amp;nbsp;<a href="/"><i>Home</i></a>';
}


Then make it load when the body loads:


<body ... onload="changeMenu();">

ronni_e
01-08-2004, 02:29 AM
thanks again as that fixed my problem.. I do have a question. I was told that if I used this form of java script then its possible that search engines wont index my site properly... can you comment on this?

Skyzyx
01-08-2004, 02:50 AM
Search engines (namely Google) rank on a few main features.

One of them is the page title. Another is meta tags (although not nearly as much).

The MOST important thing to make your pages rank higher is standards-compliance. Coding your webpages properly (not using depreciated tags like FONT or using Tables for layout purposes) using minimal markup (actual HTML/XHTML), and instead using external CSS styles for the layout, fonts, and colors of your pages will drastically improve your rankings.

Reducing the amount of markup you use (using CSS instead) gives you a higher content to markup ratio (therefore a lower markup to content ratio). Google likes that. Some people pay hundreds of dollars monthly to keep their pages higher in the rankings. My site is nearly always in the top 15 for the topics I discuss... because I code with web standards. No tricks, no search engine hacks, no Google Bombing. Just good clean code.

Besides, this particular bit of JavaScript is not required in order to navigate the site. It makes it prettier, and it makes more sense visually, but you don't have to have JavaScript turned on to get around. If it was required, then Google would drop you some notches, yes.

Hope this helps! :thumbsup:

ronni_e
01-08-2004, 03:30 AM
Your help really got me going. I understand the process you took and how it all works. My HTML is now Valid 4.01 and the CSS is valid also.. I may work on using CSS for the layout to remove the tables or even learning some XHTML but im not sure for now..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum