I'm using a Bootstrap template and their HTML and their CSS / JS load order is like this:
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Atropos - Responsive Multipurpose</title>
<meta name="keywords" content="HTML5,CSS3,Template" />
<meta name="description" content="" />
<meta name="Author" content="Dorin Grigoras [www.stepofweb.com]" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
<!-- WEB FONTS -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css" />
<!-- CORE CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
<link href="assets/css/animate.css" rel="stylesheet" type="text/css" />
<link href="assets/css/superslides.css" rel="stylesheet" type="text/css" />
<!-- REVOLUTION SLIDER -->
<link href="assets/plugins/revolution-slider/css/settings.css" rel="stylesheet" type="text/css" />
<!-- THEME CSS -->
<link href="assets/css/essentials.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/color_scheme/orange.css" rel="stylesheet" type="text/css" /><!-- orange: default style -->
<!--<link id="css_dark_skin" href="assets/css/layout-dark.css" rel="stylesheet" type="text/css" />--><!-- DARK SKIN -->
<!-- styleswitcher - demo only -->
<link href="assets/css/color_scheme/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />
<link href="assets/css/color_scheme/red.css" rel="alternate stylesheet" type="text/css" title="red" />
<link href="assets/css/color_scheme/pink.css" rel="alternate stylesheet" type="text/css" title="pink" />
<link href="assets/css/color_scheme/yellow.css" rel="alternate stylesheet" type="text/css" title="yellow" />
<link href="assets/css/color_scheme/darkgreen.css" rel="alternate stylesheet" type="text/css" title="darkgreen" />
<link href="assets/css/color_scheme/green.css" rel="alternate stylesheet" type="text/css" title="green" />
<link href="assets/css/color_scheme/darkblue.css" rel="alternate stylesheet" type="text/css" title="darkblue" />
<link href="assets/css/color_scheme/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link href="assets/css/color_scheme/brown.css" rel="alternate stylesheet" type="text/css" title="brown" />
<link href="assets/css/color_scheme/lightgrey.css" rel="alternate stylesheet" type="text/css" title="lightgrey" />
<!-- /styleswitcher - demo only -->
<!-- STYLESWITCHER - REMOVE ON PRODUCTION/DEVELOPMENT -->
<link href="assets/plugins/styleswitcher/styleswitcher.css" rel="stylesheet" type="text/css" />
<!-- Morenizr -->
<script type="text/javascript" src="assets/plugins/modernizr.min.js"></script>
</head>
<body><!-- Available classes for body: boxed , pattern1...pattern10 . Background Image - example add: data-background="assets/images/boxed_background/1.jpg" -->
-- LOTS OF HTML HERE --
<!-- JAVASCRIPT FILES -->
<script type="text/javascript" src="assets/plugins/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.appear.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.isotope.js"></script>
<script type="text/javascript" src="assets/plugins/masonry.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/plugins/stellar/jquery.stellar.min.js"></script>
<script type="text/javascript" src="assets/plugins/knob/js/jquery.knob.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="assets/plugins/superslides/dist/jquery.superslides.min.js"></script>
<script type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script><!-- STYLESWITCHER - REMOVE ON PRODUCTION/DEVELOPMENT -->
<script type="text/javascript" src="assets/plugins/mediaelement/build/mediaelement-and-player.min.js"></script>
<!-- REVOLUTION SLIDER -->
<script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="assets/js/slider_revolution.js"></script>
<script type="text/javascript" src="assets/js/scripts.js"></script>
<!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. -->
<!--<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'domainname.com');
ga('send', 'pageview');
</script>
-->
</body>
There's quite a bit of JS at the bottom that need to be loaded only after the DOM is 100% ready in the browser.
Unfortunately I'm having a hard time getting the timing right - my page still does not function like the demo does - the Slider doesn't show up, parallax doesn't work, and I'm sure a lot of things also don't work that I haven't noticed. I'm sure this is happening because some DOM nodes don't exist yet by the time the JS (normally all loaded at the bottom) is loaded by Meteor.
Here's what I've tried:
NOTE: I would also like to put a lot of these JS files directly into client/javascripts so that I can take advantage of Meteor's auto-minifying and bundling feature on production
1 . I figure that after the layout template is rendered is when the DOM should be ready, so I'm going to append the script tags to the body after layout is rendered, but this doesn't work.
Template.layout.onRendered(function() {
console.log('layout rendered');
var appendToHead = function(array){
for (index in array){
$('head').append(array[index]);
};
};
var array = [
// an array of all the script tags
'<script type="text/javascript" src="assets/plugins/jquery-2.0.3.min.js"></script>',
'<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>'
// etc...
];
appendToHead(array);
});
I've tried wrapping this function in a Tracker.afterFlush() but that's not working either.
I've tried putting this function into main.js but that's not working.
I've tried wrapping this in Meteor.startup() and doesn't work.
I've even tried wrapping this in $('document').ready() and it didn't work.
I'm going to go out on a limb and say that even putting everything into its own package won't work, since packages can only control the package load order based on its dependencies on other JS files, but doesn't have the ability to control load order based on DOM status, right?
BTW, I put console logs next to each attempt and here is the order they were fired.
code inside Tracker.afterFlush has been fired
code inside main.js has been fired
code inside jQuery document.ready() has been fired
code inside layout.onRendered has been fired
Part of the difficulty is the fragmented template nature of Meteor. A piece of JS code (let's say a slideshow) needs a DOM element to exist before it can run. It doesn't make sense to have that code load when the layout is rendered, because the layout is just the layout and won't have the DOM element. The DOM element the slideshow needs is contained in the {{> intro}}, {{> photos}}, and {{> videos}} templates.
But it's also tedious to write code that loads the slideshow JS three separate times for those three separate templates...
What if there are eight different 3rd-party JS scripts that you're using? One template uses four, another uses eight, another uses one, another uses six. It would be a complete pain to have to define EXACTLY which scripts are to load in the onRendered callback of each seperate template, over and over again.
You can use your main template's rendered() method to load the required JS scripts in given order. Lets say your main template (or top level template) is named as appLayout then you can define rendered() method as below.
Place your all JS files in public\js folder in your meteor app.
Template.appLayout.rendered = function() {
if (!window.allScriptsLoaded) {
var scripts = [
// list of JS files to be loaded.
'js/libs/jquery-2.1.1.min.js',
'js/libs/jquery-ui-1.10.3.min.js',
'js/plugin/jquery-touch/jquery.ui.touch-punch.min.js',
'js/bootstrap/bootstrap.min.js'
];
function loadNext() {
var src = scripts.shift();
if (typeof src === 'undefined')
return;
var s = document.createElement("script");
s.setAttribute('src', src);
if (s.addEventListener) {
s.addEventListener("load", loadNext, false);
} else if (s.readyState) {
s.onreadystatechange = loadNext;
}
document.body.appendChild(s);
};
loadNext();
window.allScriptsLoaded = true;
}
}
This way you can have exact control on load order of your files.
I developed a component for joomla 3.2 and I am adding a CSS file.
my_component/views/my_view/tmpl/default.php:
$document = JFactory::getDocument();
$document->addStyleSheet("components/my_component/static/css/my_css.css");
It works, it is loaded but "too early".
<link rel="stylesheet" href="my_project/components/com_ciceron/static/css/styles.css" type="text/css" />
<link rel="stylesheet" href="my_project/templates/business/font/mavenpro.css" type="text/css" />
<link rel="stylesheet" href="my_project/templates/business/css/styles.css" type="text/css" />
<link rel="stylesheet" href="my_project/templates/business/css/newStyles.css" type="text/css" />
<link rel="stylesheet" href="my_project/templates/business/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="my_project/templates/business/css/font-awesome.min.css" type="text/css" />
</head>
As you can see the file that I add is added before template css, so some css rules are overwritten.
There is any way to add a CSS file after template CSS? or just before head close tag?
Thanks in advance.
Try this,
This will not add the style sheet inside head tag but it adds under the template css , means from where ever you calling this method there it insert the style sheet. check the bottom section
$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
Hope its works..
I have asp .net 4.0 application in which i am implementing url routing. I have defined my routes in global asax and able to call them correctly.
but my problem is when I am calling a route with parameters my css was not binded properly .
I linked my css files as follows in my master page.
<link id="Link1" rel="stylesheet" type="text/css" href="~/css/style.css" runat="server" />
<link id="Link2" rel="stylesheet" type="text/css" href="~/css/menu.css" runat="server" />
when i am calling a route with a page my css bindings are being changed as follows in my page source behind.
<link id="Link1" rel="stylesheet" type="text/css" href="css/style.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="css/menu.css" />
and when there is a route value
<link id="Link1" rel="stylesheet" type="text/css" href="../css/style.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../css/menu.css" />
when i have two route values
<link id="Link1" rel="stylesheet" type="text/css" href="../../css/style.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../../css/menu.css" />
AND the following piece of code in global asax.cs worked for me.
Routes.Ignore("{folder}/{*pathInfo}", new { folder = "my images path" });
I've been searching for an explanation as to why the following won't execute on the server
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="<%=CurrentUser.ses.style.css%>" type="text/css" rel="stylesheet">
</head>
But the following will execute just fine
<link href="<%=CurrentUser.ses.style.css%>" type=text/css rel="stylesheet">
(notice the missing "")
I've even tried
<link href="<%=CurrentUser.ses.style.css%>" type="<%=Response.ContentType = "text/css" %>" rel="stylesheet">
But that will change the contenttype for the page and serve it all as being css.
What am I doing wrong?
try this ?
<link href="<%= String.Format("{0}",CurrentUser.ses.style.css)%>" type="text/css" rel="stylesheet">
I have Created New MVC2 ViwUserControl
and I have added new css file to ~/Content/Styles folder in my solution explorer.
but my user control is not retrieving CSS files
<link href="~/Content/Styles/demo_page.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Styles/demo_table.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Styles/demo_validation.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Styles/jquery.alerts.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Styles/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
any ideas/help appreciated?
when i debug through the firbug i'm seeing 404 not found error for these files
The preceding tilde is throwing your code off ...
Change:
<link href="~/ ...
To:
<link href="/ ...
The tilde ~ is a server-side construct commonly used in ASP.Net WebForms with code like:
<img runat="server" src="~/Images/foo.png" />.
In MVC the standard is to use #Url.Content(" ... "); so:
<link href="#Url.Content("~/Content/Styles/demo_page.css")"
rel="stylesheet" type="text/css" />
You cannot use ~/ in html. the only works with server-side function that support that vritual path. Remove ~