It works in Firefox, but not in Chrome: changing the css property 'background-image' via jQuery.
I'm trying to stylize themes for my website and I have made a few color options, but the background-image property doesn't seem to be changeable via the handler .css in Chrome
$('#h_background').css('background-image',"url('backgrounds/h_"+currentTheme+".png'");
however, it works fine in FF; any suggestions =)?
edit: loading new stylesheets that have the background-image property defined as something else works fine. I do find it strange that explicitly declaring it does not seem to work =(
You're missing a ) at the end of the url after .png'. It should be
"url('backgrounds/h_"+currentTheme+".png')"
Try wrapping your code in load event:
$(window).load(function(){
// your code for the image
});
Related
When I inspect the element in Chrome, the code is being generated with the correct URL – but the image does not display until I either refresh the page or change an attribute of the styling from Chrome's inspector panel. This bug does not occur in Safari.
I've found that if I remove turbolinks, it works in both browsers. As a side note, I am also using jquery.turbolinks gem.
<div id='show-hero' style='background: url("<%= #roaster.roaster_image_url %>") no-repeat center top;'></div>
Any idea would be greatly appreciated.
I've experienced this same behavior when using inline styles to assign background-image in Rails 4 with Turbolinks enabled.
It's hacky, but my current workaround is to assign the background image with a bit of js/jquery at the bottom of the view, and bind it to a page load event (more info on turbolinks and page load events here: https://stackoverflow.com/a/18770589/1769539 )
Here's an example of what your JS might look like:
<script>
function ready() {
$("#show-hero").css({
"background-image":"url(<%= #roaster.roaster_image_url %>)",
"background-repeat":"no-repeat",
"background-position":"center top"
});
};
$(document).ready(ready);
$(document).on('page:load', ready);
</script>
I've got a very strange bug in chrome recently that is when you load the page first time, or in incognito mode that none of the background images show.
when you then F5 the page, the background images all load in.
When you inspect the css it shows the image url in the css panel, however when you mouse over the url it doesn't display a tool tip with a preview of the image.
Neither when you check the downloaded resources are there even any mention of the background-images downloading.
you then refresh the page and it works fine, tool-tip of the css url even shows a preview.
The bug only randomly happens on first load occasionally, no way to guarantee to reproduce this.
Also its worth to note, it you untick then retick the background-image property on chrome it then downloads and displays the image.
I've got a piece of jquery that solves the issue but as you can see its hardly very elegant!
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);
});
this happens on every instance of windows in multiple versions of chrome.
any ideas would be great! thankyou!
you might be able to see it happen on http://ensa.ac.uk
here is a video demonstration # http://youtu.be/oLTyhk5rXgE
Just to note.
The problem had been solved.
The issue was that the browser downloads all the css background images last. So if you refresh the page before its finished downloading the images, when the page loads again it loads from the cache. but because the images did not fully download they dont show correctly.
First of all, fix these:
backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);
If images is a subfolder then use
url('images/logo-bg2.jpg');
instead of
url('/images/logo-bg2.jpg');
in main.css
Try this instead. Not tested though;
$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});
And make relevant changes (ie, background-image to background) in your CSS also.
OR try;
$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});
From some search and research I came to a conclution;
The way I would tackle this is with classes. Have a separate CSS classes for each of the states, then simply use jQuery to change the class. This would ensure that all of the images are actually downloaded and available when you set the class -- which is where I think Chrome is failing (probably all WebKit browsers would do this)
Change css class as:
#nav
{
background-image: url(../images/logo-bg2.jpg);
height: 180px;
}
Owen,
I still see this problem on the application that I'm working on. I know this is also a hacky solution, but it's a little less hacky than the jquery solution that you had posted. I simply threw a version number based on time after the css include and it
e.g.
" rel="stylesheet" type="text/css" />
I know that this causes the css to never be cached, but I have not found any other solution.
I have a page that works fine in most browsers(Safari, FF, Chrome, IE9) but on IE8 it won't show the body background color. It shows the Body bgcolor as white. In the Developer Tools, I see that it is overriding all the CSS and getting some background-color:#fff from somewhere.
I have my scripts (jquery 1.6.2) just before the closing tag as is suggested on the HTML5 Boilerplate (html5boilerpate.com) - not sure if not having the scripts in the head section causes this behaviour?
Anyone any ideas ? This is really weird.
A couple things to try.
Toy with the load order of your css files. Whatever is loaded last will be the style if you don't specify !important
Inspect your rendered html for inline <style/> blocks as they could be causing trouble and not show up in the style tab as a specific css file.
When in doubt target background-color directly as background will
sometimes be overridden by a background-color property
body{background-color:#e6e6e6}
If that doesnt work you could force
override it with body{background-color:#e6e6e6 !important}.
Background color not working on Internet Explorer (IE)
IE apply some filter before rendering web page . that's why some page colors changed .
you can add following line in your CSS file to avoid it.
filter: none !important;
Scanning through the blueprint css, it looks like the background color #fff is being set in two different locations: textarea and in a select box. Try removing the background color property from textarea and see if that helps, or even better comment out the blueprint references to see if that's causing the problem. Seems like 9 out of 10 times a property gets overridden in IE its because a third party library is assigning a diff property to the same element.
As usual I developed it in Firefox. Usually it works without modification in Chrome/Safari, and also IE8.
But when I tested on Chrome and Safari, I was surprised to see that it does not work.
My CSS is valid (validated on w3c). The JavaScript (using jQuery) seems to be valid too.
The affected elements are not redrawn after an attribute value is modified through jQuery, so the CSS rules for the new attribute value are not applied, not until I go into the Chrome inspector and deselect/select them manually...
Update: I do not have a working link for this problem anymore.
The problem was that Webkit was not "redrawing" when attributes were changed, but only when classes where changed, so CSS blocks with selectors such as div[attr=value] would not apply when attribute attr was changed to value through JavaScript.
One workaround is to use classes instead of attributes (.className) in selectors. Performing a class change after changing an attribute would also trigger a redraw also fix the problem.
This post is more than 5 years old, I believe the problem has been fixed in Chrome now.
The issues seems to come from the fact you are using attributes (selected attribute on DIVs) to control the state of your images; it seems like the webkit engine doesn't update the graphics until something actually changes - like a class or a style property.
In general, you should know that using a custom attribute like that isn't best practice. You can use a class to indicate when it's on, and .addClass("selected"),.removeClass("selected") when needed.
Also, you can display the images as background image of an element and control it directly from CSS, with:
.item div.caption { background-image: url('bras/B/btn.png'); }
.item.selected div.caption { background-image: url('bras/B/btn_selected.png'); }
this will simply change the image according to the div.item selected class.
For a simple work-around, you could add at the bottom of your .click handler something like $("body").toggleClass("somethingrandom");, but I really recommend to change your code to work with CSS, background-images and classes.
Do you need to modify the attribute value only? Could quite easily add a 'selected' class to the <div class="item" /> instead/as well. Using this alone/as well as your attribute targeted css will automatically update the images display.
Have you opened the error console within Safari yet?
In mine, I'm getting 404 errors on two files...
/bras/bras/A/3/2/1/bra.png
and
/bras/bras/A/1/pink/3/bra.png
EDIT:
You also have a </head> tag at the very end of your document instead of a </html> tag.
I have a web application made in ASP.Net. Well, I have a few jquery server controls I made. Well, I just now started to bother with getting a "proper" jquery running with a theme and everything. So I replaced my old default jquery theme with a custom one and such and now everything is completely different.
From firebug it says that everything I assign just about is getting reset by .ui-helper-reset inside of jquery. How do I prevent this from happening? I would like to be able to set like font-size and such as the <body> level and not have to worry about it for each individual element, but it seems to reset the font size to something much larger than I use. the computed font-height is 17px!
I'm not understanding why it would do a CSS reset on each individual element that I add with jquery...
Edit:
Ok, I just figured out some silly mistake for why my site "was" working. Well, I didn't include the theme's style sheet in the page. Now I have it included and thus I have the problems. But my problem still stands. I don't understand why the CSS Reset is happening on each element.
Just a wild guess ...
How about applying your css AFTER it has been reset with jquery? Perhaps with:
$(document).ready(function() {
var mycss = document.createElement("link");
$(mycss).attr("rel", "stylesheet").attr("type", "text/css").attr("href", 'your-css-filename');
});
If $(document).ready is still early, you can put the code inside a function and call it with setTimeout().