Develop Reference

Why does using jquery css background.color remove :hover?

Here is an example:
https://jsfiddle.net/6kg43qfr/
Code:
Jquery:
$('#foo').css('background-color', '#f8f7f7');
Html:
<div id="foo">
test
</div>
CSS:
#foo:hover{
background-color: red;
}
Question: Why doesn't the hover work?

That is because how you set the color in your javascript code.
Inline styles has more priority then styles applied to classes or id's
There are actually many rules, of how to properly override styles. Please take a quick look at this http://www.hongkiat.com/blog/css-priority-level/
I strongly suggest you to read more about css before proceeding with the project, in order to keep code clean and maintainable.
in order to fullfill your needs, take a look at this fiddle:
https://jsfiddle.net/6kg43qfr/2/
$('#foo').addClass("green-background")

Because the $('#foo').css() function puts the style in a style attribute on the element, which therefore overrides the stylesheet.

The best solution is:
#foo:hover{
background-color: red;
}
#foo {
background-color: #f8f7f7;
}
Or
You also can use this:
$('#foo').css('background-color', '#f8f7f7').hover(
function(){
$(this).css('background-color','red');
},
function(){
$(this).css('background-color','#f8f7f7');
});

Overwrite auto generated css

I am using a Jquery wysiwyg editor which at runtime automatically adds code to the textarea.
My problem is that it's inserting an inline style of style="width:320px" and I need to take that off as I've already set the styles to make it go 100%
Is there anyway to remove or overwrite that code with jquery
It's basically adding an inline style to a div with a class called wysiwyg...
so:
<div class="wysiwyg" style="width:320px">
The editor I'm having the trouble with is called: jWYSIWYG
Here's a demo url: http://akzhan.github.com/jwysiwyg/help/examples/

If you want to override inline styles you have two options:
Pure CSS:
.wysiwyg {
width: 120px !important;
}
jQuery:
$(".wysiwyg").css({width:120});
If you want to use styles from somewhere else you can also do:
$(".wysiwyg").css({width:"inherit"});

Reset the width using jQuery:
$('.wysiwyg').css('width', '100%');
Alternatively, you could remove the style attribute altogether:
$('.wysiwyg').removeAttr('style');

Have you tried declaring your own CSS with:
!important
eg.
#textarea-id { width: 300px !important; }

You can either define a new css rule with !important, or use jquery:
$("rule target").width(value);

This should work for you:
$('.wysiwyg').removeAttr("style");
or alternatively you can set the width to 100%
$('.wysiwyg').css("width", "100%");

You can remove undesired attributes on server-side with removeAttribute() DOM-method if you have server-side DOM manipulation module.
Or you can try to create your own slightly modified version of your WYSIWYG JS module.

change image opacity using javascript

how can I change image opacity using javascript? I'm going to create a fading effect using javascript, is there any sample? is there anything like image.opacity that can be changed through JS code? how is it set?
thanks

Supposing you're using plain JS (see other answers for jQuery), to change an element's opacity, write:
var element = document.getElementById('id');
element.style.opacity = "0.9";
element.style.filter = 'alpha(opacity=90)'; // IE fallback

You can use CSS to set the opacity, and than use javascript to apply the styles to a certain element in the DOM.
.opClass {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Than use (for example) jQuery to change the style:
$('#element_id').addClass('opClass');
Or with plain javascript, like this:
document.getElementById("element_id").className = "opClass";

In fact, you need to use CSS.
document.getElementById("myDivId").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
It works on FireFox, Chrome and IE.

You could use jQuery's animate or fadeTo.

I'm not sure if you can do this in every browser but you can set the css property of the specified img. Try to work with jQuery which allows you to make css changes much faster and efficiently. in jQuery you will have the options of using .animate(),.fadeTo(),.fadeIn(),.hide("slow"),.show("slow") for example. I mean this CSS snippet should do the work for you:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
Also check out this website where everything further is explained: http://www.w3schools.com/css/css_image_transparency.asp

You could use Jquery indeed or plain good old javascript:
var opacityPercent=30;
document.getElementById("id").style.cssText="opacity:0."+opacityPercent+"; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+opacityPercent+");";
You put this in a function that you call on a setTimeout until the desired opacity is reached

First set the opacity explicitly in your HTML thus:
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity:1"></div>
otherwise it is 0 or null
this is then in my .js file
document.getElementById("fadeButton90").addEventListener("click", function(){
document.getElementById("box").style.opacity = document.getElementById("box").style.opacity*0.90; });

change background using javascript

I have to change the background of a div using JavaScript. I have managed to do that,
using document.getElementById('test').style.background = "url('img/test.jpg')";
Now, how do i change other properties like repeat, scroll,etc?
The css i want for the test is like
background: #f00 url('img/test.jpg') no-repeat fixed 10px 10px;
I cannot use jQuery, since I do not want to include the library for only a small thing.

Instead of setting all the css properties with javascript. I would suggest to create an additional css rule for this element with certain class. And then use javascript to add or remove this class from this element when you need it.
Eg.
function changeBG(){
var element = document.getElementById('test');
element.setAttribute("class", 'newBG'); //For Most Browsers
element.setAttribute("className", 'newBG'); //For IE; harmless to other browsers.
}

Below should work:
document.getElementById('test').style.background = "#f00 url('img/test.jpg') no-repeat fixed 10px 10px"
Or you can use individual properties such as backgroundColor of style object. See here for various properties of style object.

Make a class with those properties, and then just assign/remove that class through javascript.

function displayResult()
{
document.body.style.background="#f3f3f3 url('img_tree.png') no-repeat right top";
}
See following:
http://www.w3schools.com/jsref/prop_style_background.asp

As everyone suggests I also prefer using a class, but if you insist you can use JS for this as you use CSS
document.getElementById('test').style.background = "url('img/test.jpg') no-repeat fixed";

Use next style properties for changing background:
document.getElementById('test').style.background
document.getElementById('test').style.backgroundAttachment
document.getElementById('test').style.backgroundClip
document.getElementById('test').style.backgroundColor
document.getElementById('test').style.backgroundImage
document.getElementById('test').style.backgroundOrigin
document.getElementById('test').style.backgroundPosition
document.getElementById('test').style.backgroundPositionX
document.getElementById('test').style.backgroundPositionY
document.getElementById('test').style.backgroundRepeat
document.getElementById('test').style.backgroundSize
http://msdn.microsoft.com/en-us/library/ms535240%28v=vs.85%29.aspx

This will give the class to the dom element
document.getElementById('test').className = 'cssName'

How do I make an area unclickable with CSS?

Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.

There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;

These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/

I think this one works too:
CSS
pointer-events: none;

if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.

Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>

You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!

If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.