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');
})

Update number on jQuery UI tooltips

I have folders with tooltips such as '0 entries' or '5 entries' and so on. I need this tooltip number to update by 1 every time something is dropped into the folder. The title doesn't always start at zero, and I need $(this) drop div updated, as I have many. Here is the working fiddle http://jsfiddle.net/4ehSG/3
jQuery
$(document).tooltip();
var dropped =0;
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
dropped++;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}
});
HTML
<div class="draggable ui-widget-content">
<p>Drag me to my target</p>
</div>
<div class="droppable ui-widget-header" title='2 entries'>
<p>Drop here</p>
</div>

Here is an example of what you can do: http://jsfiddle.net/4ehSG/9/
drop: function( event, ui ) {
var dropped = parseInt($(this).attr('title')) + 1;
$( this )
.attr('title',dropped+' entries')
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( ".draggable" ).fadeOut();
}

You could increase a variable every time an element is dropped
try this
$(document).tooltip();
var num = 0;
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
num++;
$( "#draggable" ).fadeOut();
$( "#droppable" ).attr("title", num + " entries");
}
});
your updated example: http://jsfiddle.net/4ehSG/4/

If you have multiple instances of droppable and draggable, you may want to give each droppable an array associated with it. That way you don't need to rely on a count object and you could drop the same draggable on multiple droppable objects.
DEMO
$(document).tooltip();
$( ".draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
if(!$(this).data('droplist')){ //check for array
$(this).data('droplist', []); //if doesn't exist, create array
}
var droplist = $(this).data('droplist'),
drag = $(ui.draggable)[0];
if(droplist.indexOf(drag) === -1) //check if element exists in array
droplist.push(drag);
$( this )
.addClass( 'ui-state-highlight' )
.find( 'p' )
.html( 'Dropped!' )
.end()
.attr('title', droplist.length + ' entries');
$(this).data('droplist', droplist); //set list
}
});

DEMO
$(document).tooltip();
var count = 0;
$("#draggable").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
count++;
$(this)
.attr('title', count + ' entries')
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
$("#draggable").fadeOut();
}
});

You can use:
document.getElementById('droppable').title = value;
The above line of code is without using jQuery.
If you want to use jQuery, use the following:
$("#droppable").attr( 'title', value );

JqueryUI autocomplete returns wrong item on focus

I used JqueryUI on this project im working on.
When I focus on the next item in the list with the down arrow key, jqueryui returns the previous selected item
Here's a perfect working sample is here on jsFiddle
Here's the Jquery code
$( "#itemname" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
},
//focus: function(event) { alert( event.type ); }
focus : function(event, ui) {
//alert( $(this).val() );
var item_name_this = $(this).val();
$('#properties_item_name').html(item_name_this);
}
});

focus: function (event, ui) {
var item_name_this = ui.item.value;
$('#properties_item_name').html(item_name_this);
}
Demo --> http://jsfiddle.net/VCd4J/16/

JQuery dynamically added javascripts tags close button

I'm using javascript to dynamically add new tabs in jquery. I use the following code:
$("#mytabs1").tabs("add","list.action","New Tab");
My question is how i can add the close button (x button) to those dynamically added tabs?

There is actually an example to achieve this on the jQuery ui tabs demo pages.
Use the tabTemplate property:
HTML template from which a new tab is created and added. The
placeholders #{href} and #{label} are replaced with the url and tab
label that are passed as arguments to the add method
Here's the code from the site:
var $tabs = $( "#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function( event, ui ) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
$( ui.panel ).append( "<p>" + tab_content + "</p>" );
}
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});
In your implementation, you should not use .live() but delegate() or on(). Something like:
$('#tabs').on('click', 'span.ui-icon-close', function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
});

Tabs do not inherently have an x button. If you are adding an x button to your tabs somewhere else, and would like this same x button added to new tabs you add, you could try using the tabsadd event:
$("#mytabs1").tabs({
add: function(event, ui) {
//your code that adds the custom x button to the new tab here
}
});

If you want to select immediately new added tab:
var $tabs = $('#tabsid').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
this will not work..

Is it possible to trigger a click event on hover?

General javascript question here, which would also be good to know how(if possible) to do in jquery.
Can you trigger a click event when hovering over an item?
I know there will be people asking why, but please just humour me.
Many thanks,
C

Take a look at the trigger function:
$(someElement).trigger('click');

Just use click()
$(selector).click();
Or, alternatively just move your click() code out into a common function and call that from hover().

Quite simply:
$(selector).mouseenter(function() { $(this).click() });

$('myselector').hover(function(){
$(this).trigger('click');
});
EDIT: way later than the post but just to illustrate how to both add the handler AND trigger it.
$('myselector').on('click',function(){
// handle click event, put money in my bank account
}).on('mouseenter',function(){
$(this).trigger('click'); // only on enter here
// handle hover mouse enter of hover event, put money in my bank account
}).on('mouseleave',function(){
// handle mouse leave event of hover, put money in my bank account
}).trigger('click');
Just need it one time?
$('myselector').on('click',function(){
// handle click event, put money in my bank account
}).one('mouseenter',function(){
$(this).trigger('click'); // only on enter here once
// handle hover mouse enter of hover event, put money in my bank account
}).on('mouseenter',function(){
// handle hover mouse enter of hover event, put money in my bank account
}).on('mouseleave',function(){
// handle mouse leave event of hover, put money in my bank account
});

jQuery can trigger 'click' all object except tag a
let's try this code on console
and see what happen on this page
$('a').bind('mouseover', function(){
$(this).trigger('click');
console.log('hover'); // let me know when it hovering <a>
});

$('#selector').bind('mouseover',function(){
/*DO WHAT YOU WANT HERE*/
});
that should do the trick

It is possible to trigger a click event on hover.
Try the following example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover + (mouseup/mousedown, click) demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="up">Press mouse and release here.</p>
<p class="hover1">Press mouse and release here. HOVER+UP/DOWN</p>
<p class="hover2">Press mouse and release here. HOVER.UP/DOWN</p>
<p class="hover3">Press mouse and release here. HOVER.CLICK</p>
<script>
$( "p.up" )
.mouseup(function() {
$( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
})
.mousedown(function() {
$( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
});
$( "p.hover1" )
.hover(
function() {
$( this ).append( "<span style='color:#f00;'>Hover IN.</span>" );
},
function() {
$( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" );
})
.mouseup(function() {
$( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
})
.mousedown(function() {
$( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
});
$( "p.hover2" )
.hover(
function() {
$( this ).append( "<span style='color:#f00;'>Hover IN.</span>" );
},
function() {
$( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" );
});
$( "p.hover2" )
.mouseup(function() {
$( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
})
.mousedown(function() {
$( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
});
$( "p.hover3" )
.hover(
function() {
$( this ).append( "<span style='color:#f00;'>Hover IN.</span>" );
},
function() {
$( this ).append( "<span style='color:#00f;'>Homer OUT.</span>" );
});
$( "p.hover3" )
.click(function() {
$( this ).append( "<span style='color:#00f;'>CLICK.</span>" );
});
</script>
</body>
</html>

You might want to also add a delay on hover so that it won't immediately trigger. Delay will be useful if you are going to use it in a list of thumbnails.
var hoverTimer;
var hoverDelay = 200;
$('.classSelector').hover(function() {
var $target = $(this);
// on mouse in, start a timeout
hoverTimer = setTimeout(function() {
// do your stuff here
$target.trigger('click');
}, hoverDelay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(hoverTimer);
});