Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Question

    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?

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First off, welcome to the forums!

    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?

  • #3
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link

    Link To WebPage

    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.

  • #4
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One More Thing..

    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

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, if I might make a recommendation: Learn CSS. 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:
    Code:
    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.

    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:
    Code:
    <!-- 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.
    Code:
    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!

  • #6
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    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.

  • #7
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Follow up..

    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 . Any ideas?

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's not working because you didn't use the HTML that I gave you. You're getting the:
    Code:
    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:
    Code:
    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:
    Code:
    <body ... onload="changeMenu();">

  • #9
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks again

    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?

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #11
    New Coder
    Join Date
    Jan 2004
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks Again

    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..
    Last edited by ronni_e; 01-08-2004 at 05:11 AM.


  •  

    Posting Permissions

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