We Keep Coding

add and remove css class on hover

So I have this code and it works:
$('.col-main').on('mouseenter', '.product-wrapper', function () {
$( this ).addClass( "js-hover" );
});
$('.col-main').on('mouseleave', '.product-wrapper', function () {
$( this ).removeClass( "js-hover" );
});
But I want it to be a bit more elegant. Something like this:
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );
But I can´t get it to work :) Any help is appreciated

I think the problem is with productWrapper variable. Try like followoing.
var listContainer=$('.col-main')
var productWrapper='.product-wrapper';
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );

sth like this?
$('.col-main').on('mouseenter mouseleave', '.product-wrapper', function (e) {
$( this ).toggleClass( 'js-hover', e.type === 'mouseenter');
});

The jQuery hover and toggle functions could be useful to you.
$('.element-selector').hover(function(){
$(this).toggleClass('.class-to-toggle');
}, function(){
$(this).toggleClass('.class-to-toggle');
})
Fiddle: https://jsfiddle.net/sdso2219/
Update
Since you have now mentioned that this needs to work for dynamic elements, modify the .hover to .live, eg:
$('.element-selector').live('mouseenter', function(){
$(this).toggleClass('.class-to-toggle');
}).live('mouseleave', function(){
$(this).toggleClass('.class-to-toggle');
})

Why doesn't the hidden container reappear when I click on it?

I have a hidden container that contains comments, and a <div> with a <p> inside that says "Show all comments" that I click to show the comments. When I click the div it shows the hidden comments container perfectly, but when I click it again it doesn't hide the comments container. I am thinking there is something wrong with my jQuery code maybe?
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

When you initialize commentsHidden it is never updated so it always has its initial value. You need to check if its hidden on every click. So you don't need an if statement to attach the event. Just attach a single click event and check inside the event if its hidden and continue accordingly.
$(".see-all").click(function() {
var commentsHidden = $(".comments-container").is(":hidden");
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

When you call on('click', ..) or its shortcut click(..), you install a new handler. What ends up happening is that you have multiple handlers on the same object, and they all get called. Instead, either install the handler only once:
// In global code or code that gets executed upon module load
// Only once!
$(".see-all").click(function() {
if ($( ".comments-container" ).is( ":hidden" )) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});
or unbind the old handler:
$( ".see-all" ).off('click'); // Unbind all click handlers
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$( ".see-all" ).click(function() {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
};

You need to check the flag state inside the click function(). The way you have it now will only bind the click handler once on page load.
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
} else {
$('.comments-container').hide();
}
});

Try changing to
$( ".see-all" ).click(function() {
var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
$('.comments-container').show('slow');
$('.see_hide').text('Hide Comments');
});
} else {
$( ".see-all" ).click(function() {
$('.comments-container').hide();
});
}
});
The click handler should only be bound once, and you need to check whether comments are hidden each time the p element is clicked.

Show specific div based on variable in URL

I want to show or hide specific divs based on if &Internal=True or &Internal=False how would I go about that?
Here is the URL: http://www.url.com/sub/page-name/?code=1234-1234-1234-1234&Internal=True
Something like?
<script type="text/javascript">
$(function() {
if ( document.location.href.indexOf('&Internal=True')) {
$( "#internal" ).show();
$( "#external" ).hide();
} else if ( document.location.href.indexOf('&Internal=False')) {
$( "#internal" ).hide();
$( "#external" ).show();
}
});
</script>

This did the trick, the $ var had a conflict:
<script type="text/javascript">
var $ = jQuery.noConflict();
$(function() {
if ( document.location.href.indexOf('&Internal=True')) {
$( "#internal" ).show();
$( "#external" ).hide();
} else if ( document.location.href.indexOf('&Internal=False')) {
$( "#internal" ).hide();
$( "#external" ).show();
}
});
</script>

show/hide jQuery dialog box on mouseover

I'm trying to make a mouseover map area on an image that must display a dialog box when the mouse is over.
The dialog box content is different, depending on which area it is.
My script actually always show all the dialog boxes.
Here is the jsFiddle I created :
http://jsfiddle.net/U6JGn/4/
and the javascript :
$(function() {
$('#box').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide();
for (var i = 0; i < 2; i++) {
$( "#elem"+i ).mouseover(function() {
$( ".box"+i ).dialog( "open" );
});
$( "#elem"+i ).mouseout(function() {
$( ".box"+i ).dialog( "close" );
});
}
});
What am I doing wrong ?

Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.
Since Ids need always to be unique we need to do some changes in your html and css
ids: #box0, #box1
class: .box
$(function() {
$('.box').each(function(k,v){ // Go through all Divs with .box class
var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false });
$(this).parent().find('.ui-dialog-titlebar-close').hide();
$( "#elem"+k ).mouseover(function() { // k = key from the each loop
box.dialog( "open" );
}).mouseout(function() {
box.dialog( "close" );
});
});
});
working example: jsfiddle

Try this:
for (var i = 0; i < 2; i++) {
(function(i) {
$( "#elem"+i ).mouseover(function() {
$( ".box"+i ).dialog( "open" );
});
$( "#elem"+i ).mouseout(function() {
$( ".box"+i ).dialog( "close" );
});
})(i);
}
UPDATE:
Take a look at the demo

http://jsfiddle.net/U6JGn/129/
Modified JQuery code....
$(document).ready(function() {
for (var i = 0; i<= 1; i++) {
$( "#elem"+i ).on('mouseenter',function() {
var st = $(this).attr('Id').replace('elem','');
$( ".box" + st).css('display','');
});
$( "#elem"+i ).on('mouseout',function() {
var st = $(this).attr('Id').replace('elem','');
$( ".box"+st ).hide();
});
}
});

How to develop jQuery drag and drop with sound effect?

I need to create jQuery drag and drop. when I drop item should make sound, dose anyone know how to do it? I know we can do it with HTML5 audio tag with CSS and jQuery to make it happen but I need a sample code in order to modify it.
$(function() {
$( "#draggable" ).draggable();
// need sound in my droppable
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
// my code
$("div#gameboard div").droppable({
drop: function (event, ui) {
{
sendMessage("m " + this.id + " " +
localToGlobal(imgID) + " " +
$(ui.helper).css("left") + " " +
$(ui.helper).css("top")
);
}
myAudio.src = 'audio/song.mp3';
}
});

I may not be perfectly right but here is some thing that can help you maybe:
var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'Your File';
myAudio.play();
To make it works when you drop, you can create the audio tag before and just hit play() every drop.
I would initialise the audio tag in the ready function:
$(document).ready(function() {
}
Then user your code:
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
myAudio.play();
}
});
});

I had to put the code outside of the $(document).ready(function() to get it working in my application:
<script>
var myAudio = document.createElement('audio');
myAudio.controls = true;
myAudio.src = 'audio/beep.mp3';
myAudio.src = 'audio/beep.wav';
//myAudio.play();
</script>
Then you simply trigger the myAudio.play(); inside your drop: function code.