Forums / Setup & design / javascript in templates.... one more time please!

javascript in templates.... one more time please!

Next topic

Author	Message
Morten M	Friday 25 July 2003 3:12:20 am I know this is one of the good old problems and I have read http://ezwiki.blanko.info/index.php/3XHT_EscapeLiteral http://www.ez.no/developer/ez_publish_3/documentation/customization/tips_tricks/javascript_in_templates and just about every forum message on the topic over and over again, so please excuse me for bringing this up again... I just can't make it work...! My initial plan is to implement a dhtml menu such as http://www.opencube.com/prod_quickmenupro.html in the pagelayout template, but that seems like a pretty ambitious project at the moment... So just to get an idea of how to use javascript in the templates, i have tried to create a simple rollover image.. but not even that will work! :-( This is what i have in the head of pagelayout_mydesign.tpl: <head> <link rel="stylesheet" type="text/css" href={"stylesheets/core.css"\|ezdesign} /> <link rel="stylesheet" type="text/css" href={"stylesheets/mydesign.css"\|ezdesign} /> <SCRIPT SRC={"javascripts/rollover.js"\|ezdesign} TYPE="text/javascript" LANGUAGE="JavaScript"/> </head> __________________________ And here is the line in the body of pagelayout_mydesign.tpl that calls the rollover function: <A HREF="http://www.uni2.dk" TARGET="_blank" onMouseOver="return skiftBillede('uni2logogrey','billede2')" onMouseOut="return skiftBillede('uni2logogrey','billede1')"><IMG SRC={"uni2logogrey.gif"\|ezimage} NAME="uni2logogrey" BORDER="0" HEIGHT="20" WIDTH="54" /></A> __________________________ "javascripts/rollover.js" looks like this: <SCRIPT TYPE="text/javascript" LANGUAGE="javascript"> if (document.images) { billede1 = new Image(); billede1.src = "/design/mydesign/images/uni2logogrey.gif"; billede2 = new Image(); billede2.src = "/design/mydesign/images/uni2logo.gif"; } function skiftBillede(Navn,Endelse) { if (document.images) { document [Navn].src = eval(Endelse + ".src"); } } </SCRIPT> __________________________ When I try to view my site in the browser I don't get any error messages.. and i don't get the content of my site either... :-( ...all I get is the background color of the site and nothing else... I have tried using {literal}, {ldelim} and {rdelim} tags as well, but either I'm not doing it right (which is very likely) or it just doesn't work (not so likely)... What am I doing wrong and what should I do instead? Regards, Morten.
Bjørn Kaarstein	Friday 25 July 2003 4:26:03 am Hi. I'm using a javascript in order to load a new image every time my site is reloaded, and it goes like this: {literal} <SCRIPT LANGUAGE="Javascript"><!-- function image() { }; image = new image(); number = 0; // imageArray image[number++] = "<img src='http://www.full_url.no/images/image1.jpg' border='0'>" image[number++] = "<img src='http://www.full_url.no/images/image2.jpg' border='0'>" image[number++] = "<img src='http://www.full_url.no/images/image3.jpg' border='0'>" image[number++] = "<img src='http://www.full_url.no/images/image4.jpg' border='0'>" image[number++] = "<img src='http://www.full_url.no/images/image5.jpg' border='0'>" image[number++] = "<img src='http://www.full_url.no/images/image6.jpg' border='0'>" // keep adding items here... increment = Math.floor(Math.random() * number); document.write(image[increment]); //--></SCRIPT> {/literal} I think that the key to your problem might be that you're not linking to the image with a full URL. Regards Bjørn
Paul Forsyth	Friday 25 July 2003 4:29:11 am It may be your reference to your javascript file. For an external javascript file I use this: <script language="JavaScript1.2" src={'design/user/templates/javascript/view.js'\|ezurl}></script> Though your design reference may work... I should use that really :) Which browser do you use? Try mozilla if you can, it has a javascript console and a javascript debugger. The console informs you of all manner of errors... Paul
Morten M	Friday 25 July 2003 6:04:38 am ...thanks guys... i don't know what i'm doing wrong here, but i still can't make it work... grrr... but Paul, apparently it helped using the reference you suggested.. using: {literal} <script language="JavaScript1.2" src={'design/demo/javascripts/rollover.js'\|ezurl}></script> {/literal} I can actually see the entire page with all the content and not just the background colour as with the other reference... funny in a way as http://www.ez.no/developer/ez_publish_3/documentation/customization/tips_tricks/javascript_in_templates suggests that you use <SCRIPT SRC={"javascripts/rollover.js"\|ezdesign} TYPE="text/javascript" LANGUAGE="JavaScript"/> ... The rollover still doesn't work however.. the image shows up (uni2logogrey.gif), but it does not change into uni2logo.gif when hovering the mouse over it.. i tried changing the line from: <A HREF="http://www.uni2.dk" TARGET="_blank" onMouseOver="return skiftBillede('uni2logogrey','billede2')" onMouseOut="return skiftBillede('uni2logogrey','billede1')"><IMG SRC={"uni2logogrey.gif"\|ezimage} NAME="uni2logogrey" BORDER="0" HEIGHT="20" WIDTH="54" /></A> to: {literal}<A HREF="http://www.uni2.dk" TARGET="_blank" onMouseOver="return skiftBillede('uni2logogrey','billede2')" onMouseOut="return skiftBillede('uni2logogrey','billede1')"><IMG SRC="http://www.full_url.com/design/demo/images/uni2logogrey.gif" NAVN="uni2logogrey" BORDER="0" HEIGHT="20" WIDTH="54"></A>{/literal} and I also changed the src's in 'rollover.js' to the full url as you suggested Bjørn... ...but it still doesn't work... I use IE6 and Opera once in a while just for testing purposes... I never thought I would have to use an entire day just making a simple rollover (and not even succeeding)... I get tired already thinking of all the time I have to put into the dhtml menu.. haha... but I have to make it work! It must be possible?! Time for weekend... :-) Cheers, Morten.
Jan Borsodi	Saturday 26 July 2003 5:43:55 am You should view the source of your page and see what the <SCRIPT src= line says. If it points to where the javascript is you should try to enter the path in the webbrowser. If the result is that you get the web again then the problem is with rewrite rules. You must add the .js extension to the rewrite rule, it's either in your Apache configuration or in a .htaccess file. If the path is wrong you should try to enter the path directly using plain HMTL SCRIPT SRC="design/mydesign/javascripts/rollover.js TYPE="text/javascript" LANGUAGE="JavaScript"/> What the ezdesign operator does is to see if the file exists in the current design and if it does expands so the full path is returned. -- Amos Documentation: http://ez.no/ez_publish/documentation FAQ: http://ez.no/ez_publish/documentation/faq
Morten M	Tuesday 29 July 2003 12:13:50 am Hi Jan, the source should be ok... when I enter the path in my browser i'm asked if i want to open or save the file 'rollover.js'. i tried using plain html to include the script as you suggested: <SCRIPT SRC="design/mydesign/javascripts/rollover.js TYPE="text/javascript" LANGUAGE="JavaScript"/> but that didn't work.. again i just got the background colour of the site and no content... I'm about to give up here, though I really hoped I could have a dhtml menu on the site.. but that's probably going to be even more problematic than putting in a simple rollover... :-( Thanks for your help anyway! Regards. Morten.
RW Wood	Monday 08 September 2003 9:46:59 pm Try referencing the script like this: <script type="text/javascript" language="javascript" src={"scripts/header.js"\|ezdesign}></script> I found that the way documented doesn't work, but this one does, at least for me. HTH RWW