Greetings!
I am working on this cool array script that scrolls with the messages. I have come to a kink in the road.
How can I go about adding HTML into my array messages? Say...to add an href into the middle of one of the messages?
Please tell me there is a better way than adding createElement for each peice of html.
Here is my code in case you have any suggestions.
Code:
<html>
<head>
<title>Scrolling Quotes</title>
<script type="text/javascript">
var quote = new Array();
quote[0] = "1";
quote[1] = "Quote 2";
quote[2] = "Quote 3";
quote[3] = "Quote 4";
quote[4] = "Quote 5";
quote[5] = "Quote 6";
quote[6] = "Quote 7";
quote[7] = "Quote 8";
quote[8] = "Quote 9";
quote[9] = "Quote 10";
quote[10] = "Quote 11";
quote[11] = "Quote 12";
quote[12] = "Quote 13";
quote[13] = "Quote 14";
quote[14] = "Quote 15";
quote[15] = "Quote 16";
quote[16] = "Quote 17";
quote[17] = "Quote 18";
quote[18] = "Quote 19";
quote[19] = "Quote 20";
quote[20] = "END";
var qno = 0;
var timer;
//*********************************
// Add a message to the DIV
//*********************************
function addMsg()
{
obj = document.getElementById("divQuote");
txt = document.createTextNode(quote[qno]);
obj.appendChild(txt);
obj.appendChild(document.createElement("BR"));
qno++;
if (qno == quote.length-1)
{
clearInterval(timer); //clear the timer if all the quotes are done!
}
//Apply Scroll
var currentScrollHeight = obj.scrollHeight;
if (currentScrollHeight >= parseInt(obj.style.height)) // check if the scroll bar is visible now.
{
obj.scrollTop=(obj.scrollTop +100); //set the scroll height to scroll by here. (currently set to 100)
}
{
}
}
//*********************************************
// Start a timer to add the messages on load.
//*********************************************
function populate()
{
timer = setInterval("addMsg()", 1000); // start an interval timer.
}
</script>
</head>
<body onload="populate();">
<!-- DIV WHERE MESSAGES ARE LOADED SEE STYLES -->
<div id="divQuote" style="height:250px; width:300px; overflow:auto; background:#99FF00; border:1px solid black;"></div>
</body>
</html>