javascript not working with HTML5

I started to implement some new html5 features (standards, nothing fancy) in my project. Just the standard header, footer, aside, ect. For some reason a javascript code that I used on a past project doesn't work now and I can't figure out what the problem is.

I compared the code (html/javascript) with my new project and the past project (with javascript working) and I don't see any difference. The only thing I can think of is the change in html versions.

By the way Im trying to implement a script that highlights a current link from a menu. It is supposed to use javascript to add/remove a ".selected" code the anchor tags in the menu and relates to the current page and link.

here is the code:

<aside>
        <section>
            <Strong>Quick Links</strong>
                <menu id="side_menu">
                    <ul>
                        <li><a href="application.php">Sign Up</a></li>
                        <li><a href="testimonials.php">Testimonials</a></li>
                        <li><a href="diploma.php">The Process</a></li>
                        <li><a href="diploma.php">Course Listings</a></li>
                        <li><a href="about.php">American High School</a></li>
                     </ul>
                </menu> 

        <script>
            $(document).ready(function() {
                var loc = window.location.href; // The URL of the page we're looking at
                $('#side_menu a')开发者_运维百科.each(function() {
                    if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor
                            $(this).addClass('selected'); // Mark it as selected
                    }
                });
            });
        </script>

        </section>
</aside> 

Here is the link to the site here (Side Panel)

I would appreciate any help on this issue. I spent hours trying to figure this out. Thanks for any help.

gdinari

One problem is that you're trying to use Prototype before you've included it. Move your script tag for js/prototype.js above your script tag for js/drop-o-matic.js.

If you use a debugger (Chrome's Dev Tools, Firebug for Firefox, Script Debugger for IE, ...) it should tell you that. In this case, for instance, Chrome's Dev Tools showed me Uncaught TypeError: Object #<an HTMLDocument> has no method 'observe' , which immediately pointed me in the right direction — your DOM loaded function isn't being run because you're trying to hook it up before document.observe is added by Prototype.

After you fixed the above, the console said Uncaught TypeError: Object #<an HTMLDocument> has no method 'ready'. And that's because you're trying to use jQuery code without including jQuery:

$(document).ready(function() {
    var loc = window.location.href; // The URL of the page we're looking at
    $('aside li a').each(function() {
        if (loc.indexOf(this.href) !== -1) { // If the URL contains the href of the anchor
            $(this).addClass('selected'); // Mark it as selected
        }
    });
});

You can use jQuery as well as Prototype if you like, but if it's just for that snippet, I'd convert it to Prototype code instead:

document.observe("dom:loaded", function() {
    var loc = window.location.href; // The URL of the page we're looking at
    $$('aside li a').each(function(link) {
        if (loc.indexOf(link.href) !== -1) { // If the URL contains the href of the anchor
            link.addClassName('selected'); // Mark it as selected
        }
    });
});

If you're using jQuery code elsewhere, you'll want to include jQuery and use jQuery.noConflict, which allows Prototype to keep the $ symbol (you have to use jQuery instead where you want jQuery's function, or use the jQuery load function as a scoping function).