Jump to content

Image Rollovers are breaking WHMCS


Recommended Posts

I have my templated completely done except that when I add the javascript code for image rollovers it breaks the template and absolutely nothing displays.

 

The code that I am adding is this:

 

<script type="text/javascript">

<!--

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_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_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>

 

How can I have image rollovers in a WHMCS template?

Link to comment
Share on other sites

Common Customisation Problems

 

Views: 6225Add to Favorites - Printable Version

 

A common problem when customising templates.......

 

Template errors can be caused for a number of reasons but most commonly they occur if you include CSS or JavaScript in your template files. These codes often contain { and } symbols which are the syntax used for template tags and so when the template systems tries to interpret these it creates an error. To avoid this, make sure you include all CSS and JS code in external files and then include them as necessary. If this is not the cause of your issue then just open a support ticket providing a link to the url where you are experiencing a blank page and we'll investigate what the error is for you.

 

 

I think some people put the {literal} tags around it, you may be able to search these forums for it....

 

I just use an external file myself.

Link to comment
Share on other sites

Not being a JS coder, I 'cheated' and put mine in an external file,

<body>

<script type="text/javascript" src="/support/includes/wz_tooltip.js"></script>

 

which meant my formatting was consistent, as well as adding the most common text into my language file to save having to scroll through major extra line in my TPL files, as well as eliminating any of the usual typos (like forgetting a ";")

 

 

my client register TPL looks like <tr><td width="150" class="fieldarea">{$LANG.clientareafirstname}</td><td><input type="text" name="firstname" size=30 value="{$clientfirstname}"> * <a href="#" onmouseover="Tip('{$LANG.tooltipfirstname}')">{$LANG.tooltiphelp}</a></td></tr>

 

the help text called is

$_LANG["tooltipfirstname"] = "Enter the first name (and last name below)<br/>of the person who would normally access your account.<br/>You will be able to add additional contacts after registering";

 

and

 

And the shortcut to the image link is

$_LANG["tooltiphelp"] = "<img src=\"/support/images/clientarea/helpsm2.png\" border=\"0\" alt=\"tooltip\"/>";

 

 

I'm sure there's a better way to do it, but this is a good place to start.

Link to comment
Share on other sites

I have my templated completely done except that when I add the javascript code for image rollovers it breaks the template and absolutely nothing displays.

 

The code that I am adding is this:

 

<script type="text/javascript">

<!--

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_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_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>

 

How can I have image rollovers in a WHMCS template?

 

 

Try this is you want to add the "<script> tags"

 


{literal}
<script type="text/javascript">
<!--
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_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_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}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated