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'm using the following command on a site I'm building on my local machine:
wget --page-requisites --html-extension --convert-links --restrict-file-names=windows --no-parent http://daosawan.dev
I'm using MAMP Pro to serve the pages locally. The URL http://daosawan.dev points to a directory on my local machine: /Applications/MAMP/htdocs/daosawan/
Here's the header of the resulting /index.html file:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Daosawan</title>
<link rel="stylesheet" type="text/css" media="all" href="wp-content/themes/daosawan_theme/style.css" />
<link rel='stylesheet' id='q-a-plus-css' href='wp-content/plugins/q-and-a/css/q-a-plus.css#ver=1.0.6.2.css' type='text/css' media='screen' />
<script type='text/javascript' src='http://daosawan.dev/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://daosawan.dev/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='wp-content/themes/daosawan_theme/js/daosawan.js#ver=3.8.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://daosawan.dev/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://daosawan.dev/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.8.1" />
<!-- Q & A -->
<noscript><link rel="stylesheet" type="text/css" href="wp-content/plugins/q-and-a/css/q-a-plus-noscript.css#ver=1.0.6.2.css" /></noscript><!-- Q & A -->
<meta http-equiv="Content-Language" content="en-US" />
<style type="text/css" media="screen">
.qtrans_flag span { display:none }
.qtrans_flag { height:12px; width:18px; display:block }
.qtrans_flag_and_text { padding-left:20px }
.qtrans_flag_en { background:url(wp-content/plugins/qtranslate/flags/gb.png) no-repeat }
.qtrans_flag_fr { background:url(wp-content/plugins/qtranslate/flags/fr.png) no-repeat }
</style>
<link hreflang="fr" href="http://daosawan.dev/fr/" rel="alternate" />
</head>
Notice how some of the <link> and <script> tags are converted to relative, but some keep the http://, and breaks when I try to publish the saved website/page to a public location.
What am I doing wrong?
It appears that certain absolute URLs cannot be converted by wget. In my case, Wordpress rewrites certain URLs, which seems to confuse wget and show up as absolute URLs (http://...) in the output.
As a hacky work-around, I used Wordpress filters to make the app refer to relative URLs, and these are handled as expected by wget.
It's easy. You should use robots=off params.
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" });
Just like I did before, I used the following code for my new project.
<?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?>
<?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?>
<?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable.class.css');?>
when I open the website and view source, there are duplicated css link tags.
<link href="/Layouts/admin/css/button.css" media="screen" rel="stylesheet" type="text/css" ><link href="/Layouts/admin/css/button.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/inputText.css" media="screen" rel="stylesheet" type="text/css" ><link href="/Layouts/admin/css/button.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/inputText.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/fancyTable.class.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/button.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/inputText.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/fancyTable.class.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/Layouts/admin/css/divine.css" media="screen" rel="stylesheet" type="text/css" >
What is going on with my code??
You shouldn't echo them all individually.
There should be one place where the HeadLink helper is printed, and all the other calls only add the stylesheet to that helper to be printed. E.g. the following rules anywhere in your view scripts:
<?php $this->headLink()->appendStylesheet('/Layouts/admin/css/button.css'); ?>
<?php $this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css'); ?>
<?php $this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable.class.css'); ?>
And then this in your <head>:
<?= $this->headLink() ?>
Or, if they all go in the same place anyway, you can chain them together
<?= $this->headLink()
->appendStylesheet('/Layouts/admin/css/button.css')
->appendStylesheet('/Layouts/admin/css/inputText.css')
->appendStylesheet('/Layouts/admin/css/fancyTable.class.css'); ?>
which will print the contents of the HeadLink helper with those 3 stylesheets attached.
Also see the HeadLink helper Zend documentation; the example in particular.