Author Topic: Javascript in HTML Block (Read 3601 times)

cyber-burn · « **on:** June 05, 2010, 09:44:05 AM »

Good Morning,

I am working on a HTML block with javascript, and the javasript will run fine when previewing the block, but does not run when the block is shown in the portal? I believe it has something to do with the way I am calling the function on the load of the body HTML tag, bug I'm not sure. Any help would be appreciated

Nathaniel · « **Reply #1 on:** June 05, 2010, 10:20:22 AM »

Could you post the code that you are trying to use?

cyber-burn · « **Reply #2 on:** June 05, 2010, 10:23:14 AM »

Code: [Select]

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 2; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem
("http://www.reefersparadise.com/POTM/POTM1.jpg");
image_list[image_index++] = new imageItem("http://www.reefersparadise.com/POTM/POTM2.jpg");

var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</script>

<BODY OnLoad="rotateImage('rImage')">

<center>
<A HREF="http://www.reefersparadise.com/smf/index.php/board,86.0.html">
<img name="rImage" src="http://www.reefersparadise.com/POTM/POTM1.jpg" width=180 height=180 alt="Click here to enter this months POTM Contest."></A>
<font face="Comic Sans MS" size="2">Congrats to our POTM Winners <br>Chris and Oldsaint!</font></center>

</BODY>

This is the code I'm using at the moment. Just a standard Javascript image rotation code. Seems to work find when previewing the block, but does not work when the block is in place. Thanks for taking a look!

This is the code I'm trying to use. Just a standard javascript image rotator. The non-functioning block ca

Nathaniel · « **Reply #3 on:** June 05, 2010, 10:39:20 AM »

Why are you using a "body" tag within a block?

That code had several issues, although it worked fine for me when previewing and when viewing on the main page.

The code below fixes some of the more blatant html errors (like using a deprecated center tag and using the body tag).

Code: [Select]

<script language="JavaScript">
<!-- Begin
var interval = 2; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://www.reefersparadise.com/POTM/POTM1.jpg");
image_list[image_index++] = new imageItem("http://www.reefersparadise.com/POTM/POTM2.jpg");

var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</script>

<div style="text-align: center;">
<a href="http://www.reefersparadise.com/smf/index.php/board,86.0.html">
<img name="rImage" id="rImage" src="http://www.reefersparadise.com/POTM/POTM1.jpg" width=180 height=180 alt="Click here to enter this months POTM Contest.">
</a><br />
<font face="Comic Sans MS" size="2">Congrats to our POTM Winners <br>Chris and Oldsaint!</font>
</div>

<script language="javascript">
rotateImage('rImage');
</script>

cyber-burn · « **Reply #4 on:** June 05, 2010, 04:42:16 PM »

Thank you for your help. Looks like I need to pay more attention when re-using old code.

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: Javascript in HTML Block (Read 3601 times)

cyber-burn

Javascript in HTML Block

Nathaniel

Re: Javascript in HTML Block

cyber-burn

Re: Javascript in HTML Block

Nathaniel

Re: Javascript in HTML Block

cyber-burn

Re: Javascript in HTML Block