how to make Java code work in header.tpl

acsteve · June 7, 2011

Have java code for roll over images in header of header.tpl for my home page (index.html). Code works great on my home page but wont work in the header.tpl regardless of what I have tried to this point. I have tripled check for proper image location which was images folder. Then changed it to "templates/{$template}" buttons show up but the roll over images does not. Any ideas. I found a two year old thread on this but it did not complete. I actually replied to it early yesterday but dont see it anywhere. Hope I can post it here as this is driving me nuts.. Thanks for any help, I will post code if need be..

Thanks

Steve

acsteve · June 7, 2011

http://sterlingsweb.net < home page that shows top nav links and how they work.

http://sterlingsweb.net/clients < header tpl and shows the links but not the roll over images..

Thanks

Steve

jeremyhaber · June 7, 2011

I really hope you are not using a java applet for this. I am going to assume that you mean javascript and not java. They are different.

Your code may require the Smarty literal tags before it can work.

{literal}
<script>
// Javascript code
</script>
{/literal}

This is telling Smarty to take any curly brackets {} literally instead of phrasing them as Smarty code. Without this the following wont work in a Smarty template:

<script>
function helloworld() {
alert("Hello World");
}
</script>

This is because it believes anything in the curly brackets to be part of Smarty templates code and thus will attempt to use it as such.

If you require some Smarty variables in your javascript code you can end and start the literal statement anywhere.

{literal}
<script>
// Javascript code
alert("{/literal}{$uid}{literal}");
</script>
{/literal}

acsteve · June 8, 2011

I replied to this post yesterday waiting for it to show up. A window popped up after I submitted stating I would have to wait for approval. I responded to an older thread with the same message and never saw it either. Oh well let me restate my reply from yesterday.

Thank you very much jeremyhaber for responding. Yes I did mean to say JavaScript. I have looked for this answer in a couple of places and have written this a few times and mistakenly did not say JavaScript as I most assuredly should have.

About the literal tags, I have used them in the header section of the template. Following a video on how to customize the header template on the WHMCS website it states the following; if you have in- line JavaScript in the body section you must use literal tags. However, attempting everything I could, I used the literal tags in the header section as you outlined with no luck.

Even though I did not think it would work in the body of the template, I used it there as well.

If you don't mind I will post the JavaScript code as it appears in my header section of the template, also as it is written in my index.HTML that works fine on my home page. Though somewhat long I would like to post the body section of the TPL as well.if you or anyone else would have a quick look and know what the problem is would be greatly appreciated.

My apologies if I make this too difficult to understand my end game. It is never my intention to do that I just seem to have a problem simplifying. Your patience would also be greatly appreciated.

The java script code I am using..

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

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[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</HEAD>

THE BODY SECTION:

<center>

<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD width="50%" bgcolor="#F3F3F3" background="images/l1.jpg" style="background-position:top; background-repeat:repeat-x "></TD>

<TD> <TABLE WIDTH=751 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD bgcolor="#F3F3F3"> <TABLE WIDTH=268 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD><TABLE WIDTH=268 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD background="images/3.jpg" WIDTH=268 HEIGHT=98 ><img src="images/text.jpg" width="224" height="38" style="margin-top:29px; margin-left:37px "></TD>

</TR>

<TR>

<TD>

<IMG SRC="images/4.jpg" WIDTH=268 HEIGHT=91 ></TD>

</TR>

<TR>

<TD background="images/5.jpg" WIDTH=268 HEIGHT=253 ><img src="images/text1.jpg" width="202" height="40" style="margin-top:159px; margin-left:56px "></TD>

</TR>

</TABLE></TD>

</TR>

<TR>

<TD background="images/2.jpg" WIDTH=268 HEIGHT=125 style="background-repeat:no-repeat "><a href="underconschat.html"><img src="images/ban.jpg" width="238" height="100" border="0"></a></TD>

</TR>

</TABLE></TD>

<TD background="images/bak1.jpg"> <TABLE WIDTH=483 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD><TABLE WIDTH=483 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD><TABLE WIDTH=463 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD background="images/10.jpg" WIDTH=463 HEIGHT=98 ><table width="463" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="150"><table width="150" style="margin-top:30px; margin-left:35px " border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="top"><a href="underconstknowledgebase.html" class="top">Help</a> <img src="images/spacer.gif" width="3" height="1">|<img src="images/spacer.gif" width="3" height="1"> <a href="underconstknowledgebase.html" class="top">FAQ</a> <img src="images/spacer.gif" width="3" height="1">|<img src="images/spacer.gif" width="3" height="1"> <a href="#whmcs" class="top">Account</a></td>

</tr>

</table>

</td>

<td width="313"><a href="../index.html"><img src="images/logo.jpg" width="266" height="36" border="0" style="margin-top:31px; margin-left:4px "></a></td>

</tr>

</table>

</TD>

</TR>

<TR>

<TD>

<IMG SRC="images/11.jpg" WIDTH=463 HEIGHT=18 ></TD>

</TR>

<TR>

<TD><TABLE WIDTH=463 BORDER=0 CELLPADDING=0 CELLSPACING=0>

<TR>

<TD>

<IMG SRC="images/m0.jpg" WIDTH=28 HEIGHT=59 ></TD>

<TD><img src="images/m21.jpg" width="87" height="59"></TD>

</TR>

</TABLE></TD>

Edited June 8, 2011 by acsteve
typo, and to add code

jeremyhaber · June 8, 2011

You should really consider updating your code. Your code is using table based HTML which is typically frowned upon in the design/development community for good reason. Your code looks very messy with table structures. As well what you are doing with javascript is really out-dated.

Using javascript to edit the DOM (aka content/images on your page) is very resource intensive compared to the CSS modern alternative to image hovers. Using CSS hover images you will not need to use a literal statement in your Smarty templates resolving your issue right off the bat.

I would strongly urge you to get your site updated to HTML5 as it is a standard widely supported for both old browsers and browser specs to come in the future.

Otherwise placing literal statement around the whole javascript code should work:

{literal}
<script language="JavaScript" 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>
{/literal}

zomex · June 8, 2011

I would strongly urge you to get your site updated to HTML5 as it is a standard widely supported for both old browsers and browser specs to come in the future.

I definitely agree about using divs/CSS but I wouldn't personally recommend HTML5.

I saw your post on HostGator's forum Steve and can see that you've been working very hard on this. I recommend considering a HTML/CSS alternative as it will be much easier to integrate.

Jack

acsteve · June 8, 2011

jeremyhaber, thanks for your suggestions, but all that is not necessary for what I am doing here. I was hoping somebody would know why this little and simple java code does not work with this header.tpl and smarty? If not that's ok, however the suggestion that I use literal tags wont work. Oh well thanks anyway...

acsteve · June 8, 2011

Thanks Zomex, I have been testing it while doing other things. I have another header and footer complete to use if I have to. I just wanted to get this up for now but it does not seem like anyone knows why this does not work. I agree with the HTML5. I have several customers and all the sites are done with div's and css. I just wanted to get this up and going for now.

acsteve · June 8, 2011

jeremyhaber I answered your post before I did zomex not sure why ever other post from me seems like I get a window saying needs approval. Any way maybe this will go up. Thanks for your suggestion but I am just trying to see why this don't work. If it cant work then fine, but using the literal tags like you say wont work. Thanks anyway.

acsteve · June 9, 2011

Oh yea Jack.. very nice site you have..

sparky · June 9, 2011

I see that you still have the problem on your site and shows these errors

Error: syntax error

Source File: http://sterlingsweb.net/clients/

Line: 12, Column: 28

Source Code:

function MM_preloadImages() }

Error: MM_preloadImages is not defined

Source File: http://sterlingsweb.net/clients/

Line: 1

Jeremy has already given you the solution to this in post #5

You need to add the {literal}...{/literal} tags

jeremyhaber · June 9, 2011

I definitely agree about using divs/CSS but I wouldn't personally recommend HTML5.

HTML5 is a forward thinking approach for HTML, it has been designed in a way that is backwards compatible with its predecessors and is forwards compatible with future HTML standards. This makes HTML5 an optimal choice for any site.

Of course you will not just use HTML5 you should also be using CSS3 in all your sites. Though not all CSS3 features are supported perfectly just yet, you are able to use it without harm to the actual design of the page. Users that cannot view CSS3 in their browsers should experience minor changes in the design such as rounded corners being squared corners.

So I really don't see why you wouldn't recommend HTML5 for any site to be honest.

acsteve · June 9, 2011

J thanks for the critique but that's not what I was looking for. Its a simple java code that works great any where cept in the header.tpl If you don't know why ok. If you want to sell products that's ok to, but why don't you start your own thread? Sparky, the code errors mean nothing. I have changed that code so many times, and you both are wrong about using literal tags in this way. I have tried just to make sure but it does not work. This is not a big deal as I have another header and footer for my whmcs, just wanted to know why this does not work. Was only looking for answer, not all this. Get a life gentlemen!!

sparky · June 9, 2011

You asked a question... you got the CORRECT answer. There is no need to abuse the ones who was trying to help you. Also no one here was trying to sell you any products at all.

Those javascript errors do mean something! It means that the java interpretor has halted on the error and any javascript will not work. Your menu buttons rely on the javascript functions to work correctly.

The whmcs templates uses the smarty template engine and it works slightly different than just straight html code.

Take a look here to explain about the use of the literal tag http://www.smarty.net/docsv2/en/language.function.literal.tpl

zomex · June 9, 2011

HTML5 is a forward thinking approach for HTML, it has been designed in a way that is backwards compatible with its predecessors and is forwards compatible with future HTML standards. This makes HTML5 an optimal choice for any site.

Of course you will not just use HTML5 you should also be using CSS3 in all your sites. Though not all CSS3 features are supported perfectly just yet, you are able to use it without harm to the actual design of the page. Users that cannot view CSS3 in their browsers should experience minor changes in the design such as rounded corners being squared corners.

So I really don't see why you wouldn't recommend HTML5 for any site to be honest.

Don't get me wrong I like the features that HTML 5 brings but based on what I've seen allot of people are using extra code to make it compatible with older browsers such as IE7 which is still widely used. I've seen allot of sites use jQuery to make HTML5 function in older browsers, in my opinion it's not worth the extra fuss. Are the HTML5 tags supported in older browsers (<header> etc)? I would definately use HTML5 for mobile only based websites due to the great support most phones have now.

I also love the features of CSS3 and personally use rounded corners a fair amount as the fall back for doing so is perfect (as you mentioned).

jeremyhaber · June 9, 2011

J thanks for the critique but that's not what I was looking for. Its a simple java code that works great any where cept in the header.tpl If you don't know why ok. If you want to sell products that's ok to, but why don't you start your own thread? Sparky, the code errors mean nothing. I have changed that code so many times, and you both are wrong about using literal tags in this way. I have tried just to make sure but it does not work. This is not a big deal as I have another header and footer for my whmcs, just wanted to know why this does not work. Was only looking for answer, not all this. Get a life gentlemen!!

As far as I can see you have not applied any literal statements to your header.tpl file. To make your life a little simpler I have done it for you. Just download and extract this zip directly to your WHMCS directory.

http://whmcsaddon.com/acsteve-header.zip

This file is based off your current header.tpl found in your WHMCS installation. Please backup before applying any fixes.

Don't get me wrong I like the features that HTML 5 brings but based on what I've seen allot of people are using extra code to make it compatible with older browsers such as IE7 which is still widely used. I've seen allot of sites use jQuery to make HTML5 function in older browsers, in my opinion it's not worth the extra fuss. Are the HTML5 tags supported in older browsers (<header> etc)? I would definately use HTML5 for mobile only based websites due to the great support most phones have now.

I also love the features of CSS3 and personally use rounded corners a fair amount as the fall back for doing so is perfect (as you mentioned).

You are definitely entitled to your own opinion on using HTML5. At one point or another you will have to move forward to using HTML5, but I can definitely respect your decision to wait it out while it becomes more standard on the web. And yes HTML5 tags such as <header> are supported in older browsers. They simply just don't have any default styles set to them

As far as I can tell most of those fixes are to make browsers compatible with CSS3 rather then HTML5 which is primarily supported by all browsers!

striddy · June 9, 2011

Its a simple java code that works great any where cept in the header.tpl

.....

This is not a big deal as I have another header and footer for my whmcs, just wanted to know why this does not work. Was only looking for answer, not all this.

Do you realize that you have removed much of the code that is needed to make the image swap function ????

There are 4 sections starting with "function MM_swap" in your original site which works, however much of that code is missing in your whmcs version. That is why it is not working.

Also, do you realise that instead of messing around with this for days, WMHCS can do the integration for you? See this link

http://www.whmcs.com/integration.php

Edited June 9, 2011 by striddy

acsteve · June 9, 2011

you say

"You asked a question... you got the CORRECT answer. "

lol NO I didn't. It may help you Sparky to remember that because you say it does not make it so.

"There is no need to abuse the ones who was trying to help you".

Laughable. We live in a world like we do, and you can use that kind of word, to sum up this exchange. laughable and sad.

"Also no one here was trying to sell you any products at all."

Maybe not, I point you to the fact that I got all the advise I didn't ask for, tables are outdated etc. I was testing this. You can use .css and divs as well and will get the same problem with the javascript in the header. Makes no difference, I know I tried. I did not want to redo everything just to show you guys code, so I threw up that code as example. Table based code? I didn't need to read all about how that is not the way to make a site etc on and on.... Its not what I ask now is it? So then, I see the signature just happens to be selling addons for whmcs.. Maybe not selling maybe so.

You say

"Those javascript errors do mean something! It means that the java interpretor has halted on the error and any javascript will not work. Your menu buttons rely on the javascript functions to work correctly."

Again you are wrong. If the mistakes were a problem the code would not work in the index as well as its does. Its in the whmcs header.tpl that it don't work. If you re-read my posts you will see all I am doing is stating the same things all over again. That's what I was trying to find out is why.

I dont usally talk like this. I will be honest. It bugs me to get the kind of responses that I did in this forum. If I was asking should one keep table based websites, or asking what's the latest way to develop websites than the response would've been more appropriate. The question was simple rollover images not working JavaScript does not work in the header TPL like it does on an index HTML why not? Instead I got what I consider to be arrogant, pompous, responses. So there basically thanks for nothing I'm still no better off than when I came here. Sorry if anyone takes offense but remember what we all heard we were little" don't dish it out if you can't take it.

Steve

sparky · June 9, 2011

My God... I'm not going to waste any further time with you.

Good luck with your site.

jeremyhaber · June 9, 2011

acsteve it looks like you resolved the issue on your site.

The point about updating your site is a valid point. Newer standards would completely remove the need for javascript to do what you are doing as well make it easier for any develop you hire to work with the site. This was only advice for you and you are not required to listen to it.

If you want someone to fix your problem the forum is a start, but we are a community and not tech support so we help people out of our own free will. You want straight answers without someone saying this or that then hire someone to do it for you.

acsteve · June 11, 2011

"Do you realize that you have removed much of the code that is needed to make the image swap function ????"

I love how after the fact you now know why its not working. I respect you striddy but dont understand why you must jump in here like this.

... If you seen my thread at the other forum then you have seen where I stated that I keep changing the code testing things. That's why I posted code, so if anything about the code was bad it could have been pointed out but was not. Not to mention that I posted the home page that works fine and no code errors in it!

I "mess around with this for days" as you put it because I want to. I enjoy it. Its not like this is all I have done for days and really should not have to explain that, but if you want to call me out on the obvious then I feel like I should say something.

@jeremyhaber

you say

"As far as I can see you have not applied any literal statements to your header.tpl file. To make your life a little simpler I have done it for you. Just download and extract this zip directly to your WHMCS directory."

I did like I said, put the tags in and they did not help. That was not what the code needed, as I previously stated. I did not want to wait hours or days, and wanted to try other things and other suggestions from other people. As you can now see I have no literal tags in my TEMP site but the nav works just like it does on my home page.

you say " To make your life a little simpler I have done it for you."

now that's one of the things I am talking about. . Why would you think I want things easier? Wanting things easier or done for you is not a good character quality, so I assume then you are being insulting, to say nothing about being late. Again your advise was incorrect and tags were not needed as my temp site now shows.

Yes its a valid point about using newer standards. :css and divs are the way to go and am sure your arguments about html5 in this thread are somewhat valid to. I have several customers and not one of the sites have tables in them. Not one table in any of them. I see no reason why I have to explain off paragraphs about messy code and updating code. It just seems to me that it would have been more appropriate for you to make a quick comment if you needed to about the out-dateness of this code but then come on with an answer. The answer you gave was incorrect and I stated so, and the rest was just plain, on & on about how old this code is and how well you know it..

You say " If you want someone to fix your problem the forum is a start,"

I dont want anyone to fix anything. I would like answers, advise, from those who know a whole lot more about this than I do, and dont feel a constant need to state so in the negative critique to some questions, that's all.

" but we are a community and not tech support so we help people out of our own free will."

Now I get a lecture on how to act in a forum. Chances are you can write code rings around me. However, you jump to way many conclusions about one simple question and offer way to much info. Sorry if after several complaints about old code that I state so, especially after a smart butt and incorrect response from Sparky...

Funny thing but in another forum I got none of this with the same question. What I did get was some cool guys wanting to help and did just that. So I dont feel like I have been out of line here. I feel like you have. Just my opinion.

Edited June 11, 2011 by acsteve

striddy · June 11, 2011

"Do you realize that you have removed much of the code that is needed to make the image swap function ????"

I love how after the fact you now know why its not working. I respect you striddy but dont understand why you must jump in here like this.

... If you seen my thread at the other forum then you have seen where I stated that I keep changing the code testing things. That's why I posted code, so if anything about the code was bad it could have been pointed out but was not. Not to mention that I posted the home page that works fine and no code errors in it!

I "mess around with this for days" as you put it because I want to. I enjoy it. Its not like this is all I have done for days and really should not have to explain that, but if you want to call me out on the obvious then I feel like I should say something.

My post was NOT after the fact at all. I suggest you get your facts straight. I read the code from your live page, then made my post.

I am not "jumping in here", I made a post to explain why your code wasn't working.

You are the one asking for help, yet when help is given, you have attacked several members on this forum who are giving freely of their valuable time in doing so. Shame on you. A simple thank you is all you needed to say to all those who have wanted to assist you, yet you come up with this ridiculous post.

jeremyhaber · June 11, 2011

Wow, if you don't want my help I will be happy not to provide you with any more assistance. Simple as that. I gave you the solution using literal tags and then I gave you the same solution done for you in your header.tpl file. I went above and beyond anyones expectations on this forum.

Whether or not your site is now using literal tags or not is a different story, it does not mean our solution doesn't work. I personally tested it myself so I know it resolved your issue.

And your assumptions in these cases are wrong, I never intended any insult of any nature.

The HTML and CSS update was a quick suggestion to you. As the conversation goes some of those posts were not directed at you in anyway. I was personally talking to zomex about whether or not to use HTML5 or not in new websites. Perfectly respectable forum etiquette.

Next time we help you, if anyone does help you, a simple thanks anyways is always nicer then ripping us a new one any day.

how to make Java code work in header.tpl

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Important Information