I have an inline style on element on one of my templates.
- hero_image = article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
It works marvelously for me. Except when I go to another link and the use the back button to return the page.
When I use the back button to return the page, the inspector the source is the exactly the same, but no image. When I refresh the page, same code, but the image is there. Seriously weird and annoying.
I've seen reports of this being a bug in Chrome related to background-attachment:fixed; but the work arounds they suggest don't work.
Is there a way to force (via Turbolinks?) this element to refresh?
It turns out that the issue is fixed by adding the base url to the url like so:
- hero_image = base_url + article.hero.url(:medium) if article.hero.url
%article{style: "background-image: url('#{hero_image}');background-attachment : fixed;"}
(I added a base_url helper thanks to this: https://stackoverflow.com/a/2952576/1291663)
I've run into the same problem on my app, trying to display user avatars.
There are (many) bug reports related to this particular situation dating back a couple of years, but the bug is still present as of time of this writing.
The solution I've gone with is to replace the background with an actual img tag, and than use z-index tricks to push it back.
Related
I am trying to debug a Wordpress issue where a is being auto inserted before the end of the <script> tag, hence breaking the javascript.
If I view the element with the inspector, I can see a as shown below:
However if I viewsource, or download the html page and look at it, there is no :
});
});
setTheRepeaterButton();
});
</script></p>
At first i thought it was a chrome bug, but I get the exact same behaviour in firefox.
I would think there is no , however the script is broken which implies there is one. Which is correct, the inspector or the page source?
It looks like there is a hidden/invisible character before the final } in the script. Depending on your code editor, you can toggle a setting to view hidden characters or add a plugin (e.g. nbsp-vscode for VS Code).
Or the easiest solution is to delete the space between that } and the preceding ; and redo the code formatting.
I have developed my portfolio and locally everything works good, though when I upload it on my hosting the CSS renders differently.
I have hard refreshed on Chrome and tried also on Firefox, but still stays different.
What can be the problem and the solution?
This is my network tab
Thanks!
CSS is auto cached by Cloudflare when it is on, try putting “.css?newcache0x” in your HTML tag, where X you add +1 every time you change something in your CSS file, so it will create a new cache.
Example:
< link rel=“stylesheet” href="…/bootstrap-3.3.7/css/bootstrap.min.css?newcache01" >
I have a question.
I am currently building a "blog" website. Not that it matters but..
I am trying to set my background to be a specific image that i have.
And it used to work! Until recently and I just don't know why it wont.
It works when i am on my computer, everything works fine.
But i am using 000Webhost as the hoster for the website.
So if u go to "http://pontuslundhblogg.uphero.com/"
You might see that the website is completely white. Cause the picture wont load for the background.
In my css sheet, i am using:
body {
background-image: url("bakgrund.jpg");
And yes, i did name the picture bakgrund.jpg and uploaded it to 000webhost. Its the exact same name etc. I wondering.. Could two different css stylesheets make so it gets weird or something? Cause I added a second css style sheet to be able to have a drop-down menu in a different sheet, and i added the drop-menu. Around that time it started messing with me..
Is it me doing something wrong.
Or is it 000Webhost?
(Might add that none of my pictures is working now, i can also contribute with more code if needed!)
If you go to pontuslundhblogg.uphero.com/bakgrund.jpg you get a message
"The image pontuslundhblogg.uphero.com/bakgrund.jpg cannot be
displayed because it contains errors".
If you go to pontuslundhblogg.uphero.com/bakgrund1.jpg you get 404 page, which means that the first path (bakgrund.jpg) is correct - but the image itself isn't good.
Try to upload it again or contact the hosting service.
If you use FTP maybe you need to change something in your FTP program settings - maybe change from ASCII to Binary transfer.
http://www.inmotionhosting.com/support/website/file-management/corrupt-file-ftp-transfer
I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.
I'm creating a hidden iframe specifically to be used for printing in IE6.
Here's a basic outline of the code with some HTML population cut out:
$('body').append('<iframe id="printIFrame"></iframe>');
$("iframe#printIFrame").attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
$("iframe#printIFrame").load(function()
{
document.getElementById("printIFrame").contentWindow.document.title = "My Title";
var iframe = document.getElementById("printIFrame");
iframe.contentWindow.focus();
iframe.contentWindow.print();
$("iframe#printIFrame").remove();
});
This is working quite well, except for the ugly "about:blank" that shows at the bottom left hand of each printed page. I guess since I'm making this iframe on the fly the source (as IE6 sees it) is about:blank. Is there any way to fake the src or change what gets printed there? I tried setting the src right before printing, but obviously that changes the iframe to a new page and prints that. Any ideas?
You can not get this done without changing the src ahead of time, like you described. This is IE we're talking about. It's the single browser least likely to support anything fancy it could get away with not supporting.
(Though, for the record, I haven't heard of being able to override print metadata in any other browser, either.)
I did find an ActiveX plugin which claims you can modify the header/footer of the printout on the fly.
http://www.meadroid.com/sx_intro.asp
Alternatively, it can be changed permanently by going to Page Setup from the File menu in IE6. However I'm trying to avoid an ActiveX plugin if possible; I'm wondering if there is an easy way to change the header or footer through javascript. Any other ideas?