Front page block

[Eddy Matthews]

I've created a front page block that has html and javascript in it to select a random image and display it, but it's not working in TinyPortal....

If I use the built in editor, it just displays the code on the front page. If I turn the editor off, I then get a blank box with no image displayed...

The code I'm using works perfectly on my website, so I have no idea why it won't work with TP...

Code Select Expand

<html>
<head>
<title>Paddleducks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#E5E5E5" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<script language="JavaScript" type="text/javascript">
<!--
    // JavaScript to interpolate random images into a page.
    var ic = 50;     // Number of alternative images
    var xoxo = new Array(ic);  // Array to hold filenames

xoxo[0] = "http://www.paddleducks.co.uk/rotate/a_mackenzie1.jpg";
xoxo[1] = "http://www.paddleducks.co.uk/rotate/ameriqueen97.jpg";
xoxo[2] = "http://www.paddleducks.co.uk/rotate/bellecincinnati15.jpg";
xoxo[3] = "http://www.paddleducks.co.uk/rotate/donald-b.jpg";
xoxo[4] = "http://www.paddleducks.co.uk/rotate/geo-m-verity01.jpg";
xoxo[5] = "http://www.paddleducks.co.uk/rotate/golden-girl.jpg";
xoxo[6] = "http://www.paddleducks.co.uk/rotate/ladylois.jpg";
xoxo[7] = "http://www.paddleducks.co.uk/rotate/sprague20.jpg";
xoxo[8] = "http://www.paddleducks.co.uk/rotate/ss-moose.jpg";
xoxo[9] = "http://www.paddleducks.co.uk/rotate/star92.jpg";
xoxo[10] = "http://www.paddleducks.co.uk/rotate/waverley.jpg";
xoxo[11] = "http://www.paddleducks.co.uk/rotate/MQ.jpg";
xoxo[12] = "http://www.paddleducks.co.uk/rotate/Natchez05.jpg";
xoxo[13] = "http://www.paddleducks.co.uk/rotate/1.jpg";
xoxo[14] = "http://www.paddleducks.co.uk/rotate/2.jpg";
xoxo[15] = "http://www.paddleducks.co.uk/rotate/3.jpg";
xoxo[16] = "http://www.paddleducks.co.uk/rotate/4.jpg";
xoxo[17] = "http://www.paddleducks.co.uk/rotate/reliant.jpg";
xoxo[18] = "http://www.paddleducks.co.uk/rotate/jason.jpg";
xoxo[19] = "http://www.paddleducks.co.uk/rotate/Finlandia.jpg";
xoxo[20] = "http://www.paddleducks.co.uk/rotate/Elias.jpg";
xoxo[21] = "http://www.paddleducks.co.uk/rotate/FinlandiaQ.jpg";
xoxo[22] = "http://www.paddleducks.co.uk/rotate/Ilmarinen.jpg";
xoxo[23] = "http://www.paddleducks.co.uk/rotate/lonnrot.jpg";
xoxo[24] = "http://www.paddleducks.co.uk/rotate/lonnrot2.jpg";
xoxo[25] = "http://www.paddleducks.co.uk/rotate/josifstalin.jpg";
xoxo[26] = "http://www.paddleducks.co.uk/rotate/turgenev.jpg";
xoxo[27] = "http://www.paddleducks.co.uk/rotate/Hjejlen1.jpg";
xoxo[28] = "http://www.paddleducks.co.uk/rotate/Hjejlen2.jpg";
xoxo[29] = "http://www.paddleducks.co.uk/rotate/Skibladner.jpg";
xoxo[30] = "http://www.paddleducks.co.uk/rotate/Skibladner2.jpg";
xoxo[31] = "http://www.paddleducks.co.uk/rotate/Uusi.jpg";
xoxo[32] = "http://www.paddleducks.co.uk/rotate/Lahtis.jpg";
xoxo[33] = "http://www.paddleducks.co.uk/rotate/Borussia.jpg";
xoxo[34] = "http://www.paddleducks.co.uk/rotate/Alameda.jpg";
xoxo[35] = "http://www.paddleducks.co.uk/rotate/DerShelde.jpg";
xoxo[36] = "http://www.paddleducks.co.uk/rotate/Elisabeth.jpg";
xoxo[37] = "http://www.paddleducks.co.uk/rotate/President.jpg";
xoxo[38] = "http://www.paddleducks.co.uk/rotate/Indalen.jpg";
xoxo[39] = "http://www.paddleducks.co.uk/rotate/Constitution.jpg";
xoxo[40] = "http://www.paddleducks.co.uk/rotate/Dostojevski.jpg";
xoxo[41] = "http://www.paddleducks.co.uk/rotate/Goethe.jpg";
xoxo[42] = "http://www.paddleducks.co.uk/rotate/MurrayRiverPrincess.jpg";
xoxo[43] = "http://www.paddleducks.co.uk/rotate/MurrayRiverPrincess2.jpg";
xoxo[44] = "http://www.paddleducks.co.uk/rotate/Helvetie.jpg";
xoxo[45] = "http://www.paddleducks.co.uk/rotate/Italia.jpg";
xoxo[46] = "http://www.paddleducks.co.uk/rotate/Kingswear.jpg";
xoxo[47] = "http://www.paddleducks.co.uk/rotate/Maidoftheloch.jpg";
xoxo[48] = "http://www.paddleducks.co.uk/rotate/Montreux.jpg";
xoxo[49] = "http://www.paddleducks.co.uk/rotate/PSRuby.jpg";

function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(ic);
// -->
</script>


<SCRIPT LANGUAGE="JavaScript">
document.writeln('<TD'+'><IMG SRC="'+xoxo[choice]+'" HEIGHT="100%" WIDTH="100%" ><'+'/TD>');
</SCRIPT>

</body>
</html>


Has anyone got any idea why this won't work? I'm sure I'm missing something somewhere! The block is set as HTML + BBC

Regards
Eddy

[Zetan]

Try a Script type block.

[G6Cad]

Also remove the html tag, the html and php articles have those premade allready, you just add the content code itself

[Zetan]

I think it needs more than that G6, I tried it with all the head and body tags removed, and as it is, it causes the blocks below to break up.

[Eddy Matthews]

Thanks guys - I've almost got it working properly, by setting it as a scriptbox, and NOT using frames or title, it's nearly there.... The code also got modified slightly as follows:

Code Select Expand

<script language="JavaScript" type="text/javascript">
<!--
    // JavaScript to interpolate random images into a page.
    var ic = 50;     // Number of alternative images
    var xoxo = new Array(ic);  // Array to hold filenames

xoxo[0] = "http://www.paddleducks.co.uk/rotate/a_mackenzie1.jpg";
xoxo[1] = "http://www.paddleducks.co.uk/rotate/ameriqueen97.jpg";
xoxo[2] = "http://www.paddleducks.co.uk/rotate/bellecincinnati15.jpg";
xoxo[3] = "http://www.paddleducks.co.uk/rotate/donald-b.jpg";
xoxo[4] = "http://www.paddleducks.co.uk/rotate/geo-m-verity01.jpg";
xoxo[5] = "http://www.paddleducks.co.uk/rotate/golden-girl.jpg";
xoxo[6] = "http://www.paddleducks.co.uk/rotate/ladylois.jpg";
xoxo[7] = "http://www.paddleducks.co.uk/rotate/sprague20.jpg";
xoxo[8] = "http://www.paddleducks.co.uk/rotate/ss-moose.jpg";
xoxo[9] = "http://www.paddleducks.co.uk/rotate/star92.jpg";
xoxo[10] = "http://www.paddleducks.co.uk/rotate/waverley.jpg";
xoxo[11] = "http://www.paddleducks.co.uk/rotate/MQ.jpg";
xoxo[12] = "http://www.paddleducks.co.uk/rotate/Natchez05.jpg";
xoxo[13] = "http://www.paddleducks.co.uk/rotate/1.jpg";
xoxo[14] = "http://www.paddleducks.co.uk/rotate/2.jpg";
xoxo[15] = "http://www.paddleducks.co.uk/rotate/3.jpg";
xoxo[16] = "http://www.paddleducks.co.uk/rotate/4.jpg";
xoxo[17] = "http://www.paddleducks.co.uk/rotate/reliant.jpg";
xoxo[18] = "http://www.paddleducks.co.uk/rotate/jason.jpg";
xoxo[19] = "http://www.paddleducks.co.uk/rotate/Finlandia.jpg";
xoxo[20] = "http://www.paddleducks.co.uk/rotate/Elias.jpg";
xoxo[21] = "http://www.paddleducks.co.uk/rotate/FinlandiaQ.jpg";
xoxo[22] = "http://www.paddleducks.co.uk/rotate/Ilmarinen.jpg";
xoxo[23] = "http://www.paddleducks.co.uk/rotate/lonnrot.jpg";
xoxo[24] = "http://www.paddleducks.co.uk/rotate/lonnrot2.jpg";
xoxo[25] = "http://www.paddleducks.co.uk/rotate/josifstalin.jpg";
xoxo[26] = "http://www.paddleducks.co.uk/rotate/turgenev.jpg";
xoxo[27] = "http://www.paddleducks.co.uk/rotate/Hjejlen1.jpg";
xoxo[28] = "http://www.paddleducks.co.uk/rotate/Hjejlen2.jpg";
xoxo[29] = "http://www.paddleducks.co.uk/rotate/Skibladner.jpg";
xoxo[30] = "http://www.paddleducks.co.uk/rotate/Skibladner2.jpg";
xoxo[31] = "http://www.paddleducks.co.uk/rotate/Uusi.jpg";
xoxo[32] = "http://www.paddleducks.co.uk/rotate/Lahtis.jpg";
xoxo[33] = "http://www.paddleducks.co.uk/rotate/Borussia.jpg";
xoxo[34] = "http://www.paddleducks.co.uk/rotate/Alameda.jpg";
xoxo[35] = "http://www.paddleducks.co.uk/rotate/DerShelde.jpg";
xoxo[36] = "http://www.paddleducks.co.uk/rotate/Elisabeth.jpg";
xoxo[37] = "http://www.paddleducks.co.uk/rotate/President.jpg";
xoxo[38] = "http://www.paddleducks.co.uk/rotate/Indalen.jpg";
xoxo[39] = "http://www.paddleducks.co.uk/rotate/Constitution.jpg";
xoxo[40] = "http://www.paddleducks.co.uk/rotate/Dostojevski.jpg";
xoxo[41] = "http://www.paddleducks.co.uk/rotate/Goethe.jpg";
xoxo[42] = "http://www.paddleducks.co.uk/rotate/MurrayRiverPrincess.jpg";
xoxo[43] = "http://www.paddleducks.co.uk/rotate/MurrayRiverPrincess2.jpg";
xoxo[44] = "http://www.paddleducks.co.uk/rotate/Helvetie.jpg";
xoxo[45] = "http://www.paddleducks.co.uk/rotate/Italia.jpg";
xoxo[46] = "http://www.paddleducks.co.uk/rotate/Kingswear.jpg";
xoxo[47] = "http://www.paddleducks.co.uk/rotate/Maidoftheloch.jpg";
xoxo[48] = "http://www.paddleducks.co.uk/rotate/Montreux.jpg";
xoxo[49] = "http://www.paddleducks.co.uk/rotate/PSRuby.jpg";

function pickRandom(range) {
if (Math.random)
return Math.round(Math.random() * (range-1));
else {
var now = new Date();
return (now.getTime() / 1000) % range;
}
}
// Write out an IMG tag, using a randomly-chosen image name.
var choice = pickRandom(ic);
// -->
</script>


<SCRIPT LANGUAGE="JavaScript">
document.writeln('<TD'+'><IMG SRC="'+xoxo[choice]+'" WIDTH="100%" ><'+'/TD>');
</SCRIPT>


But every now and then it inserts some blank lines above and below the image, so it moves down the screen..... This seems to be random, sometimes it happens, but about 90% of the time it displays fine....

If you run the code I gave above (the one in this message) with the settings as described, you'll see the problem - Just keep clicking on "home" or press your browser refresh button to keep loading a new image - then once in a while it will be displayed with blank lines above and below it.

Is this a bug? Anyone have a workaround?

Regards
Eddy

[Eddy Matthews]

Problem solved - I'd accidentally left in some table commands <td> and </td> which were screwing it up...

Eddy

[Zetan]

Good stuff Eddy  :coolsmiley:

Topic marked Solved

[G6Cad]

Glad you got it sorted..