We Keep Coding

Issues with addclass and selectors

I'm pretty green with jQuery so I'm sure this is an obvious error - but nonetheless it has me stumped. I'm trying to make a pretty simple navbar that shifts from 500px down the page to absolute positioning at the top after you scroll past it.
The issue: I can't seem to get the js to find the navbar when I'm using a div ID of navbar and a selector of #navbar.
Here is the js:
$(document).ready(function () {
$(window).bind('scroll', function () {
var scrollDepth = 500;
if ($(window).scrollTop() > scrollDepth) {
$('#navbar').addClass('fixed')
} else {
$('#navbar').removeClass('fixed')
}
})
})
Here is a jsfiddle of the issue: http://jsfiddle.net/ayGwn/475/

It is an issue with specificty. A CSS rule for an id will override a CSS rule for a class. If you change the .fixed { ... } to #navbar.fixed { .. } it should work. Assuming you are not using .fixed for anything else.
MDN article about CSS selectors specificty
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style

You should use #navbar.fixed, instead of .fixed only. Because id style gets more priority than class style. In your case javascript is working fine. the .fixed class is being added. But as you have defined position:absolute for you #navbar id, it is overriding style rules for .fixed class.

Combining inline css and hover state, is it possible?

I have found out that if we write inline css (or add it using JavaScript), then we lose the value of css hover. Is it possible to change such behavior?
Simple example
<div id="test" style="color: red">test</div>
<style>
#test:hover {
color:blue;
}
</style>
In this case hover doesn't work.
Update
I can't use !important, because after it I will not be able to change that atribute via JavaScript.
Also I generate styles dynamically, so I can't add specific classes via JavaScript.

because inline css overrides your css styles in the file
if you had
color: blue !important
it would work but not recommended, you can always use jquery to remove the inline style tag though haha
Update:
remove the style tag using jquery or when using javascript... add !important so the inline css would have important

I can't use !important, because after it i will not be able to change
that atribute via javascript.
You can still use !important, just add a class with JavaScript and remove it anytime you want.
demo

The easiest way to go is the following
$(selector).hover(function() {
$st = $(this).attr("style");
$(this).attr("style","");
},function() {
$(this).attr("style",$st);
});

In CSS, the style attribute will override any style elements or stylesheets. If you cannot change the the style attribute, you'll have to use !important. If you can remove the style attribute altogether and place everything in the style element. Or even better, in a separate stylesheet your problem will be fixed.
P.S. The type attribute is required on style elements. This won't fix your problem, but you should change <style> to <style type="text/css">

Update CSS rule property value

I have a html element which is styled (using jquery) with a background image targeted thru its class name.
When I remove the class the background image stays - which is not what I expected or want.
test.html
<div id='log' class='tile'>HELLOWORLD</div>
test.css
.tile{
background: none;
}
test.js
$('.tile').css("background-image", "url(tile.jpg)"); // We see image
$('#log').toggleClass('tile'); // We still see image
After banging my head I think I know whats happening. The css is being applied to the element - NOT to the 'class'.
How can I target a specific css rule so that its key values can be updated?
If that makes sense.

If you wan to change the css rules of the ".tile" class, then you can do it.
There is a post that explains it very well :
function changeBackgroundImage(className, value){
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var ss = document.styleSheets;
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText === className) {
rules[j].style.backgroundImage = value;
}
}
}
}
You can call it like this :
changeBackgroundImage(".tile","url(tile.jpg)");

The problem is that you´re setting the background-image as an inline stlye that overrides any stylesheet rules. Toggling the class won´t have any affect.
You can either have set the background through a styleheet rule and then add a class that removes it;
#log {
background-image: url(tile.jpg);
}
#log.tile {
background: none;
}
or you could just use !important as;
.tile {
background: none !important;
}
...it might be the other way around but you get the point? :)

try removing class tile and applying new class with bg: none
in effect - when needed apply class with bg, when not needed - without

No need for jQuery in this case. You can use plain old JavaScript. Check out this tutorial:
javascriptkit.com - Changing external style sheets using the DOM

You can't change the class itself without re-writing that declaration in the stylesheet, you ARE working only with the element in the selector.
Try:
$('.tile').css("background-image","none")

$('#log').toggleClass('tile',true);

I would make the background image part of the class as a css style:
.tile {background-image: url('tile.jpg')};
and then remove the class when necessary with jquery
$('#log').removeClass('tile');

you could have two classes in your css...
.tile{
background: none;
}
.tile-w-image
{
background-image: url(tile.jpg);
}
and then with jquery just toggle the classes...
$("#log").toggleClass('tile').toggleClass('tile-w-image');
I'm sure this is just one of many ways of doing this. I hope it helps.

You are very close.
It seems like you are adding inline CSS to your element and then trying to toggle the class. You should keep CSS styling separate in most cases:
HTML:
<div id='log' class='tile'>HELLOWORLD</div>
jQuery (I imagine this should be done on click or another event):
$('#log').toggleClass('tile'); // We still see image
If the "tile" class is already written to the HTML, then toggle-ing it will remove it.
CSS:
.tile{
background-image: url(tile.jpg);
}

Fancybox - Can't Set CSS with jQuery?

I was trying to adjust the position of my Fancybox with jQuery:
$('#fancybox-wrap').css("top", "200px !important");
And it wasn't working at all even with the !important bit. However if I simply do it with CSS, it's an OK deal:
#fancybox-wrap {
top: 200px !important;
}
Which leaves me really curious: is there something inside Fancybox' codes that's preventing me from changing the wrapper's CSS via JavaScript?

The css function put styles in style attribute. Some navigators seem to not allow usage of !important in inline style. But inline style should overpass css rule even if it is "important". So
$('#fancybox-wrap').css("top", "200px");
should work?

May be not a nice way but you can go this:
cssString = $('#fancybox-wrap').attr("style");
cssString = cssString.replace("top: 200px", "top: 200px !important");
$('#fancybox-wrap').removeAttr("style").attr("style", cssString);

jQuery css() function changing 'a' property not 'a:hover' property

I'm having a bit of trouble with the jQuery css() function at the moment. It is changing the css value of the anchor element's border-top-color instead of just the anchor element's border-top-color when hovered. Below is my code.
$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");
Why does it change the #header #headerlist li a border-top-color and the #header #headerlist li a:hover properties rather than just the #header #headerlist li a:hover property?

The reason your example doesn't work is because the selector has no way of detecting :hover since that's a pure CSS thing. Instead you might try using the actual jquery hover method:
$("#header #headerlist li a").hover(
function () {
$(this).css("border-top-color", "#FF0000");
},
function () {
$(this).css("border-top-color", "#000000");
}
);
Alternatively, you could also use the addclass method as well:
$("#header #headerlist li a").hover(
function () {
$(this).addClass('hover-highlight');
},
function () {
$(this).removeClass('hover-highlight');
}
);
This could be further simplified to:
$("#header #headerlist li a").hover(function () {
$(this).toggleClass('hover-highlight');
});

I don't know exactly why, but this type of changes are better done in CSS, so I'd suggest that, if you really need to change this through JS, create a CSS class, then change that in JS.
CSS
#header #headerlist li a.fancy-border:hover{
border-top-color: rgb(225, 149, 79);
}
JS
$("#header #headerlist li a").addClass("fancy-border");
That way you can better separate functionality from presentation.

The reason it doesn't work is because the :hover bit doesn't actually give the selector any information about an element.
a:hover in CSS matches on the same exact elements as a, it's just defining a different set of properties for when the user is hovering over those elements.
The jQuery selector is designed to find (select) elements, not to style them.
The css() method simply sets an inline style on the elements that are selected, it does not add or change any actual CSS declarations.
As other have mentioned, you can use the hover() event to get the same behavior. Although, adding a class on the fly is probably better, as another answerer described.
However, if you don't need to make it change on-the-fly, I recommend using plain old CSS since it is faster and does not require a user to have javascript enabled.

This code is broken since 1.9
if($('...').is(':hover')){
$(this).css('set','your styles here')
}
use this instead
var class = '...';
if($(class+':hover').length>0){
$(class).css('set','your styles here');
}

add !important to the hover css to avoid the style is overrided.
for example:
test:hover {
border: 1.5px solid white !important;
color: white !important;
}