Rolling Text Box Question

[AnitaB]

I am trying to create a rolling text box and am having some difficulty. The box shows up but the text is not rolling. Can anyone help? The code I used is as follows:

 

The HTML code:

 

Text for scrolling box here.

initSlidingContent('scrollingContainer',3);

 

 

The CSS code:

 

#scrollingContainer{

width:120px;

height:160px;

background-color: #E2EBED;

float:left;

margin-right:10px;

font-size:0.9em;

}

 

Thanks!

Anita

[Andrea]

Maybe it has to do with the JavaScript that's supposed to make it scroll?

[AnitaB]

Sorry, here is that code which I placed in my index.html file after the above html code: (now that's everything I have for the rolling text box)

 

var slideTimeBetweenSteps = 30; // General speed variable (Lower = slower)

 

 

var scrollingContainer = false;

var scrollingContent = false;

var containerHeight;

var contentHeight;

 

var contentObjects = new Array();

var originalslideSpeed = false;

 

function slideContent(containerId)

{

var topPos = contentObjects[containerId]['objRef'].style.top.replace(/[^\-0-9]/g,'');

topPos = topPos - contentObjects[containerId]['slideSpeed'];

if(topPos/1 + contentObjects[containerId]['contentHeight']/1<0)topPos = contentObjects[containerId]['containerHeight'];

contentObjects[containerId]['objRef'].style.top = topPos + 'px';

setTimeout('slideContent("' + containerId + '")',slideTimeBetweenSteps);

 

}

 

function stopSliding()

{

var containerId = this.id;

contentObjects[containerId]['slideSpeed'] = 0;

}

 

function restartSliding()

{

var containerId = this.id;

contentObjects[containerId]['slideSpeed'] = contentObjects[containerId]['originalSpeed'];

 

}

function initSlidingContent(containerId,slideSpeed)

{

scrollingContainer = document.getElementById(containerId);

scrollingContent = scrollingContainer.getElementsByTagName('DIV')[0];

 

scrollingContainer.style.position = 'relative';

scrollingContainer.style.overflow = 'auto';

scrollingContent.style.position = 'relative';

 

scrollingContainer.onmouseover = stopSliding;

scrollingContainer.onmouseout = restartSliding;

 

originalslideSpeed = slideSpeed;

 

scrollingContent.style.top = '0px';

 

contentObjects[containerId] = new Array();

contentObjects[containerId]['objRef'] = scrollingContent;

contentObjects[containerId]['contentHeight'] = scrollingContent.offsetHeight;

contentObjects[containerId]['containerHeight'] = scrollingContainer.clientHeight;

contentObjects[containerId]['slideSpeed'] = slideSpeed;

contentObjects[containerId]['originalSpeed'] = slideSpeed;

 

slideContent(containerId);

 

}

 

[newseed]

I think the script is fine. Just make sure its placed between the

tags.

[AnitaB]

Thanks!! It's working! However, the only line that is not validating is:

 

if(topPos/1 + contentObjects[containerId]['contentHeight']/1<0)topPos = contentObjects[containerId]['containerHeight'];

 

with the "<" highlighted and the following error message:

 

This message may appear in several cases:

 

You tried to include the "<" character in your page: you should escape it as "<"

You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.

Another possibility is that you forgot to close quotes in a previous tag.

 

Do you know why that might be the case?

 

Thanks again!

Anita

Edited April 16, 2009 by AnitaB

[jlhaslip]

I think that in order to validate, the javascript needs to be placed in an external file and called from the file. or place CDATA tokens around the script. Can't remember exactly. Not a big js user here.

[newseed]

jlhaslip is correct. It's better to put it in it's own file and then link it in your

.