Dynamic css file and javascript - javascript

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

Related

How to upload all html, css and javascript at once

I have created 3 different html, css and javascript files but I am now confuse how can I interlink them and upload as a single file
Looks like you're just getting introduced to web development, these might come in handy for finding out how to bring your HTML, JS and CSS files together:
(Link JS File) - https://www.w3schools.com/tags/att_script_src.asp
(Link CSS file) - https://www.w3schools.com/tags/tag_link.asp
https://www.w3schools.com/
In order to make your codes to be run by browser you need to include all your sources in one .html file. You need to link those files inside this file and there are different requirement of each file extensions to be included.
In order to link CSS file you use link element with src attribute to indicate the source of your file. Another attribute rel defines the relationship between a linked resource and the current document. In here it is stylesheet document and need to get this value.
Sample: <link rel="stylesheet" href="styles.css">
In order to link your JS file, you need to use element which is used to define a client-side script (JavaScript). You may add it internally or externally. According to your question you need to add it externally. First, add your script element and then refer to it using the src attribute in the script tag.
Sample: <script src="myJSFile.js">
Resources for learning more in these topics:
https://www.w3schools.com/tags/tag_link.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
https://www.w3schools.com/tags/att_script_src.asp
To inter-link different HTML files together, you can just use Hyperlink, Hyperlinking is a feature of HTML to link multiple documents (HTML) files together. It'll show up as a button on your HTML.
Here's an example of how you can implement it. href="your-path-to-your-html"
Click here to visit school
Click here to visit inventory
Click here to visit battle
To understand more about hyperlinking, you can read this for better examples: https://www.w3schools.com/htmL/html_links.asp

Reason to include javascript with document.write

I started working on a project a came across a strange way to include a CSS file using javascript.
Example from the project:
document.write('<link rel="stylesheet" type="text/css" href="css/plugins/jquery.datatables.css" />');
Is there any reason (advantage) to include the file this way?
The CSS file will only be added to the page if the user has JavaScript enabled. Bandwidth saver.
This code does not include JavaScript but the CSS include...by using JavaScript. It allows to dynamically select your CSS maybe to select themes or adapt layout to the device.
Maybe to load the stylesheet only when dataTable is displayed and avoid unnecessary request ?

Loading CSS Style Dynamically

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.

Load <link rel="stylesheet"> raw content into an <style> tag

my platform delivers some similar widgets on the same webpage. These widgets are embedded on iframes, and share the same CSS definition among them.
Current version loads this definition using <link rel="stylesheet"> tag. But, I am thinking to change loading strategy to css inline definition inside <style> tag.
Load base javascript on target page
Create a hidden iframe, and load CSS <link> on it (async document.write call)
Set this CSS content into javascript var on target page context.
Steps 1 and 2 are already implemented and working. Now, how should step 3 be implemented?
After some new tests, I'll post here any positive results.
You don't want to use Javascript for something that can be done (or at least done easily) with pure CSS. There are a lot of people who don't have JS enabled...I don't think you want to limit their access to your site. What you are looking for can be done with the CSS #import rule. It's pretty simple -- all you need to do is place #import "path/to/css/file" above all your other style rules. The path is relative to the current stylesheet; if it's in an HTML file then it's relative to the HTML file.
For example, if you had a domain like stackunderflow.com, a stylesheet in the top-level folder, and a stylesheet called style2.css in a folder called extra-styles, then you could import the stylesheet from extra-styles via a relative path: #import "extra-styles/style2.css" Another good thing about this is that it's supported in almost all browsers.

conflict between 2 bootstrap.css files

I downloaded and customised a website template to fit my needs. The template came with a number of folders and files including js and bootstrap files.
Everything seems to work fine until I tried to integrate a php script which also happens to be designed and includes a number of js and bootstrap files.
I used firebug to debug the conflicts.
When I include the header and footer files together with the associated js and bootstrap files, the script loses most of the design (ie; the navigation panel).
I noticed that the classes defined in the template bootstrap css files are the same as the ones in the scripts own bootstrap css file.
How can i fix this?
Is there a way to exclude the main sites bootstrap files from affecting the installed script or vise-versa?
I haven't used bootstrap and don't know much about it, but basically if you want to save the bootstrap styles just load them after your script.
Something like this:
<link rel="stylesheet" href="css/YOURCSS.css" />
<script src="js/YOURJS.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrapJS.js"></script>
These are the files you told you are including...
public_html/bootstrap/css/bootstrap.min.css
public_html/folder/subfolder/script/theme/css/bootstrap.css
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"/>
<link href="/folder/subfolder/script/theme/css/bootstrap.css" rel="stylesheet"/>
Two assumptions :
Both the sets of files are the same in code.
Then, no problem, but it is not, from what you said.
Both the sets are equal by name but different by content. Then, if those files contain classes (or #id rules) of similar names, all the rules will be ordered in First come first read basis, and if there are multiple rules for a single property, the last rule for that property will be applied.
Example:
h1,h2, .heading, #heading{
font-family:georgia; /* from first file in the include order they are specified in html */
font-family:verdana; /* from second file */
font-family:arial; /* from third file */
},
then,
the last rule : font-family:georgia; /* from the third file */ will be applied.
Debugging such things would be harder if you like to do. Because you can not guarantee the way how they get merged up. If all the code is written by yourself, you could have used a minifier like this which removes all duplicates. But that is not the case.
Finally, you said Everything seems to work fine until I tried to integrate a php script which also happens to be designed and includes a number of js and bootstrap files.
Here, it is better to remove CSS classes that are similar in names from the ones that came along with your php script folder.

Categories

Resources