CSS file works offline but not when uploaded to webserver [duplicate] - javascript

This question already has answers here:
How to force browsers to reload cached CSS and JS files?
(57 answers)
Closed 2 years ago.
I just completed my portfolio website and uploaded it to a subdomain of my parent website.
Now the website works fine except that my main styling CSS doesn't work, no errors in the console, nothing. It just doesn't work. I verified it by placing the CSS in <style> tags in the head of my index.html and it worked but then it messed up with my paroller.js plugin, no errors in the console but paroller.js stopped working.
If I include the CSS like I've included it offline (in a separate file, like I always do and it always works on the same web server) it just doens't work. If I include it in the index.html my paroller.js plugin stops working.
Everything works fine offline.
I'm importing the CSS like this - <link rel="stylesheet" href="folername/filename.css">
Please note that I am loading multiple CSSs and this one is the first to be loaded. All other CSSs seem to be working.
The webpage is located at - https://yadullah.piware.tech

I noticed something strange... I accessed the main CSS and JS files using yadullah.piware.tech/foldername/filename and noticed that the files weren't updated. I refreshed the page a couple of times and they updated themselves.
The webpage is working perfectly now.
I believe this has happened due to the server taking time to update/replace the updated files. Still, if anyone has got any better explanation for this please let me know.

Related

CSS not saving in Live Server (VS CODE)

I started learning VS Code through Udemy and I already have one problem that I can't find answer anywhere. In the project I have index.html, style.css and script.js. Now when I try to save the html, the page reloads and everything from the html is applied, the same with javascript, but when I try to save the CSS, the page reloads but everything from the CSS is not applied to the page.
How can I fix this?
First try to add internal CSS then it works check that you correctly linked your style.css and js to index.html.if you provide a screen shot of your vs code i think it's better and easy to give a solution because when linking to html you need to mention correctly file paths.
Make sure that your style.css is linked correctly to your html page.
Then clear the cache of your browser when you reload.
On chrome => ctrl + f5

Loading js multiple times – Chrome problem

I am trying to use external js file to load content in divs.
The js file needs to be loaded as much as divs loaded.
For example:
<div class="classname1" userId="101010" unitId="111"></div>
<script src="//example.com/js/thefile.js"></script>
<div class="classname2" userId="101010" unitId="222"></div>
<script src="//example.com/js/thefile.js"></script>
<div class="classname2" userId="101010" unitId="333"></div>
<script src="//example.com/js/thefile.js"></script>
This code will be provided to the users to embed it in their websites. Say, it would be embeded in example2.com and example3.com.
When the js loads at thise sites, the code reads the attributes and depending on them it shows the related content inside the div.
The script works fine in Firefox (eg: if there are 3 pieces of embed code, then the browser shows 3 contents), but it doesn't work well on Chrome (it shows one content only).
As I noted that, Chrome detects the number of js loads, for example 3 times, however the first piece of code works and the other pieces doesn't.
Note: when I used a trick it worked in Chrome, but I don't want to use this easy solution: I changed the src url for each embed code by adding ?v=1 , ?v=2 and ?v=3 after the .js file.
Any ideas for solving this issue will be appreciated.
The real problem here isn't that the file wasn't loaded 3 times, rather it's that the code wasn't executed three times.
Browsers are expected to cache the files. And, you can expect inconsistent behaviour around what happens when same file's included more than once. Using a nonce, like v1 etc will disable caching. The best thing to do here would be wrap the functionality of your JS file in a function, and then load the file only once. You can simply call the function three times, or as many times as required.

Load multiple external css issue

I found an example here https://code.google.com/p/fastcssloader/ for loading several stylesheets using only 1 link rel=...
Everything worked fine until I tried to use the code linked above.
My link code:
<link rel="stylesheet" type="text/css" href="/styles/css_include.php" />
I literally copied the code and put the above .php in the directory where my styleshees are but no matter which style I choose from the options page I created (which stores a cookie telling which stylesheet to load on all pages) it always loads the second one in that directory. Any idea what is happening?
EDIT: This was using Chrome. Apparently the second stylesheet is cached somewhere (even though I must have pressed ctrl f5 a dozen times) because when I open the page in IE8 (dont ask) the stylesheet is not loaded at all. What am I doing wrong? Why doesn't the code load the stylesheets even though I copied it exactly? Is it the directory? I tried making the directory "." and "/styles" and a combination of them all.
EDIT: I moved the css_include.php file into the directory where my pages are stored and referenced it accordingly and now it doesn't load any stylesheet at all, so at least keeping css_include.php in the /styles directory loaded SOMETHING. I am at a loss here...

Including javascript function, does not work on android

i'm trying to solve a strange problem. I have realized a personnalized project for 2 weeks ago creating personnalized widget and event on them and as a result i want to deploy it on my android device.
For example, this link : http://jsfiddle.net/fc8hL/ show you a checkBox example :
--> first div is a container which can include many checkboxes
--> second div is a checkbox container
--> three img in the previous div are differents images which appear according to mouse/touch event on the checkbox.
--> the js function "check(e)" allows me to treat these 3 images and the event.
THIS FUNCTION WORKS PERFECTLY on both my local computer and my android device! i have realized some others functions in order to put in the HTML buttons, radio and comboBox.
Some events are attributed to this widgets.
Problem is : the final html file is huge : indeed, there is one function per img and i would like to optimize it creating javascript file. That is easy, i just put
<script "checkBox.js"> ***My existing function that works !***
</script>
And when i open my html file... surprise ! that works on my local computer, but not on my android device... Are you seeing an issue for this problem ?
Ok guys,
i have debugged my program thanks to epascarello link, and i found my problem.
On my remote computer, an error is showing :
"Failed to load resource: the server responded with a status of 403 (Forbidden)"
All my files are on a server and i didn't change reading options on them, that's why i couldn't access to all javascripts functions included in these files. Bad mistake...
Thanks a lot for your help :)

Downloaded aspx website does not display well

I have downloaded a aspx webpage and saved it as html. I open it in IE and chrome and it takes time to load + some parts are missing. All the text is there but the onmouseover is not working properly and some css is not displaying correctly. Was the content not downloaded completely? i.e is it missing sme javascript, css or else?
I have done what you describe on many occasions for the purposes of putting together a prototype of new functionality in an existing application.
You will likely need to do a couple of things:
Ensure the paths to your JS and CSS resources are right (removing the unneccessary JS files, if any)
Also, you will likely need to update the paths in your CSS to any image resources in your page

Categories