CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
ChrisSherwood
ChrisSherwood

Reputation: 347

jQuery working in Firefox, Safari but not in Chrome

I have written some code with jquery works in firefox, safari and ie9. But chrome does not like it. No obvious msgs in chrome console coming up. I am hitting a wall hopefully someone can shed some light. Script just show/hides some tooltips. Any ideas? fiddle here, changed code still no change to behaviour.

http://jsfiddle.net/qAfwJ/

$(document).ready(function(){
    //custom toolTip Written by CASherwood but not working in ie9/chrome
        var ShowId;
        var id;
        var contentholder = $(".contentBox");
        var toolTip = $(".info");
        var idHashString = '#info';
        var idString = 'id';

            function showToolTip(name, id){
                  id = name + id;
                  $(id).fadeIn(1000);
            }

            function hideToolTip(name, id){
                  id = name + id;
                  $(id).fadeOut(1000);
            }

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });


});

Upvotes: 0

Views: 1370

Answers (4)

ovaar
ovaar

Reputation: 109

There are a few things here, You are setting a variable var toolTip = $(".info");

And then using this same variable to add a function to it. What you are doing here is actually 

$($(".info")).mouseover(

Instead of 

var toolTip = $(".info");
toolTip.mouseover(

Also you might consider using 

jquery.hover(handlerIn(eventObject) , handlerOut(eventObject)  );

http://api.jquery.com/hover/

Upvotes: 2

Martin
Martin

Reputation: 1508

I'm not sure and haven't tested it, but what if you try to move the two functions (showToolTip() and hideToolTip()) before or after the $(function(){}); The might get seen as inner functions of some sort instead of global functions and that might be a thing.

Upvotes: 0

JustDanyul
JustDanyul

Reputation: 14044

I'd start by changing 

        $(toolTip).mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        $(contentholder).mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

to

        toolTip.mouseover(function(){
                ShowId = $(this).attr(idString);
                showToolTip(idHashString, ShowId);
        });

        contentholder.mouseleave(function(){
            ShowId = $(this).find('.info').attr(idString);
            hideToolTip(idHashString, ShowId);
        });

since your toolTip and contentholder variables are already jquery objects.

Upvotes: 1

Lix
Lix

Reputation: 47956

Ok one thing I'm noticing here is that you are wrapping some elements twice with the jQuery selector.

var contentholder = $(".contentBox");
$(contentholder).mouseleave(function(){
  ...
});

Basically what evaluates to is this - 

$($(".contentBox"))

That doesn't look too good and I'm not too sure if it would work as expected. Even if it does, the issues of cross browser compatibility might come into play and I believe this is what you are experiencing. If you have already captured the element and are not just storing the selectors as strings, then there is no need to wrap the element again with the $ syntax.

var contentholder = $(".contentBox");
contentholder.mouseleave(function(){
  ...
});

When you are constructing selectors from strings and variables, you should do so in a similar way to this -

var elementId = 'the_elements_id';
$('#'+elementId).on('click',handler);

Upvotes: 1

Related Questions