Develop Reference

Html Can you run css code from javascript?

I am making a canvas on my website that you can draw on. To achive this effect I draw a fillRect everytime the mouse moves, at the mouseposition. Everithin works fine but when i try to add a background image, it hides everything. I tried using canvas.drawImage();
Then I found that you can add Background image from CSS, using: background:url(pic1.jpg);
This workes fine, but I dont want to the image to be there from load, but load when the user clickes a button. Anny Idea how to do this? Can I call the CSS from Java like you can from HTML, or is there another way. Thanks for answers

You can use JavaScript to programmatically set the CSS that defines the background.
var img = "some_image.png";
element.style.backgroundImage = "url(" + img + ")";
Make sure to change the element with the actual HTML element you want to set the background image on.

You can use HTML DOM to do this like the code below
<button type="button"
onclick="document.getElementById('id').style.backgroundImage = "url('image.png')"">
Click Me!</button>

You need something like that:
handling the event (in thi example click)
Append the new css property to the element target
function appendImg() {
document.getElementById('result').style.backgroundImage = 'url(http://4.bp.blogspot.com/-Q13U4dlElI8/VSW78iey57I/AAAAAAAAI7k/HO3zYPaRYso/s1600/img_john_lennon2-500.jpg)';
}
#result {
width: 500px;
height: 400px;
background-size: 100% auto;
background-repeat: no-repeat;
visibility: visible;
}
<button onclick="appendImg()">Imagine</button>
<hr>
<div id="result"></div>

Change image in CSS?

I'm trying to adapt a template for my website. I'm no CSS guru, but I'm trying to find a way to change images on a timer. Problem is, the template is CSS and I don't know how to make a very simple slideshow. I'd just like to change the image every 5 seconds or so.
Here's what I have in the html file:
<div id="mainPicture">
<div class="picture">
<div id="headerTitle">Header Text</div>
<div id="headerSubtext">Header Subtext</div>
</div>
</div>
Here's the CSS stuff:
#mainPicture
{
clear:both;
width:670px;
height:345px;
background-color:#160306;
}
#mainPicture .picture
{
position:relative;
width:650px;
height:325px;
top:10px;
margin-left:10px;
background-image:url(LOGO2.jpg);
background-repeat:no-repeat;
}
Any way to change the image url every few seconds to a different file?

That is not possible with just CSS. you need to leverage some sort of JavaScript to get this done as you said after an Interval of 5 seconds. You might want to use setTimeout() function. I had writted a script to change the background color of the page using JavaSCript. You might want to leverage this to change the image instead of the background color:
Here is the link:
http://codeforbrowser.com/blog/changing-background-color-using-javascript-and-jquery/
And below is the DEMO:
http://jsfiddle.net/refhat/gJWFR/1/

I would suggest looking into some of the CSS3 properties, if it has to be strictly CSS. Otherwise I would look into Jquery.
Here is a link to CSS3
http://www.w3schools.com/css3/css3_transitions.asp

Changing the background-Image using Jquery causing a flickering kind of effect

Following is the portion of the script which I am using to create a slider by changing the background image for every imageobject I have for a cycle of time.
#Sliderimg - height is 500px,
$("#Sliderimg").css({
"background-image": "url(../Images/" +SliderImageObj.image + ")",
"display": "block",
"z-index": "50px"
});
What could have gone wrong with this as I'm getting the flickering effect every time I change the image, My problem is not with the new image about to load, its flickering(flashing on to the bottom of the screen) for the old image which is about to be replaced.

You see a flicker because every time you change the background image, your browser has to download it before it can show the background. If the images aren't too big (more than say, 5kb) you can try caching them in the browser by applying them to elements where they won't show up.
Also, 50px isn't a valid z-index, that property requires integers only.

Maybe delete "px" from your z-index atribute? It take decimal values.

the browser is forced to redraw the entire background.
how this is done is by setting background to white and then redrawing the new background.
use jquery.animate() to battle this.

I had the same issue the other day. Oddly enough, it seemed to be OK in FF, but would flicker in IE, Chrome, and sometimes Safari. The solution is to use a css sprite sheet. You create an image that has both backgrounds next to each other. You only show a portion of the background sheet. you toggle it by adjusting the margin on the background. You can handle the margin adjustments using addClass and removeClass. Below is code, see here for a fiddle: http://jsfiddle.net/fMhMY/
CSS
.navButton span{
width:32px;
height:32px;
display:block;
}
a.leftButton span, a#leftButton span{
background-image:url(Prev.png);
background-position:-64px 0px;
}
/*nav button sprites */
/*sprite order is pushed, hover, natural */
a.leftButton.navOver span, a.rightButton.navOver span{
background-position:-32px 0px;
}
a.leftButton.navPressed span, a.rightButton.navPressed span{
background-position:0px 0px;
}
HTML
<div style='display:inline-block'>
<a href="javascript:void(0);" class="leftButton navButton" id='lefty'>
<span></span>
</a>
</div>
jQuery
$('.leftButton').mousedown(function() {
$('.leftButton').addClass('navPressed');
console.log('mousedown');
});
$('.leftButton').mouseup(function() {
$('.leftButton').removeClass('navPressed');
console.log('mouseup');
});
$('.leftButton').hover(function() {
$('.leftButton').addClass('navOver');
console.log('hover');
});
$('.leftButton').mouseout(function() {
$('.leftButton').removeClass('navPressed').removeClass('navOver');
console.log('mouseout');
});

HTML/CSS "Pop-Up" Window and Disabled Background

This is a silly question since I can't find the right keywords to use to get the answer by searching Google, unfortunately.
You know when you click a link and the background dims and becomes unusable but the foreground either has an image or a sign-in box usually? Like the Yahoo mail image displaying method where everything in the background becomes grey transparent and the image itself is just fine?
How is that done? And what is it called?

it's done by creating an overlaying div on the fly in JS, like:
var gab = document.createElement('div');
gab.setAttribute('id', 'OVER');
gab.innerHTML='<div class="overlay"><h1>hello</h1></div>';
document.body.appendChild(gab);
use a CSS class like
#OVER{width:100%; height:100%; left:0;/*IE*/ top:0; text-align:center; z-index:5; position:fixed; background-color:#fff;}
.overlay {width:100%; z-index:6; left:0;/*IE*/ top:30%; font-color:#cdcdcd; font-size:0.8em; text-align:center; position:fixed; background-color:#000;}
dunno how it's called ..

You want to create a "modal box" or "lightbox". Examples:
http://fancybox.net/
http://www.huddletogether.com/projects/lightbox2/

thickbox
eg: http://jquery.com/demo/thickbox/

For images and stuff i use prettyphoto
For text popup Dialog
this is all done with the use of jquery a javascript

You can use smoothbox, along with mootools.

Why does graphics have ugly black borders in IE after alpha animation?

The site I'm working on opens with a fancy jQuery opacity animation. Currently It's working in all browsers, but in IE all text and alpha images are left with ugly black borders that makes the text practically unreadable.
Is there some clever javascript command i can run to refresh/update the graphics?
Any other way to fix this?
My problem is entirely css and javascript related, so all source code can be found following the link.
Thanks for any help!
http://xistence.org/dev/

After an animation involving the opacity, you will want to clear the opacity value (back to a default of no value) to fix this mangled antialiasing in IE. Try this jQuery on the section in question after the animation is complete (e.g. in a callback):
$('.item').css('filter','');

This question probably has the answer you are looking for:
jquery cycle IE7 transparent png problem
from #darkoz's answer:
The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>

This snippet of jQuery code has served me well when dealing with opacity issues in IE.
$(function() {
if (jQuery.browser.msie)
$('img[src$=.png]').each(function() {
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
});
})

Define a solid background color to your image:
.container img {
background-color: white;
}
Define the background-image css property of your image to its src attribute:
$('.holder-thumbs li a img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
Advantage: you don't need to change your markup
Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.