i am hosting a website on hostinger and whenever i do a change in the CSS file it reflects the changes on some of my website users while it doesnt change for others, i figured it might be because it gets cached for some users..
I tried to add the "?v=1.0" at the end of the CSS file link to try to get the browser to reload the file for the users but there was no changes. Then i tried to change the WHOLE name of the CSS file and it worked for SOME users but still not for everyone. I tried to add CONTENT="NO CACHE" and it had no effect either. I also noticed that most of the problems are for users using Google Chrome..
Here is how i normally link my CSS file:
<link href="nav.css" rel="stylesheet" type="text/css" />
What i am looking for is that whenever i do a change in my CSS file it would get reloaded for all users and not stay on the old cached version since i dont want nor will it be effecient to ask users to clear their cache every time i make a change.
I'm unsure why versions don't work, so maybe someone more experienced can pitch in on that, but in the meanwhile you can use something like:
<link href="style.css?key=<?php echo time(); ?>" type="text/css" rel="stylesheet" />
This will, however, force the user to load the css upon every single visit to the site and affect your sites performance, so remove when the site goes live.
Try to "Empty cache and hard reload" in the webbrowser. (CTRL + F5 in your webbrowser)
Related
I am writing an HTML code and have linked it to an external CSS file. My CSS file was working normally, but suddenly any extra change I make was not reflected to my HTML. I deleted some CSS code to check if anything will change but nothing happened.
For example, I wrote a code to change the background color of my <body> tag to blue:
body {margin:0px; width:100%;font-family:sans-serif; background:#333; color:#d0d0d0;}
When I delete that code then nothing changes and the background is still blue. I have made a research about that problem and some say that this is because Chrome is caching my file.
Could you please advise?
can you paste some code?
or else I don't understand the problem, ill try help as quick as I can!
The problem is due to Browser Caching.
You can use a strategy to bust the cache.
I personally use versioning the Query String Strategy to resolve this issue.
I do it by adding a version number in the linked resource like below:
<link rel="stylesheet" href="style.css?v=3.4.1">
You can change the version number before publishing the website.
For local debugging, you can use Ctrl + F5, it'll hard reload the website and request all the resources from the server.
I'm using Atom and it's HTML preview feature. If I change my CSS file, nothing happens. But then if I go to my HTML file and make any change, even just adding a space somewhere, everything updates.
I've referenced my CSS file in my HTML file as:
<link rel="stylesheet" type="text/css" href="css/style.css">
Help?
If I understand the question correctly, you are making updates to your files but when you refresh the page in the browser, you are not seeing the style changes getting applied.
If that is the case, you can do a hard reload of the page by clicking Ctrl + F5
More information here: https://refreshyourcache.com/en/cache/
If your stylesheets are external file, then your browser may store it somewhere and loads the old content. If you use Google Chrome, then press F12, navigate mouse to refresh page button (with <- and ->) buttons and right click it, you will see options on how much you want to reload. :)
Is this what you asked?
Because this is what happens to me, when I do not reload the page completely.. Before it, no new content of externa files is updated.
guys I closed and opened Atom and it fixed the updating problem but I've still got the drop down menu problem. I think I'll create a new post for that since it's probably code-related
My site has a quiz, and after each question is answered, there is a 'next' link. Since most of the time the user will go to the next question, I'd like to prerender the page.
So I put this in the <head>
<link rel="prerender" href="/">
and this in the <body>
Next
I tried it in Chrome and Firefox and it's not working. What could I be doing wrong?
I also tried putting the full address in the link
<link rel="prerender" href="https://example.com">
but that didn't work either.
It looks like you are using XHMLHttpRequests. According to this doc: https://www.chromium.org/developers/design-documents/prerender a XHML Post request will cancel the prerender and stop it from being swapped in.
I imagine this will be difficult to solve as the server will require the post data from the user before it can safely render the page. So, in this situation the prerended document will always be discarded and a new document will be rendered.
HERE there is a page that maybe the visitors would print. If you try to print it's a mess. I know that there is proper media queries to do that but I think it takes a a lot of work.
So my question is this: is there a way to open a external/existing PDF when I decide to print the page? I mean when I click the print botton of the browser, not a custom botton on the page.
Thanks guys :)
I think it is impossible to do this that way. But really, don't be afraid of media types.
Here are some ideas:
1 - BEST) Style media = print: http://www.w3schools.com/css/css_mediatypes.asp
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
And Use another style sheet for printer media. This is the best solution, and this style can be really minimal.
2) Use some kind of converter (html to PDF) and convert each page that You want to 'be printable'. Then place Print icon somewhere on the page which is the link to pdf version. You can also map CTRL + P using JQuery for example, and run download pdf dialog.
It is not a good solution in my opinion, every new page = total mess and converrting, and... Not worth. It should be done automatically.
3) I don't know what kind of files are U using, but if it is simple html, U can run bash script using PHP that converts the page using for example html2pdf converter on the fly. Then, U can make the printer friendly version icon, and redirect someone to a php script which make pdf and display it. But here also You need a new icon, and File print doesn't work.
So the solution 1 is the best I think...
Hope it helps :)
PS. Media types are not so time consuming. You make only few changes. Navigation display hidden, font size, img display and that's really all. And You can do it once. Converting must be done multi, multi, multiple times :). If You have any questions about 2, and 3 solution write, I can help to make a sketch of them :).
I have restricted the right click option in my web page, but in IE it shows icons to Save Image, Print, Mail etc . I want to remove all of these. Is this possible?
It seems like everyone else who answered here didn’t read the question.
I have restricted right clicking option in my web page , But IN IE it shows Icons to Save Image, print , mail etc . I want to remove all of these . IS it possible ??
Yes, it is possible to remove these icons. Just put the following in the <head> of your document.
<meta http-equiv="imagetoolbar" content="no" />
As mentioned in the other answers, users will still be able to get the images if they really want to, no matter how hard you try to prevent it. If you don’t want the images to be copied, you shouldn’t use them on a website.
It sounds like you're talking about the Image Toolbar in Internet Explorer. You can disable it with this code:
<html>
<head>
<meta http-equiv="imagetoolbar" content="no" />
</head>
</html>
Or, directly applied to an image:
<img src="test.gif" galleryimg="no" />
No it's not possible. The user can see the image in the browser and thus the browser (and the user) has a copy. You can try and restrict that with nasty (and ill-advised) right-click JS hacks and the like but ultimately if you send something to someone to see or read, what they do with it is beyond your control when you don't control the device they're using.
You can only do so much to prevent some users. To be near 100% foolproof, it's probably impossible. Even if you packaged the images in say, flash, java applet, it doesn't stop users from doing screencapture too.
There are few passive alternatives, e.g. using watermarks, putting up discalimers/warnings.
Here are some related SO posts:
How to disable right-click save on one specific image only
Disable “Save Target As” option in the right click menu
Prevent Save As Functionality
Prevent users from downloading images it's a waste of time because even if they cannot download the image, they always could do an screenshot :-(
if you are using Apache server, you can disable accessing the image through absolute url
the images can be access only with relative url with this htaccess code :
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
in addition, disable the right click context using JavaScript, and add a watermark to protect the copy rights
this will reduce the chance of saving the images
You cannot prevent the downloading of your images. Just by viewing them, the browser caches them.
If the browser can get it, then the user can somehow get it.
You could investigate using an HTML5 canvas or even (gasp) pixelized tables to render client-side.
.show_IMAGE
{
background-position : 0 -100px;
background-image : url('/images/flower.png');
background-repeat : no-repeat;width:50px;height:50px;
}
and add this class to DIV
< div class="show_IMAGE"></ div>
you cannot copy the image alone. if you get image from CSS.
You may try following steps:
Disable right click function on your website.
Disable image dragging on the image you want draggable="false"
Now your website is image theft protected!