2 scripts on the same page breaks

Question

i have a custom jquery for my site aswell as an lightbox query. But it seems i cannot get both to work the the same time. Its always 1 of them working, depending on the order they come in. heres the code

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
        $(function () {
            $('a[@rel*=lightbox]').lightBox({
                maxHeight: screen.height * 0.6,
                maxWidth: screen.width * 0.6
            });
        });
</script>
    <script  type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script>   
    <script type="text/javascript">
        $(document).ready(function() {
            /* Menu */
            $("#menu li:last").css("margin-right", "0");
            $("#menu ul.sub li:last").css("margin-right", "0");
            $("#menu li#menues a").hover(function() {
                $(this).siblings(".sub").fadeIn(200);
            });
            $("#menu").hover(function() { }, function() {
                $(".sub").fadeOut(200);
            });
        });
</script>

Answer 1

You have included the jQuery twice..

Remove this line of code

 <script  type="text/javascript" src="./Scripts/jquery-1.3.2.js" ></script> 

Answer 2

Your line:

$("#menu li#menues a").hover(function() {
    $(this).siblings(".sub").fadeIn(200);
});

Uses the single parameter call for hover() http://api.jquery.com/hover/#hover2

This was added in jQuery 1.4, and you are using 1.3.2.

Either:

Update your jQuery.

---

Or use the two parameter function:

$("#menu li#menues a").hover(function() {
    $(this).siblings(".sub").fadeIn(200);
}, null);

That way the anonymous function will be called only on mouseenter, change the order of the params if you want it called on mouseleave.

If you want it to fade in/out:

$("#menu li#menues a").hover(
    function() {
        $(this).siblings(".sub").fadeIn(200);
    },
    function() {
        $(this).siblings(".sub").fadeOut(200);
    });

---

If you need to use the same function for both, while using jQuery 1.3.2 use:

function menuLinkHover(){
    $(this).siblings(".sub").fadeIn(200);
}

$("#menu li#menues a").hover(menuLinkHover, menuLinkHover);

Enjoy!

Answer 3

Some scripts extend the jQuery object, it appears Lightbox is one of them.

By including a reference to the jQuery script twice, as the page loads:

• the jQuery object will be added to the DOM,
• then extended for lightbox,
• then a new jQuery object will be added to the DOM without the extensions

so the script that depends on lightbox will not run.

Removing the second jQuery script tag should fix this.