javascript - Change div background image, js works in chrome but not ie or firefox? -
javascript - Change div background image, js works in chrome but not ie or firefox? -
basically want user able click , alter background, , there multiple backgrounds, specific div.
this works in google chrome not in ie or firefox.
html:
<div id="palette"> <div class="lightblue"></div> <div class="gold"></div> <div class="aqua"></div> </div> <div id="primary"> </div>
css:
#palette { border: 2px solid white; width: 25px; } #palette div { height: 25px; width: 25px; } .lightblue { background: lightblue url(http://www.textureking.com/content/img/stock/big/dsc_4279.jpg); } .gold { background: gold url(http://www.textureking.com/content/img/stock/big/dsc_4287.jpg); } .aqua { background: aqua url(http://www.textureking.com/content/img/stock/big/dsc_4274.jpg);
}
js:
$(document).ready(function() { // attach onclick event palette colors $('#palette div').on('click', function() { // background of selected palette color var bg = $(this).css('background'); // alter background of body $('#primary').css({ 'background': bg }); }); });
http://jsfiddle.net/knutq/1/
it's not showing errors , other javascripts run, i'm not sure problem is.
if it's easy prepare please leave answer, if not seek way: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backgroundimage
according css specification getting computed style of shorthand should not homecoming anything. need list out individual properties i've done below.
perhaps css spec or chrome alter in future @ moment firefox , ie's behaviour correct.
$(document).ready(function() { // attach onclick event palette colors $('#palette div').on('click', function() { // background of selected palette color var backgrounds = $(this).css(['background-color','background-image', 'background-repeat', 'background-attachment', 'background-position']); // alter background of body $('body').css(backgrounds); }); });
javascript jquery internet-explorer google-chrome firefox
Comments
Post a Comment