jQuery doing what it's supposed to on all the pages except ONE

Question

Here is my script: http://jsfiddle.net/9cnGC/11/

<div id="callus">
<div class="def">111-1111</div>
<div class="num1">222-2222</div>
<div class="num2">333-3333</div>
<div class="num3">444-4444</div>
<div class="num4">555-5555</div>
<div class="numnames numname1">location 1</div>
<div class="numnames numname2">location 2</div>
<div class="numnames numname3">location 3</div>
<div class="numnames numname4">location 4</div>
</div>

$(function() {
    $(document).ready(function() {
        $('.numnames').hover(function() {
            $(".def").toggle();
        });

        $('.num1').hide();
        $('.numname1').hover(function() {
            $('.num1').toggle();
            return false;
        });
        $('.num2').hide();
        $('.numname2').hover(function() {
            $('.num2').toggle();
            return false;
        });
        $('.num3').hide();
        $('.numname3').hover(function() {
            $('.num3').toggle();
            return false;
        });
        $('.num4').hide();
        $('.numname4').hover(function() {
            $('.num4').toggle();
            return false;
        });
    });

});

I was wondering if anyone can help me with this fiddle and maybe clean it up a bit so it can run more efficiently?

I believe it is because there is another instance of jQuery running on the page. Which is messing with this script here, but I am not sure what is wrong with it.

Here is the page that has the messed up display logic. http://ben.chmark.com/mdcp/index.php/prescriptions/transfer-prescription

There is a top right module (give us a call). There should only be one phone number shown at any given time. It is modelled after the jsfiddle I provided up above. It runs fine on all the other pages except this one. I'm stumped :(

Thanks in advance

I'm sorry, I should've been clearer with my question. I have edited it to prevent further confusion. — Ben.chmark, May 11 '12 at 22:51
Please also put your code within the question so when jsFiddle link goes dead question is not useless. — Sparky, May 11 '12 at 23:03
One big thing you can do... eliminate all the `hide()` lines. You can simply put `display:none` in your CSS for those elements. — Sparky, May 11 '12 at 23:06
Only include jQuery **once**... the second instance is ancient (version 1.3.2) and it's knocking out the first (version 1.7.2). — Sparky, May 11 '12 at 23:10

score 0 · Accepted Answer · edited May 23 '17 at 12:04

0

From messing around with the Fiddle link, it looks like an issue with jQuery versions below 1.4.

Try taking a look here: Can I use multiple versions of jQuery on the same page?

The noConflict() may be what you're looking for: http://api.jquery.com/jQuery.noConflict/

<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>

edited May 23 '17 at 12:04

Community

1
1

answered May 11 '12 at 22:35

Chase

29,019
1
49
48

Or better yet, only use one instance of jQuery. – Sparky May 11 '12 at 23:04
Well, preferably yes, but I doubt that's acceptable for the OP. – Chase May 11 '12 at 23:06
I don't believe it's ever acceptable or if the OP even knows what he's doing in this regard. – Sparky May 11 '12 at 23:12
noConflict() was exactly what I needed! – Ben.chmark May 11 '12 at 23:14

jQuery doing what it's supposed to on all the pages except ONE

1 Answers1