Client Dependency: Put Javascript files at the bottom of the HTML.
Hello,
How do I get CD to put Javascript files at the bottom of the HTML. I read about different providers but didn't find a lot of documentation on the subject.
If anybody can push me in the right direction I would appreciate that.
Thanks for the reply. But if I understand correctly you can only have one ClientDependencyLoader? Wouldn't that mean my css gets rendered at the bottom also?
Actually you can only have 1 loader per page, which you can place anywhere.
For what you'd want I'd put the loader in the footer but change the ClientDependency.config file so that the default provider is the PageHeadProvider. This will put stuff into the head of the page unless you force the provider to be the LoaderProvider for JavaScript.
This will mean that the CSS (or anything you leave to default) will go into the header of the page, and your JS will appear at the bottom of the page.
Went to bed last night so did some tests today. Seems adding runat='server' to the header tag didn't work. It just renders the stylesheets where the CDLoader is placed even with changing the default provider.
Adding ForceProvider='PageHeaderProvider' to the stylesheets and adding runat='server' to the header tag seems to work. Changed the configuration back to defaults and everything works.
Do you not find that this method, although it enables you to put CSS in the head and JS in the foot of your page, it also outputs the CSS link in the footer with the JS link and so it therefore duplicated?
The above methods seem to work well. One issue I found in U6 is that when you add a runat="server" to the <head> tag, en empty <title> tag is generated. Can this be eliminated?
Client Dependency: Put Javascript files at the bottom of the HTML.
Hello,
How do I get CD to put Javascript files at the bottom of the HTML. I read about different providers but didn't find a lot of documentation on the subject.
If anybody can push me in the right direction I would appreciate that.
You should use the LoaderControlProvider http://clientdependency.codeplex.com/wikipage?title=Configuration&referringTitle=Documentation
This allows you to put the provider where ever you want on the page and it'll put the JavaScript there.
You could alternatively use the LazyLoaderProvider, but that can be a bit of an overkill :P
Thanks for the reply. But if I understand correctly you can only have one ClientDependencyLoader? Wouldn't that mean my css gets rendered at the bottom also?
I think you have to do a force provider if you want to have multiple providers on a page: http://clientdependency.codeplex.com/wikipage?title=ForcedProviders&referringTitle=Documentation
Okay, one step closer.
The PageHeaderProvider needs runat='server' on the header tag which is throwing me some new errors. Going to dig around and see if I can fix that.
Thanks a lot Slace.
Actually you can only have 1 loader per page, which you can place anywhere.
For what you'd want I'd put the loader in the footer but change the ClientDependency.config file so that the default provider is the PageHeadProvider. This will put stuff into the head of the page unless you force the provider to be the LoaderProvider for JavaScript.
This will mean that the CSS (or anything you leave to default) will go into the header of the page, and your JS will appear at the bottom of the page.
Think it still maybe needs runat='server' on the header tag though.
This is my HTML:
<html> <head> <link href="favicon.ico" rel="shortcut icon" /> <cd:CssInclude runat="server" FilePath='~/css/site.css' /> </head> <body> <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <cd:JsInclude runat="server" FilePath='~/scripts/nww.js' ForceProvider='LoaderControlProvider' /> <umb:UmbracoClientDependencyLoader runat="server" ID="ClientLoader" /> </body> </html>The config file looks like this:
<fileRegistration defaultProvider="PageHeaderProvider" fileDependencyExtensions=".js,.css"> <providers> ... </providers> </fileRegistration>But the output is this:
<html> <head> <link href="favicon.ico" rel="shortcut icon" /> </head> <body> <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <link rel="stylesheet" type="text/css" href="/css/site.css?cdv=1" /><script type="text/javascript" src="/scripts/nww.js?cdv=1"></script> </body> </html>So it seems that it's still rendering the stylesheet at the bottom.
Yes you'll need a runat="server" on the head tag if you want to use the PageHeadProvider
Went to bed last night so did some tests today. Seems adding runat='server' to the header tag didn't work. It just renders the stylesheets where the CDLoader is placed even with changing the default provider.
Adding ForceProvider='PageHeaderProvider' to the stylesheets and adding runat='server' to the header tag seems to work. Changed the configuration back to defaults and everything works.
So this is how my main master page looks like:
<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %> <%@ Register TagPrefix="cd" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %> <%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols" Assembly="controls" %> <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server"> <!DOCTYPE html> <html> <head runat="server"> <link href="favicon.ico" rel="shortcut icon" /> <cd:CssInclude runat="server" FilePath='~/css/site.css' ForceProvider='PageHeaderProvider' /> </head> <body> ... <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> <cd:JsInclude runat="server" FilePath='~/scripts/nww.js' /> <umb:UmbracoClientDependencyLoader runat="server" ID="ClientLoader" /> </body> </html> </asp:Content>Do you not find that this method, although it enables you to put CSS in the head and JS in the foot of your page, it also outputs the CSS link in the footer with the JS link and so it therefore duplicated?
The above methods seem to work well. One issue I found in U6 is that when you add a runat="server" to the <head> tag, en empty <title> tag is generated. Can this be eliminated?
is working on a reply...