Question

For a class, we’re designing a website (can be found here: http://web.cs.dal.ca/~webucat/) and I’m playing around with it a bit.

As the website’s supposed to be geared toward children, I wanted to make it a little more interactive and fun, and make the top tab buttons bounce when they’re clicked. I’m running into some trouble with doing this, however.

For one, in my HTML I added divs for all the links, so I could access the buttons with jQuery for the bounce effect, but when I did it broke my CSS it seems. (See: all pages except the contact page, where I removed the divs.)

Here’s the navigational tabs HTML:

<div id = "links">
    <div class="bounce-tab"><a href = "index.html" class="tab">Home</a></div>
    <div class="bounce-tab"><a href ="math.html" class="tab">Learn Math</a></div>
    <div class="bounce-tab"><a href ="geography.html" class="tab">Learn Geography</a></div>
    <div class="bounce-tab"><a href ="spelling.html" class="tab">Learn Spelling</a></div>
    <div class="bounce-tab"><a href ="music.html" class="tab">Learn Music</a></div>
    <div class="bounce-tab"><a href ="contact.html" class="tab">Contact Teacher</a></div>
</div>

Also, my jQuery appears not to be working for the button bounce. I’ve searched around, and I thought I implemented the code correctly (heck, I even ran it on jsfiddle here: http://jsfiddle.net/gzWb3/ and it works), and I even looked around on StackOverflow but it seems I’m doing it right for the most part, but just something small isn’t working, but after mulling over the code I can’t seem to figure it out.

Here’s the jQuery:

$(document).ready(function() {
    // Add bounce effect to the navigational tabs that active on click
    $(".bounce-tab").click(function () {
        $(this).effect("bounce", { times:3 }, 300);
    });
});

And here’s my referencing to it in the HTML:

<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

So basically, could someone lend me some help in making our CSS work again, and have the buttons bounce? Thanks in advance.

Answer 1

jQuery and jQuery UI must load before your scripts.js since your code is dependent on both.

Loading an extra version of jQuery ( 1.3) just adds more issues….only load jQuery once