Load multiple external css issue - javascript

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...

Related

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

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.

Remove specific Javascript code that causes high CPU usage from Tumblr theme

recently I decided to create a Tumblr using this theme
I'm a Firefox user, and I noticed that this theme slows down the browser a lot. After some investingation and asking, the culprit seems to be the possibility to add an animated particle background that, even when disable, causes high cpu usage.
This particle function is inside a script called "s.js", that contains other part of the theme.
Is there any way to clean up the code from everything related to this particle background, and still leave the theme functional?
Thanks
OK
Option 1:
Search for all of the libraries that are being called from the js file you linked to s.js apart from ParticleJS.
Images Loaded: https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js
Isotope: https://unpkg.com/isotope-layout#3.0.4/dist/isotope.pkgd.min.js
Infinite Scroll: https://unpkg.com/infinite-scroll#3.0.2/dist/infinite-scroll.pkgd.min.js
Fitvid: https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js
Photoset grid: https://cdnjs.cloudflare.com/ajax/libs/photoset-grid/1.0.1/jquery.photoset-grid.min.js
Magnific Popup: https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js
Caveat, these are specific versions of each file and you could run into compatibility issues, if you need to link to a specific version.
Combine all the code from these files into a single file, then you could run it through a minifier: https://javascript-minifier.com/
For this solution to work you also need somewhere to host the file somewhere.
Option 2:
Link to all of the above files individually in your template. For example before the closing <body> tag you would need to add
<script type="text/javascript" src="https://unpkg.com/imagesloaded#4.1.3/imagesloaded.pkgd.min.js"></script>
... then add each of the other scripts. There may be a dependency order to these also, hopefully they are the same as in the header of the s.js file.
The drawback with this is instead of making a single http request to return a single js file, the template will request 6 separate js files (so this might be slower than the current system you have now).
Option 3:
If you can't host the file somewhere, you would have to actually copy the code from each js file into your template.

Why is waypoints not working?

On My computer C drive, I created a test.html file and inside it I have
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#waypoint').waypoint(function() {
alert('You have scrolled to my waypoint.');
}, {
offset: '100%'
});
});
</script>
<div id="waypoint">WAYPOINT</div>
I don't get the alert popup, yet the exact same code in JSFIDDLE works fine. What gives?
Afaik some browsers don't load external resources (.js files) when simply opended by double clicking the .html file. Please check, whether there's file:// in your browser's URL bar.
If so, install XAMPP (or something similar, depending on your OS) on your machine, put your file somewhere under htdocs and retry.
Also JSFiddle wraps your code in a valid HTML Document. You might add <html><head>... to your HTML to make it valid. Especially since you're dealing with viewport scrolling that might be required for the plugin to work.
Last to be said is that the include order of your .js files matter, since they're loaded in order. Since waypoints depends on jQuery (as it is a jQuery plugin) it needs to be loaded FIRST.

How to dynamically change href attribute

I'm trying to make a little website browsable both online and offline using only html, css and a little of jquery\javascript.
Hence I'm using all relative paths and everything works fine unless I came to the issue to load a custom menu in all my pages with a little smart jquery include.
However since my menu.html is loaded in different pages located in different subdirectories of the tree structure I am wondering what's the smartest way to write down the href links of the different voices in the menu.
I initially started using all absolute paths in the menu.html, but of course it just works only online or offline based on which root domain I use in the absolutes paths (either http://mywebsite.com/ or file:///D:myfolder/etc).
Of course also using the / at the beginning of a link works only online, since locally the / stands for the drive letter where the websites' folder is placed and it will work if and only if the website's folder is saved in the highest path like as D:/myWenbsite. I'd like to make something more adaptable regardless of the local path.
The best way in my opinion is to use relative URL's from the root. For example in your menu.html file when you reference jquery you can do the following:
/javascript/jquery.min.js
Adding the beginning '/' makes it so that the path always starts from the root of the domain no matter where your html is at in your directory.
If you used:
javascript/jquery.min.js
That means in whatever directory your menu.html file is in, a folder for javascript would also need to exist and that is not generally wanted.
Using the <base> command within a little script to change it solved my issue.
Here is an example:
<head>
<!-- Here a direct path is need to firstly load jquery -->
<script type = "text/javascript" src = "../include/js/jquery-1.10.2.min.js"></script>
<base id="host" href="" />
<script>
/* Where am I? */
here = window.location.href;
hereIndex = here.indexOf('temp-test');
/* make substring from root till temp-test/ */
newPathname = here.substring(0, hereIndex+10); //+10 to consdier also temp-test/
$("#host").attr("href", newPathname);
</script>
</head>
Don't know if there is a better way to do it.
Anyway even if the page renders correctly in the console log I still get errors on every relative path I have GET file:///D:/temp-test/core/image/temp1.jpg net::ERR_FILE_NOT_FOUND however for instance, this image is instead properly loaded. So what's up here with the base tag? It is kinda of not getting recognized but it works..
Further investigation is needed for me.

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