using HTML5+CSS3+jQuery.
Since I am changing my CSS file frequently, I would like to force users' browsers always to fetch the CSS file and never use the cached version.
I found that I should write something like this:
<link rel="stylesheet" type="text/css" href="index.css?t=[...some unique id...]"/>
How can I automatically generate such unique Id? ( maybe current time?)
Thanks
You can use a server timestamp
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
A better Idea is to use a version of your css:
<link rel="stylesheet" type="text/css" href="style.css?version=<?php echo $CSS_VERSION; ?>" />
If your CSS is small and dynamic, your best solution would be to inject it inline in the <head> using <style> tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
This way your styles will be updated on every page refresh and you will not need to wait for an additional http request.
For example, if your stylesheet looks like this:
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
And your html looks something like this:
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<h1>My Page</h1>
</body>
</html>
Change the css to look like this:
/* This stuff hardly ever changes */
html {
background-color: white;
font-size: 16px;
}
And the html to look like this:
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<style>
/* This stuff changes all the time */
body {
background-image: url('todays-image.png');
}
</style>
</head>
<body>
<h1>My Page</h1>
</body>
</html>
If all of the contents of index.css change frequently, you can remove the file entirely and remove the link tag.
For your particular issue, you could inject the link via javascript using ticks. In this example the code would insert the css as the last styleset processed. I would recommend doing this on the back-end though.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var sourceName = 'test.css?v=' + ((new Date().getTime() * 10000) + 621355968000000000); // using ticks
var linkElement = document.createElement('link');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('href', sourceName);
document.getElementsByTagName('head')[0].appendChild(linkElement);
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
I tested it before publishing it and went through various methods. Many did not execute the href change. It only seemed to execute if it was injected into the DOM.
Related
I need know if I can design a HTML page with conflict of functions, for example I have 3 css that can't be together in the same because I get a big mistake; I need know if I can put together those CSS under hierarchy, therefore where is one CSS the other CSS wont can... is like put limits to an CSS, the same I want do with some Scripts.
This is an example of code which I'm thinking to do.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="main.css"> <!-- MAIN or GENERAL CSS -->
</head>
<body class='landing-page wsite-theme-light'>
<div> Where CSS 1 IS
<link rel="stylesheet" href="style01.css">
<div/>
<div> Where CSS 2 IS
<link rel="stylesheet" href="style02.css">
<div/>
<div> Where CSS 3 IS
<link rel="stylesheet" href="style03.css">
<div/>
<div class="nav mobile-nav">{menu}</div>
<script type="text/javascript" src="/files/theme/plugins01.js"></script>
<script type="text/javascript" src="/files/theme/custom01.js"></script>
</body>
</html>
The main problem is those CSS have something which I don't need, and something which I need, I can't understand where is what I need.
That's not how CSS works. The <link rel="stylesheet" ...> tags go in the head of the HTML, which means you can't have a specific CSS for different parts of the page.
You use classes, and identifiers to make your CSS code specific to a section. You can try this:
<div id="style1"> Where CSS 1 IS
...
<div/>
<div id="style2"> Where CSS 2 IS
...
<div/>
<div id="style3"> Where CSS 3 IS
...
<div/>
And in your CSS, you can specialize styles for different DIVs using the following code:
#style1 {
background-color: yellow;
}
#style2 {
background-color: black;
}
#style3 {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/myjquerystyle.css">
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="plugin/myjquerystyle.css">
</head>
<body>
My Plugins page
</body>
</html>
</iframe>
</body>
</html>
As you can see above code i have create a html page inside the html page.
My problem is that theme/myjquerystyle.css override my plugin/myjquerystyle.css
How can I give a priority to my plugin/jquerystyle.css file apply to my page.
Any solution
I believe we cannot define inside iframe (never tried so) however we can acheive this via Javascript where we can append styles to iframe section via:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .myclass{display:none;} </style>"));
});
Else you can also try by adding styles to individual elements inside
iframe as:
iframe.$('mydiv').addClassName('Tablewithborder');
Hope it helps.
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
I have a web page in which I add a css file in head section using javascript code from the bootom of the page:
$(document).ready(function(){
var css=document.createElement('link');
css.type='text/css';
css.href='/css/user.css';
css.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(css);
});
So I have a problem when user disable javascript then thic file can't be added to page so is there any way to include css file in that page using
<noscript>..Code..</noscript>
I can't add this file directly into my head Section.
So Is it possible to add css file into my html document without using
javascript?
with javascript:
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "/styles/yourcss.css"
}).appendTo("head");
http://api.jquery.com/jQuery/#jQuery2
without javascript:
<noscript>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</noscript>
you can try this:
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
Yes it is possible to load css file without using javascipt
<head>
<link rel="stylesheet" type="text/css" href="user.css">
</head>
If you want to add css on the basis of some condition then use php if statement as shown below:
<?php if(YOUR CONDITION){ ?>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<?php } ?>
<noscript>
<link href="style.css" rel="stylesheet" type="text/css">
</noscript>
Now you can place this code in head section and it'll be called only when javascript is disabled.
Not sure how HTML compliant this is, but you can include a link within your body tag and still have it reference the class, given that you cannot edit the head section as stated.
Doing this did work for me, referencing the 'class1' from the style.css file
<head>
</head>
<body>
<div class="class1"></div>
<link href="style.css" rel="stylesheet" type="text/css">
</body>
Edit: in HTML 4.01 it is not acceptable, however using HTML5, this is perfectly acceptable markup. If referencing a larger CSS file this may cause some elements to be without style temporarily as the head section is intended to load such documents prior to displaying content, however if this is not a possibility, then this may be a solution for you.
I'm trying to test dojo Calendar. I was having problems so I made a test page and copied the example code from the dojo site. It manifested the same problem: the text is displayed with very large vertical gaps in it and little other formatting. I can't get the test on their page to work either so I don't know what it's supposed to look like.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" />
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dojo/ready", "dojox/calendar/Calendar"],
function(parser, ready, Calendar){
ready(function(){
calendar = new Calendar({
dateInterval: "day",
style: "position:relative;width:600px;height:600px"
}, "someId");
}
)}
);
</script>
</head>
<body class="claro">
<style type="text/css">
.dojoxCalendar{ font-size: 12px; font-family:Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; }
</style>
<div id="someId" >
</div>
</body>
</html>
The only change I made was to use the libraries at ajax.googleapis.com. Should I also include dojox? I thought it came with dojo.js.
You missed including style file, add this into the head and it will be OK:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/calendar/themes/claro/Calendar.css" />
or see this jsfiddle