Honzík Azjol Havelka Honzík Azjol Havelka - 1 month ago 18
Javascript Question

javascript show/hide not working in firefox and IE

could you please help me, how to fix this code to make it working in firefox and IE?

If you drop card2 -> card3 will not show in firefox

$(".stackDrop").droppable({
tolerance: "intersect",
accept: ".card1, .card2",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
if($(event.toElement).hasClass("card1")){ $('.card2').hide(); };
if($(event.toElement).hasClass("card2")){ $('.card3').show(); };
}
});


There is a link to jsfiddle: https://jsfiddle.net/70x2set8/3/

Answer

I have the impression that a whole example here is done in bad way. Im not sure what is your target but there is general problem with events in browsers. Sometimes chrome, FF, IE etc show events in wrong way or have different properties names.

In your example property .toElement in FF is undefined thats why its not working. You can fix it probably by changing it to event.originalEvent.target. https://jsfiddle.net/x25wjs6j/

    if($(event.originalEvent.target).hasClass("card1")){ $('.card2').hide(); };
    if($(event.originalEvent.target).hasClass("card2")){ $('.card3').show(); };

In addition check your Jquery version. First set of jQury versions support IE and other old things and another one not but use some new features. Check it - it can start work after changing jQuery version. Anyway next time describe better what do you need and where is piece of not working code.