I have a style-sheet that is saved in this location:
/opt/lampp/htdocs/project/core/styles/Style.css
Now, what I need to do is load it using that full directory, because the files that are going to be using it are located here:
/opt/lampp/htdocs/project/client/
My goal is to create a completely dynamic site that updates correctly to numerous "Clients" based on their own personal information. So far I've got everything done, however I wanted to move the CSS to be loaded dynamically as-well so if I wanted to make any changes to the style-sheet they would be instantly noticed.. Here's where I'm running into a problem, I can't figure it out. I've followed the front page of google to a dozen of different methods using JavaScript, but none of them have worked and they are all from 2009-2010.. Perhaps someone would like to shed some light on my dark path?
this works for me:
document.write('<link rel="stylesheet" type="text/css" href="/opt/lampp/htdocs/project/core/styles/Style.css" media="screen" />');
I don't see any reason to use javascript unless a loaded page needs to refresh automatically when the style-sheet is changed.
If you just need it to reload automatically on the next page-load, you can use something like:
<link rel="stylesheet" type="text/css" href="/project/core/styles/Style.css?v=<?php echo time(); ?>">
Using an absolute path makes sure it will work for any client / file in any folder.
I have added the timestamp to the css file so that it will not be cached but you can also set up the server to disable caching for specific files.
Related
I am trying to make grab data from a MongoDb database and then viewing, editing and deleting it.
The first one is working pretty fine but what I am having issues with is editing. What I have done is made a route on a button click that basically works like this:
'/viewList/edit/'+item._id
This is supposed to take me to a form that will let me edit those values. The problem is that the CSS, Bootstrap and things like that break and the page looses all of the features they provide and it looks like a generic html that doesn't have any of these included in it.
If I remove the "/edit/" bit of the routing out and just do '/viewList/'+item._id it works.
I tested this by making a dummy page that tells details for that specific item like it's name and stuff and the page doesn't break, in terms of CSS/Bootstrap.
I really can't find a solution for this, can someone point in the right direction?
Difficult to know without seeing what's in your <head> but the paths in your <link> tags are probably relative. This means they'll point to non-existent files when your URL path changes. Check that they start with / so your static file paths are always relative to the root URL rather than relative to the current page. i.e. if you have this:
<link rel="stylesheet" href="bootstrap/styles.css">
Change it to:
<link rel="stylesheet" href="/bootstrap/styles.css">
I was wondering if it was possible to include a list of links into many HTML files. I based my idea off W3 School's W3 Include which allows you to include blocks of HTML code in many files which is super useful for changing lots of files at once.
Heres the link to the W3 article: https://www.w3schools.com/howto/howto_html_include.asp
What I want to be able to do is something like this:
<html>
<head>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body>
<h1>test</h1>
<div w3-include-html="links.html"></div>
</body>
</html>
Where the links.html file has a bunch of links. e.g
<link rel="stylesheet" href="style1">
<link rel="stylesheet" href="someframework">
<link rel="stylesheet" href="somescript">
I want to be able to do this as when online resources change their links that I can easily update them by updating the one links file and then it will roll out across my whole website.
I understand that there are most likely issues regarding being able to load files this way, but if anyone has any suggestions in how to do something along these lines that would be great.
Well, you can use partial rendering in any programming language. If your page has static HTML and is not powered by any programming language, you could add a link to a JavaScript file in the head of your page and from within the file, you load the stylesheets and scripts of your choice. (look for how to load stylesheets and scripts with JavaScript).
This way, you have a single place in which you manage head assets.
LE: https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports this will be a thing in the future 😁
You could maybe make your header an include depending how you set it up. Could use <?php include "your/file/location" ?>
This will allow you to just add this piece of code at the top of each of your pages. Then in the location file is where you would add all of the and tags which would clean up your HTML quite a bit and also increase page load time. Using this method for quite a lot of things could slow it down but the perfect amount will allow you to get 100/100 on google page speed hoping that analytics is hosted locally so you don't get a issue with that caching.
Went a tad off topic but hope this helps :)
Refresh css without reloading page, css defined in App_themes folder and theme referred through webconfig.
I do not have any reference of CSS file on the page, it is done through referring theme name in webconfig.
Tried many ways but failed to get any output:
not able to use versioning like this:
<link ... href="http://sstatic.net/stackoverflow/all.css?v=c298c7f8233d">
Tried CSSrefresh.js to automate the process but failed to get the actual result.
So is there anything which refresh my page with the latest css without reloading the page?
EDIT: When you refresh a page, some of the elements in that page (like CSS and JavaScript files, images, etc.) may not be updated from server, because they are cached by the browser, so you may be unable to see your latest updates. What you need to do is to somehow prevent the browser from using the cached version of the files and request these content again.
One way to do it is to disable caching for your CSS or any frequently updated files. To do it in ASP.NET, you change Web.config file in the directory you want the cache to be disabled (in your example App_themes). If that directory does not contain a Web.config file, you can create one. To disable caching completely, you can add the following lines to Web.config (if some XML elements are already present, append new children to them):
<configuration>
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
</configuration>
Instead of disabling cache completely, you can set it to a short time, like 5 minutes. To do this, change the clientCache element in the above example to this:
<clientCache cacheControlMaxAge="00.00:05:00" cacheControlMode="UseMaxAge"/>
Bear in mind that disabling caching is a very bad idea and impacts performance very badly and you shall not do it unless absolutely necessary and if all other solutions fail.
A (better) solution to the problem is using versioning (as you mentioned), and it should work. What you do is change the way you link to your CSS file from <link rel="stylesheet" href="style.css"> to <link rel="stylesheet" href="style.css?v=1"> (a version is appended as a parameter). You do not need to change the name of the actual CSS file on disk. Now, the browser will cache style.css?v=1. If your CSS changes and you want this change to be applied immediately, you manually change all links to your CSS and increment the version (<link rel="stylesheet" href="style.css?v=2">). No browser has style.css?v=2 in its cache, so all browsers send a new request to get the file.
Manually changing all CSS references each time they change is very cumbersome. To automate this process, you can use the bundling and minification plug-in in ASP.NET (it is only available in later versions of ASP.NET). Bundling and minification is a very useful optimization technique that you should be using anyway to improve the performance of your site, so enabling it is a good idea. The bundling plug-in, among other things, automatically changes the version parameter once a file changes.
Enabling bundling is a little different depending on your project type (ASP.NET MVC, Web Forms, etc.). Please see documentation on how to use it for MVC here and for Web Forms here.
If you want the style of page to dynamically change, include all theme CSS files in your initial page load, but each theme CSS rule must be edited so its selector only works if there is a specific class name defined in parent. You can then use JavaScript to add/change the class name in the parent node to use different themes.
For example, your CSS would be
.theme1 body { background: red; font: 'sans-serif'; }
.theme2 body { background: blue; font: 'serif'; }
And your HTML would be:
<html class="theme1">
<body>
</body>
</html>
Then if you want to change theme, change class name on HTML element to 'theme2'.
When I include separate js files in my webpage, the functions are not called when previewing the local page in my browser.
I'm trying to implement these page transitions.
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
I put the supporting files in the right place, and included them correctly in the head section of my page. I'm pretty sure of that because the css is working fine. Only the js is not.
I dont think I should need something like WAMP server right? Because its only js. The inline js in the same page is also working fine...
When I click my link, it does open the next page, but without transition. Also it adds "Error:0" at the top of the page.
What can I do to get these transitions working?
EDIT
My code looks like this.
<!DOCTYPE html>
<html>
<head>
<link href="css/transition.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/fasw.transitions.min.js"></script>
</head>
<body>
<a transt="flip" href="page2.html">Next</a>
</body>
</html>
I removed everything else from the page and still getting the same error. I view it in Chrome and Firefox, and get the same error in both.
Please check if it is happening because of any js conflicts. You can check it by removing the other js files that is included in the web page.
Check to make sure that you are referencing the Javascript files correctly from your HTML page. Try adding an alert statement to the top of the file, and reload the page - if you don't see the alert, then you're not referencing the file correctly.
alert("Hello.");
<link rel="stylesheet" type="text/css" href="test.css"/>
in case of static css we mention css file through link tag like above. suppose in case changing page theme we need change css name dynamically after downloading css file. so i just want to know how can i down load css file dynamically and change the css file name in link tag with the help of javascript. please assist me.
If you have an external CSS, you wont want to dynamically generate it as browsers will be caching it. You can set any arbitrary file type in your webserver to render dynamically though, but I wouldn't recommend it for css.
To stop CSS files caching, timestamp the querystring after them, IE:
<link rel="stylesheet" type="text/css" href="test.css?x=15/12/14 13:00:04"/>
Again this bypasses a lot of efficiencies that browsers have in place for caching, but it's there as an option.
The dynamic parts of your CSS, you could pull out the external file and have them in an internal style sheet, and dynamically insert the colour values in that way. This would work OK, and you can modularise it as an include file.