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'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 problem with my wordpress page after update to ver 3.6. I didn't make any changes in code but site is not working now, showing the error
Uncaught TypeError: Cannot call method 'cookie' of undefined
code:
<head>
<link rel="stylesheet" href="http://www.ewerosinska.com/wp-content/themes/ewe/style.css" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" id="superstyle-css" href="http://www.ewerosinska.com/wp-content/themes/ewe/js/supersized.core.css" type="text/css" media="screen">
<script type="text/javascript" src="http://www.ewerosinska.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
<script type="text/javascript" src="http://www.ewerosinska.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script type="text/javascript" src="http://www.ewerosinska.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.hoverIntent.minified.js?ver=3.6"> </script>
<script type="text/javascript" src="http://www.ewerosinska.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.cookie.js?ver=3.6"></script>
<script type="text/javascript" src="http://www.ewerosinska.com/wp-content/plugins/jquery-vertical-accordion-menu/js/jquery.dcjqaccordion.2.9.js?ver=3.6"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.ewerosinska.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.ewerosinska.com/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress 3.6">
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<script type="text/javascript" src="http://www.ewerosinska.com/wp-content/themes/ewe/js/supersized.3.2.7.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
if($.cookie('has_seen_palms')!='1'){
the error appears in the last line, my website adress is ewerosinska.com
Does anyone know hot to fix that?
Thanks a lot
Evelyn
I am trying to load stylesheet dynamically from folder, but currently, it isn't working:
<head id="Head1" runat="server">
<link type="text/css" rel="styleSheet" href="http://www.domain.com/users/'<%= UserNameVar%>'/styleSheet.css" />
</head>
UserNameVar contains string data.
Edit: This is the output when i upload it to server. but it is not loading
<link type="text/css" rel="styleSheet" href="http://www.domain.com/users/'<%= UserNameVar%>'/styleSheet.css" /></head>
Put all href value in <%= and %>
Try this:
<head id="Head1" runat="server">
<link type="text/css" rel="styleSheet" href=<%= "http://www.domain.com/users/" + UserNameVar + "/styleSheet.css />" %>
</head>
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 ~