I have a ruby on rails application. When clicking on a link which leads to a different page, where no background is set for the body element, the background does not change. It does however if you reload the new page.
I tried overwriting the background image on the new page which the link leads to, but that didn't help either.
All Code can be found here but the links I am talking about are for example Inhaltsverzeichnis github. The CSS I am talking about is
body {
background-image: url(<%= asset_path 'background.jpg' %>);
background-position: center;
background-size: cover;
}
in the corresponding view. It isn't included in the DOM if you click on the link, but is still is shown in browser.
The current master branch is also deployed here.
If you go onto that page and click on "Inhaltsverzeichnis" in the Navbar in the top left of the page you go to a new page and the background image stays. If you now reload the page the background image will vanish and the site looks like it should.
Can someone explain me what I am doing wrong? It looks to me as if the site somehow gets cached incorrectly or something.
Also, the problem only occurs if you click on the links within the page, if you type the url yourself, the page loads correctly in the first place.
Thank you in advance for any help :)
I found out what the problem is.
Rails by default bundles turbolinks, which does not reload the <head> of a new page if you click a link, to make loading pages faster. So as I put my style tags within the <head> of the page, these attributes didn't change until you reloaded the page. The quick fix was to remove turbolinks, but in the long run I will probably try to reintroduce it but then properly configure my page to use it to my advantage.
Related
I have an api (https://api.daihan.top/api/acg) for Random images. I use it for a website background image in css file.I want use F5 to fresh website to have a new background image.
But, in my code, use refresh it doesn't work.Use refresh it is still the old picture.Unless I close the entire webpage and reopen it, it can get a new background image.
And this is my css code:
.mask {
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
background-image: url('https://api.daihan.top/api/acg');
}
I want to use refresh to have new background image, what should I do.
NEW UPDATE:
I found that when in my computer Local environment, I can use refresh o update image. But when I deploy it in github pages, refresh doesn't work.
It's probably caching the API. You could add a request parameter that adds a random number on every refresh, if you apply the style directly on the div, assuming you are using JavaScript. That way GitHub would think you are loading a different API every time and not cache.
Below is an example of how to do that in ReactJS.
style={{backgroundImage: `url('https://api.daihan.top/api/acg'?${Math.floor(Math.random() * 1000)})`}}
Thanks #Authentic-Science solution, I add a random number on css link in html head file and did solve the problem.
This is my new code:
<link rel="stylesheet" id="link" href="./source/main.css">
<script type="text/javascript">
document.getElementById("link").href="./source/main.css?random=" + Math.random();
</script>
In Github pages, when I refresh, it can change the background image.
P.S. I didn't change my css file.
i have a problem while designing my web page in asp.net MVC5.
i'm designing my login and registration page through a file called style.css.
in the begining i put a background image for testing and kept working with the same for few days.now when i'm putting my desired image in its Images file and trying to load it first time of running app its working but when refresh it go to other page it's not being load but the image i worked on previously is appearing even that picture i already deleted from my project plus i checked each and every code its not being called from anywhere.i tried every possible way now looking for help her. For further detail i'm providing the code.
style.css
body {
background:pink ;
background-size: cover;
width:auto;
text-align:center;
}
after refreshing page the background changes from pink to the previous background.
I have the following problem with one of my current projects.
I would like to achieve that when you click on a link which is on a secondarly page, it sends you to the home page but, not at the top of the homepage (by default), I would like that it sends you where a specific ID is.
At the moment I have the following URL in this special link but it doesn't work
link
I have tried different ways I saw in this community but I didn't have luck. At the moment when you click it send you to the homepage but at the top and my ID is almost at the end of the page
How can I fix it please?
Thanks
Kindly use below code on page load. make sure you call this once DOM is loaded. This will scroll the page to this anchor.
location.hash = "#contact-anchor";
I have a strange issue with a particular image URL.
First of all please visit this page with your clean cache (it's an under development Reddit clone in Turkish language, anyway...)
So, the thumbnail image didn't show up right? Nothing, just whitespace right? I mean no thumbnail image unlike this page right?
This is how we are loading the thumbnail image:
<div class="link-thumbnail" style="background-image: url('http://www.herkesebilimteknoloji.com/wp-content/uploads/2017/01/dunya.png');"></div>
Now please visit the image directly with your browser and return back to the problematic page. This time image showed up right?
Eventually my conclusion is; background image is not showing up unless it directly visited and cached by the browser.
So what is the mechanism/reason behind this? As you can imagine by just looking to URL, image's host is a WordPress site. So what could be the trick to prevent this image to load by background-image: url('...') By the way it's loading the image perfectly with <img> tag.
I know some wallpaper web sites doing similar trick but none of them were giving away the image directly without doing a redirection trick. I believe this case is not similar.
And last but not least; how can I handle such a case when using background-image ?
You are loading this image from a different URL / wordpress system. It seems like Wordpress itself prevents images within its "file system" to be loaded as background images from other URLs.
But you can just save that image, put it on your own site and load it from there.
I have two pages, when I link from page one to an anchor in page two it takes me to the right place, but none of the page before the anchor link is loaded. Both pages are php as I'm using an php menu
If i use
<a href="pagetwo.php">
this loads the full page two as expected, no problem
but,
<a href="pagetwo.php#anchor1">
only loads the bottom half of page two, from the anchor1 id. If i refresh the page it remains the same.
I've done links to anchors before in html and no problem, is this an php issue or am I missing something?
I've spent most of day here searching previously asked questions, but nothing similar, if there is one please let me know.
Not sure if I should be tagging php?
Update, Inspected elements(firefox) and all code is there, but its, just not showing above anchor id. Same in Google and ie 8
Another update, saved both pages as html, no change....??
Deleted all php code...no change
Deleted all jquery..no change
Now this has to be something so simple that i'm missing!!
In Firefox problem remains
ie 8 does not work, but when you refresh shows whole page
chrome, loads whole page initially, but then only loads from anchor id
Double checked validation, 2 errors, now correct, still same
My wrapper is set to-
.maincontainer {
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
When I change the overflow to visible the problem goes away, anchor links works perfectly.
But now page is runs on and on...
Now I've changed some bottom margin and padding settings and all works perfectly!
So I've kind of answered my own question....but..that leads me to two more questions!!
Why did the overflow hidden cause the anchor link to display like that?
I more or less solved this by using a process of elimination and then isolating certain elements in the html, which led me to the CSS. How should you go about solving an problem like this?