adding javascript to the head tag

leafboxtea · January 2011

@mark @tim or anyone in the know....

How do I add a javascript bit into the head? I'm trying to deploy Typekit fonts onto my Vanilla install and I need to embed this:

<script type="text/javascript" src="http://use.typekit.com/tlo4aer.js"></script&gt;
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

I've been looking around through the file structure, but I can't see the logical place to put it. I tried default.master.tpl in my theme, but I broke things and got a Bonk error.

leafboxtea · January 2011

This was how I added it to default.master.tpl

<head>
  {asset name='Head'}
<div><script type="text/javascript" src="http://use.typekit.com/tlo4aer.js"></script&gt;
<script type="text/javascript">try{Typekit.load();}catch(e){}</script></div>
</head>

I also tried it without the div tag and it still broke. Is this the right place/method for it?

Mark · January 2011

The problem with putting javascript directly into a .tpl file is that the tpl extension means that smarty will pick up the file and parse it as a template. Smarty syntax uses curly braces, so javascript breaks things. The workaround is to wrap anything you don't want smarty to parse with {literal} tags. So, for your example:


{asset name='Head'}
{literal}

try{Typekit.load();}catch(e){}

{/literal}

leafboxtea · January 2011

@mark thanks for the tip! That worked out well. Don't know if its the best method, but the script is loading properly and all the functions are there.

Vanilla with Typekit fonts in place.... http://leafboxtea.com/discuss

Now, if I can just convince someone to write a plugin to to insert the code into the head it would be even easier http://vanillaforums.org/discussion/14415/plugin-request-typekit-fonts

Cablespider · January 2011

Where else could javascript be included? I tried this with Shadowbox and it sort of worked. The image popped but caused other problems.

oliverraduner · January 2011

@leafboxtea Through a plugin, you can add JavaScript to the header using a code like this:

public function Base_Render_Before(&$Sender)			
{								
	// Your JS Code...					
	$JavaScript = '						
	<script type="text/javascript">				
		document.onclick = alert("you clicked");	
	</script>';						
								
	// Send it to the Header of the page			
	$Sender->Head->AddString($JavaScript);			
}

But one question to @Mark regarding this: if I have a couple plugins that add JS to the page - is it possible to kind of "merge" them in one <script></script>-element? Multiple plugins means now f.eg. multiple jQuery ready.functions. It works, but doesn't look too pretty...

Mark · January 2011

@oliverraduner - There's no way to do that right now since all plugins are "islands" and need to rely on nothing but the core and themselves. It *could* be worth considering adding something to core like Head->AddjQueryString() that makes sure everything echoed is wrapped in the jquery ready function. Worth thinking about.

A tidier solution is to just put all of your js into it's own file, and include that. Of course people who like to have less includes would balk at that, but it is more visually pleasing to nerds like me who like to read html code :)

Cablespider · January 2011

Posted in wrong thread. Sorry.

Howdy, Stranger!

Categories

In this Discussion

adding javascript to the head tag

Comments