MyBB Community Forums

Full Version: [SOLVED] Javascript in Templates - Problems
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hej all, I got a problem while doing some new sites, I implemented javascript into the templates and it's not showing up so far.
It works nicely on normal HTML pages...
Here is the template code:
<body>
{$header}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Something</strong></td>
</tr>
<tr>
<td class="trow1" align="center">
<SCRIPT LANGUAGE="JavaScript">

<! >
<! >

<!-- Begin

var ship =  [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];

var dead = [[[201,203], [201,202,203], [201,202,202,203], [201,202,202,202,203]], [[204,206], [204,205,206], [204,205,205,206], [204,205,205,205,206]]];
And so on...
But javascript isn't working, MyBB seems to ignore it.
Any help?
I might be going crazy here, but I trust that you have included the </script> and type?

As far as my work goes (I mixed MyBB's Prototype with jQuery), I have no problems with including JS at all. Try a simple script first (just something like an alert), just to see if it is your code or MyBB...

Not that I'm doubting your JS skills... just want to be sure!
</script> and type are all there and the script works properly at a plain html page Smile
Only if I put it into my MyBB it does not show off.
It is in site source code though.

Thanks for your assistance- any ideas? Smile
(2008-11-28, 11:52 AM)LS 134 Wrote: [ -> ]</script> and type are all there and the script works properly at a plain html page Smile
Only if I put it into my MyBB it does not show off.
It is in site source code though.

Thanks for your assistance- any ideas? Smile

Where did you put the code? I've done a similar thing just yesterday, but only to show rss feeds on portal page, so if you've integrated more than one single piece of code on the same page might be more difficult for me help you.
Hej ruined,
My Code in Template looks like that:
<html>
<HEAD>
<title>{$settings['bbname']} - Site name</title>
{$headerinclude}

<style type="text/css">
.intro { font-size:10pt; font-style:italic }
.heading { font-size:14pt; font-weight:bold; font-family:sans-serif }
.title { font-size:18pt; font-weight:bold; background-color:navy; color:white; text-align:center; font-family:sans-serif }
</style>
</HEAD>

<BODY>
{$header}


<script type="text/javascript">
<! >
<! >

<!-- Begin
/* Information used to draw the ships
*/
var ship =  [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];
Now more Javascript follows, I'll just skip it till this:
/* Start the game!
*/
imagePreload();
player = setupPlayer(false);
computer = setupPlayer(true);
document.write("<center><table><tr><td align=center><p class='heading'>COMPUTER'S FLEET</p></td>"+
"<td align=center><p class='heading'>PLAYER'S FLEET</p></td></tr><tr><td>");
showGrid(true);
document.write("</td><td>");
showGrid(false);
document.write("</td></tr></table></center>");
updateStatus();
setInterval("setStatus();", 500);
//  End -->
</script>

<p class="intro">TEXT</p>


{$footer}

</BODY>
</html>
The "TEXT" is displayed, javascript is completely missing.
As stated before- works properly in plain HTML-page.
i could be wrong but by using
<!--
at the begining then it will ignore all code until it reaches
-->
I just deleted Begin and End (The commentlike lines), normally in Javascript it should be ignored.

And in fact my problem is still not solved, even with deleting these lines Javascript does NOT show up...
HTML comments in Javascript? Bound to cause some form of problem. I'll leave the rest of your Javascript unaltered since it isn't all posted:

<html>
<head>
<title>{$settings['bbname']} - Site name</title>
{$headerinclude}

<style type="text/css">
.intro { font-size:10pt; font-style:italic }
.heading { font-size:14pt; font-weight:bold; font-family:sans-serif }
.title { font-size:18pt; font-weight:bold; background-color:navy; color:white; text-align:center; font-family:sans-serif }
</style>
</head>

<body>
{$header}


<script type="text/javascript">
<!--
    //Information used to draw the ships
    var ship =  [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];
    //Rest of code
   //Start the game!
   imagePreload();
   player = setupPlayer(false);
   computer = setupPlayer(true);
   document.write("<center><table><tr><td align=center><p class='heading'>COMPUTER'S FLEET</p></td>"+"<td align=center><p class='heading'>PLAYER'S FLEET</p></td></tr><tr><td>");
    showGrid(true);
    document.write("</td><td>");
    showGrid(false);
    document.write("</td></tr></table></center>");
    updateStatus();
    setInterval("setStatus();", 500);
//-->
</script>

Can't make any gaurantees.

You are refencing the other file which includes the functions in the HTMLhead template aren't you?
Hej cool, that worked Smile
Thank you man, all my javascript does work now Wink
Hi sorry for the late reply (I'm not online during the week ends)
I see that you solved but to help other users I decided to leave what I've made for you as example.

EXAMPLE:
  • Add a Javascript RSS Box to the portal page
SOLUTION USED:
  • Manual Template modification
NEEDS:
  • Base HTML knowledge
  • Ready to be paste RSS feed javascript code

Take in mid that is better make a module for this kind of insertion but in the case you're still not able to make them (this is my case) you can follow this work-around.

NOTE:
This example is referred to portal template but is suitable for all other templates.

First of all go to your Admin CP -> Templates & Style -> Templates and choose your theme template:

Explanation image:
[Image: img01lc2.th.png]

When you've selected it you will see a list of templates chose the one you want modify, in our case it will be Portal Templates -> Portal

Explanation image:
[Image: img02hr0.th.png]

Well now we're in the template page, here we will find an editable texbox with out template exposed.
Check the html in it and define the right position for your code, then past it there.

Explanation image:
[Image: img03kr7.th.png]

Now the only thing that remain to do is save and test the result, of your work.

Modification results:
[Image: img04vx1.th.png]

Make a direct modification to templates may ruin your theme so be careful when you perform this kind of modification.

I hope it will help
Ruined