Javascript in main body.

jdubb · #1 04-03-2008, 01:32 PM

Can someone point me in the right direction on this? I just trying to put some simple rollover buttons at the top of each catagory and product page. I've tried putting the javascript in the head of home.tpl but I can't get it to work. Isn't there some tutorial on this that I just can't seem to find?

Appreciate the help.

kube · #2 04-03-2008, 01:38 PM

Hi jdubb,

What happens currently then? Any Errors?

Appears in source with no errors but doesn't appear to work at all?

Is it inline javascript or a separate js file or a combo?

Maybe a link might help or some source?

Yurij · #3 04-04-2008, 12:09 AM

Quote:

Originally Posted by jdubb

Can someone point me in the right direction on this? I just trying to put some simple rollover buttons at the top of each catagory and product page. I've tried putting the javascript in the head of home.tpl but I can't get it to work. Isn't there some tutorial on this that I just can't seem to find?

Appreciate the help.

Show the source code Javascript, and as you insert it into a template.

jdubb · #4 04-04-2008, 06:08 AM

When placing the javascript for the head in the /customer/home.tpl then placing the rest in the body of my html, I get the following message when trying to access the site.

Fatal error: Smarty error: [in customer/home.tpl line 25]: syntax error: unrecognized tag: display: block; (Smarty_Compiler.class.php, line 436) in /home/public_html/xcart/Smarty-2.6.12/Smarty.class.php on line 1095

I'm doing the rollovers in Macromedia Fireworks, then importing it into Dreamweaver to finish up whatever else I want to do. What I'm really wanting to do is replace the "Speed Bar' with rollover buttons centered above our banner logo at the top. This is the code that Dreamweaver generates and that I paste into the customer/home.tpl. I placed it right above the </head> tag.

Code:

 <style type="text/css">
td img {display: block;}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

I know I'm doing something "newbie" like. I really appreciate the guidance.
What I'm really wanting to do is replace the "Speed Bar' with rollover buttons.

Yurij · #5 04-04-2008, 07:16 AM

Insert this block in file skin1/skin1.css

PHP Code:


		
			
td img {display: block;}

Everything else in tpl...

PHP Code:


		
			
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

kube · #6 04-04-2008, 07:48 AM

Where ever you see curly { bracers } such as inline css or javascript within a tpl... then the Smarty template engine throws an error. Wrap the whole script with {literal} {/literal} tags.

Or replace the curly brackets individually with smarty code as such... {ldelim} (for a left curly) and a {rdelim} (for a right curly) .

Example taken from Yurij's code above...

td img {ldelim}display: block;{rdelim} {*** note these are individual {left/right delimiters} Ignore this if placed in skin1.css ***}

<script type="text/javascript">
{literal} {*** Note: The BEGINNING LITERAL tag that envelopes all curly bracers and helps Smarty recognise them as { bracers } ***}

{/literal} {*** Note: The END LITERAL tag that envelopes all curly bracers ***}
</script>

jdubb · #7 04-04-2008, 11:04 AM

That did the trick! Thanks to the both of you. I would've never figured that out on my own. I was getting confused with the combination of the style sheets and the smarty tags.

Thanks again.

Pretty Scrappy · #8 03-19-2009, 08:24 AM

I just have to post and say thank you to those who help fix this for " jdubb" it worked for us as well
Thank You