Develop Reference

jQuery to update actual CSS

First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627

Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});

I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.

Lasso selectables disables CSS :hover state

I have a group of jquery ui selectable things inside a div which expands to full size upon the hover event. The desired effect is that people can select/multi-select/lasso as many of the select-able objects as they would like. When they are done selecting, and the mouse goes to another part of the page, the div returns to its minimized size.
Basically I have it working, but when I lasso-select multiple objects, it seems that the :hover state is canceled or disabled. This leads to the div pre-maturely returning to its original size, and therefore destroying the user experience.
jsfiddle here: http://jsfiddle.net/Ty6RX/2/
The div in question contains the blue "All Customers". If you try lasso-selecting multiple objects you should see the problem. Any help is greatly appreciated!

when mouse is held down the element goes out of :hover and into the :active state w3schools reference. Fortunately, you can apply a CSS class to both states without interupting the user
try this
http://jsfiddle.net/Ty6RX/3/
#customer_picker:hover, #customer_picker:active {
...
height: 300px;
}

isotope image onclick to reveal new content in top div Wordpress

I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks

Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)

Fix mouseover with toggle buttons and child DIV's

I have a toggle script that works great, but I'm trying to add a mouseover effect and I'm having trouble with it.
I have four tags, two of which are simple DIV's with background colors, and I have two additional Buttons with background images.
I created a mouseover effect for all tags, but it doesn't look right when I click on a button. Once I click a button, the button needs to change background-position upon click and the mousever should stop over the buttons.
Here is my link: http://jsfiddle.net/eriksnet/9cr4F/1/
Thank you.

It's because #r6:hover .gnM has a higher precedence over .button-toogle-on. CSS has an hierarchy of CSS, based on where it's defined, if it's inline or not, how many elements you specify. Read more here.
Anyways, this works:
#r6 #bxGender .button-toggle-on {
background-position: 0 -120px
}
jsfiddle: http://jsfiddle.net/9cr4F/3/

Ext JS Grid Row Background Color Set

How would I go about setting the background colour of an Ext JS Grid row, mainly just the selected item(s).
Any help would be greatly appreciated.

To change the selected row color you have to override the appropriate CSS class:
.x-grid3-row-selected {
background-color: red !important;
}
You could also override the default border-color if you want using that class.
The getRowClass function, on the other hand, is for adding a static CSS class to rows using business logic to determine which rows are affected. You could also achieve row coloring that way, but it would not affect highlighted row color (although you could also write CSS that used both classes together to do so).
EDIT: To change the row style programmatically you will still want to define your styles statically in CSS, then simply add/remove CSS classes dynamically as needed. E.g., assuming a grid and a button with id 'my-btn', clicking the button will add a class (could be defined just like .x-grid3-row-selected as shown above) to the first row in the grid, applying whatever style is in the CSS class. It's up to you to define your real business logic for selecting row(s), but this is the syntax:
Ext.get('my-btn').on('click', function(){
Ext.fly(myGrid.getView().getRow(0)).addClass('error');
});

#bmoeskau This thing you gave does not work with me.
I rather use
grid.getView().addRowClass(rowIndex, 'red');
inside the onDoubleClick function.