I've usually loaded CSS files with PHP by adding a GET variable that changes each time. For example the value of the microtime
But I need to dynamically load a CSS file avoiding navigator cache for see the continuous changes making in production development.
<?php echo '<link rel="stylesheet" type="text/css" href="myFile.css?v='.round(microtime(true)).'"></script>';?>
Sometimes you will need to load a dynamic file name as well.
It is possible to do it without PHP like this:
<link rel="stylesheet" type="text/css" href="" id="myCSS">
<script>
var microTime = Date.now();
var myVar = "myCSSFile";
var myUrl = myVar+'.css' + '?v=' + microTime;
myCSS.href= myUrl;
</script>
Related
At the bottom of several of my website, I have a list of javascript/css reference files, such as
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<script src="http://domain.co.uk/jquery-3.2.1.min.js"></script>
<script src="http://domain.co.uk/jquery-ui.min.js"></script>
<script src="http://domain.co.uk/helpers.js"></script>
They all point to another website I have. This works as I only need to update the content of the files and since they all point to the same file location updates are easy.
The problem I have is, if I want to add a new file (javascript or css) then I have to add a new <script... or <link... to every website which has this list.
What I'd love to do is move that list into an external file, and reference it there.
EG
Website1
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
Website2
<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>
And as such, the content of myCssFiles.cs could be
<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<link rel="stylesheet" href="http://domain.co.uk/general2.css" />
<link rel="stylesheet" href="http://domain.co.uk/general3.css" />
and likewise for the javascript.
How can I achieve this?
Please note, I control these websites and CORS isn't an issue.
Hope this helps,
You can have common.js to include all your js file
common.js
var scripts = {
"http://domain.co.uk/jquery-3.2.1.min.js",
"http://domain.co.uk/jquery-ui.min.js"
}
scripts.forEach(function(data) {
var x = document.createElement('script');
x.src = data;
document.getElementsByTagName("body")[0].appendChild(x);
});
You can have a single common.js file and add links as u needed to the scripts array. You just have to include the common.js in your websites.
I have a default CSS code for my page. I am injecting a CSS stylesheet file into the bottom of the head that overrides the default one using JavaScript. For some reason when I load the page, I see the default one and then it overrides it with the loaded stylesheet,
What can I do so that flickering will not occur? I thought that if I add a CSS at the end of the head after the default one I won't see the flickering because the content is not loaded yet, but apparently, it is. Any solution for that?
I don't know if flickering is the right word, I just see the default CSS and immediately after I see the page with the overridden CSS. Furthermore, maybe it's relevant, the overridden CSS only overrides some of the elements not all of them.
Here is the code:
<head>
<link href="/Content/app.min.css?ver=17" rel="stylesheet" />
<script>
// dark theme
if (localStorage.getItem("current_theme") === "dark") {
var head = document.head,
link = document.createElement('link');
link.type = 'text/css',
link.rel = 'stylesheet',
link.href = '/Content/dark_theme.min.css?r=' +
(Math.floor(Math.random() * 20000) + 1);
head.appendChild(link);
}
</script>
// the JavaScript appended stylsheet will render here before the </head> element
</head>
What happens is that the change of the new CSS happens only after the page has been loaded. I put a breakpoint in the footer, and only after the page is loaded I see the new CSS update.
I've found out that this happens because the stylesheet file is loaded asynchronously and therefore the delay. I need to inject the CSS code inline to make it work. The problem is with that approach is that it adds 9KB to each page call instead of dynamically based on the localStorage variable value.
The following code works faster:
<head>
<link href="/Content/app.min.css?ver=17" rel="stylesheet">
<script>
// dark theme
if (localStorage.getItem("current_theme") === "dark")
document.head.innerHTML += '<link rel="stylesheet" href="/Content/dark_theme.min.css">';
</script>
</head>
But your approach is wrong.
You'd better use a cookie for this stuff. Save the theme name to the cookie. Read cookie from request headers and include the required css right on the server side. So the client receives:
<head>
<link href="/Content/app.min.css?ver=17" rel="stylesheet">
<link rel="stylesheet" href="/Content/dark_theme.min.css">
</head>
Also I'd recommend setting correct Expires headers on the server and getting rid of ugly ?ver=17 or ?r=(Math.floor(Math.random() * 20000) + 1)
I need one help.I need to set js/css path name dynamically uaing Angular.js/Javascript/Jquery.I am explaining my code below.
<script src="/crm/controller/productController.js" type="text/javascript"></script>
Suppose i have the above script tag.Here my path is
/crm/controller/productController.js.I need to set /crm/ in my config file and i will set this path name in every script tag.In php it is happening like below.
define("USER_SITE_URL", "http://www.absclasses.com/");
<script type="text/javascript" src="<?php echo SITE_URL;?>js/jquery-1.9.1.min.js"></script>
As i am not using PHP. How it can me made using Angular.js or Javascript/Jquery.
You can use HTML base tag as follows.
<base href="http://www.absclasses.com/" />
If you want to do this with angular config block, you can use the following javascript code also with some modification.
document.write("<base href='http://" + document.location.host + "' />");
You can also define store document.location.host to a variable and use that.
In the javascript, you can set global variable.
function globalSource() {
jqueryUrl = "http://xxxxxxx",
angularUrl = "http://xxxxxx"
}
when you want to use.
(function() {
globalSource();
//Get your dom and change attributes src link
//ex: var xx = document.getElementsByTagName('script')[0].setAttribute("src", window.jqueryUrl );
})();
<xsl:variable name="Path" select="/crm/controller/"></xsl:variable> <!-- Global path variable. -->
<xsl:variable name="myScriptPath" select="concat($Path, 'productController.js')"></xsl:variable> <!-- Relative script path variable. -->
<script src="{$myScriptPath}"/> <!-- Attach script. -->
I'm trying to dynamically render a CSS file to my view, but part of the location of the file is in a javascript variable.
Currently I have:
#section Styles {
#{
<link href="#Url.Content(Model.CssPath)" rel="stylesheet" type="text/css" />
}
}
But I need to include the variable in the path, like this:
#section Styles {
#{
var pathPrefix = "somePath/";
<link href="#Url.Content(pathPrefix + Model.CssPath)" rel="stylesheet" type="text/css" />
}
}
I understand the server-side code is evaluated before the javascript variable exists, so how else do I accomplish this?
First of all - why mixing client-side/server-side code?
You cannot use JS variable along with server-side generated content because - as you said - it is executed on server before client's browsers hits JS code. This is expected behavior.
If this variable value can be determined on the server-side, you should move it there.
If it has to be generated on the client side, you can generate <link> tag using document.createElement('link'); but it seems odd to me :)
Rather than trying to add the stylesheet via the razor view I would put the csspath into a javascript variable and then use jquery to combine it with the pathPrefix and append the stylesheet that way.
something like....
<script>
var cssPath = #Model.cssPath;
var pathPrefix = "www.";
$('head').append('<link rel="stylesheet" type="text/css" href="'+pathPrefix+cssPath+'">');
</script>
I am creating a popupwindow and I want to add a css file to that popupwindow. Below is the code for popupwindow. I have a JavaScript which creates a popupwindow.
Print1
Now I want to add a css file to this popupwindow. I tried something like
$('.popupwindow').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="css/style2.css" type="text/css" />');
but it doesn't work.
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
This should work.
This is how I add css using jQuery ajax. Hope it helps someone..
$.ajax({
url:"site/test/style.css",
success:function(data){
$("<style></style>").appendTo("head").html(data);
}
})
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "yourcustomaddress/bundles/andreistatistics/css/like.css"
});
css_link.appendTo('head');
Just my couple cents... sometimes it's good to be sure there are no any duplicates... so we have the next function in the utils library:
jQuery.loadCSS = function(url) {
if (!$('link[href="' + url + '"]').length)
$('head').append('<link rel="stylesheet" type="text/css" href="' + url + '">');
}
How to use:
$.loadCSS('css/style2.css');
Try doing it the other way around.
$('<link rel="stylesheet" href="css/style2.css" type="text/css" />').appendTo('head');
Your issue is that your selector is for an anchor element <a>. You are treating the <a> tag as if it represents the page which is not the case.
$('head') will work as long as this selector is being executed by the page that needs the css.
Why not simply add the css file to the page in question. Any particular reason to attempt this dynamically from another page? I am not even familiar with a way to inject css to remote pages like this ... seems like it would be a major security hole.
ADDENDUM to your reasoning:
Then you should simply pass a parameter to the page, read it using javascript, and then do whatever is needed based on the parameter.
I don't think you can attach down into a window that you are instancing... I KNOW you can't do it if the url's are on different domains (XSS and all that jazz), but you can talk UP from that window and access elements of the parent window assuming they are on the same domain. your best bet is to attach the stylesheet at the page you are loading, and if that page isn't on the same domain, (e.g. trying to restyle some one else's page,) you won't be able to.
Have you tried simply using the media attribute for you css reference?
<link rel="stylesheet" href="css/style2.css" media="print" type="text/css" />
Or set it to screen if you don't want the printed version to use the style:
<link rel="stylesheet" href="css/style2.css" media="screen" type="text/css" />
This way you don't need to add it dynamically.