0

i am working on a jquery <li> hover effect and it is working on jsfiddle but not on the test site ie the 'hidden' div is not being displayed on hover.

http://jsfiddle.net/rwone/p4xXH/

both have the same resources, html and css and the only difference is that i have added opening and closing <script> tags around the js in the head area of the test site.

there are no errors in firebug.

is it ok to use all the js code from jsfiddle and just wrap <script> tags around it, or does this cause some syntax errors that could be preventing the hover effect from working?

here is the code i am using on the test site (no link available).

<script>
// begin hover functionality
$(".magic li").each(function() {

var hiddenDiv = $(this).find(".card"),
parentElement = $(this),
api = {};

api.isOpen = false;

api.timeout = null;

api.position = function(){
hiddenDiv.css({
"top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
"left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94 
});
}

api.resetTimeout = function(){

clearTimeout( api.timeout );
}

api.startShowing = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.show();        
},200);
}

api.startHiding = function(){

api.resetTimeout();

api.timeout = setTimeout(function(){
api.hide();        
},150);
}
api.show= function(){

if(!api.isOpen){

api.position();

hiddenDiv .fadeIn(300);

api.isOpen = true;

// $("#isotope_container").bind("scroll.hiddendiv",api.position);

}
}

api.hide = function(){

if( api.isOpen ) {
api.isOpen = false;
// $("#isotope_container").unbind("scroll.hiddendiv");     
hiddenDiv.fadeOut(100);
}

}

hiddenDiv.bind("mouseenter", function() {

api.resetTimeout();

}).bind("mouseleave", function() {

api.startHiding();

}).css("z-index", 100).appendTo("#non_scrollable_area"); 

$(this).data("hiddenApi",api );

}).bind("mouseenter", function() {

var api = $(this).data("hiddenApi");

api.startShowing();

}).bind("mouseleave", function() { // start closing timeout once mouse leaves isotope element

var api = $(this).data("hiddenApi");

api.startHiding();

});

// begin custom scrollbar
(function($){
$(document).ready(function(){
$(".holder_a, .holder_b, .holder_c, .holder_d").mCustomScrollbar({
set_width:false, 
set_height:false, 
horizontalScroll:true, 
scrollInertia:550, 
scrollEasing:"easeOutCirc", 
mouseWheel:"auto", 
autoDraggerLength:true, 
scrollButtons:{ 
enable:false, 
scrollType:"continuous", 
scrollSpeed:20, 
scrollAmount:40 
},
advanced:{
updateOnBrowserResize:true, 
updateOnContentResize:false, 
autoExpandHorizontalScroll:false, 
autoScrollOnFocus:true 
},
callbacks:{
onScrollStart:function(){}, 
onScroll:function(){}, 
onTotalScroll:function(){}, 
onTotalScrollBack:function(){}, 
onTotalScrollOffset:0, 
whileScrolling:false, 
whileScrollingInterval:30 
}
});
});
})(jQuery);
</script>
1
  • 1
    put everything in $(document).ready(function(){--here--});
    – Jai
    Jan 9, 2013 at 7:55

4 Answers 4

1

In your fiddle the code has been included within an onload handler as per the drop-down on the left under "Framework". In your test site there is no onload handler. This is why they behave differently.

You need to either include the script at the end of your document (just before the closing </body> tag) or wrap it in a $(document).ready() handler.

If you put your script in the <head> without using document ready (or onload for oldschool non-jQuery code) then it can't access any elements because they haven't been parsed and added to the DOM yet.

1
$( function() {

// All Your JS Code here

});

In JS Fiddle They Already Have $(window).load( function() { }); but you don not have $(document).ready( function() { }); or $( function() { }); which is another way to add $(document).ready( function() { }); event handler!

Why Should I use that?

Ans: It bind all event handler to the associated elements as soon as document is completely loaded. Other Events are also used for this purpose.

0

Try using this:

<script type='text/javascript'>
  $(document).ready(function(){
    $(".magic li").each(function () {

    var hiddenDiv = $(this).find(".card"),
    parentElement = $(this),
    api = {};

    api.isOpen = false;

    api.timeout = null;

    api.position = function () {
        hiddenDiv.css({
            "top": parentElement.offset().top - $("#non_scrollable_area").offset().top - 106,
            "left": parentElement.offset().left - $("#non_scrollable_area").offset().left - 94
        });
    }

    api.resetTimeout = function () {

        clearTimeout(api.timeout);
    }

    api.startShowing = function () {

        api.resetTimeout();

        api.timeout = setTimeout(function () {
            api.show();
        }, 200);
    }

    api.startHiding = function () {

        api.resetTimeout();

        api.timeout = setTimeout(function () {
            api.hide();
        }, 150);
    }
    api.show = function () {

        if (!api.isOpen) {

            api.position();

            hiddenDiv.fadeIn(300);

            api.isOpen = true;

        // $("#isotope_container").bind("scroll.hiddendiv",api.position);

        }
    }

    api.hide = function () {

        if (api.isOpen) {
            api.isOpen = false;
            // $("#isotope_container").unbind("scroll.hiddendiv");     
            hiddenDiv.fadeOut(100);
        }

    }

    hiddenDiv.bind("mouseenter", function () {

        api.resetTimeout();

    }).bind("mouseleave", function () {

        api.startHiding();

    }).css("z-index", 100).appendTo("#non_scrollable_area");

    $(this).data("hiddenApi", api);

}).bind("mouseenter", function () {

    var api = $(this).data("hiddenApi");

    api.startShowing();

}).bind("mouseleave", function () { // start closing timeout once mouse leaves isotope element

    var api = $(this).data("hiddenApi");

    api.startHiding();

   });
});
</script>
1
  • thank you, your comment suggestion worked ie put everything in $(document).ready(function(){--here--}); Jan 9, 2013 at 8:08
0

I have implemented the first comment suggestion from @jai and it seems to have worked:

put everything in $(document).ready(function(){--here--});

thank you very much, that question must have been up for less than thirty seconds before it got several answers, thank you!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.