Question

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

Answer 1

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