PDA

View Full Version : vertical news ticker !!!


nits4u
08-25-2009, 08:38 AM
hey i need a simple "vertical news" ticker that scrolls continue with no buttons(fast,slow,stop, etc). Also i don't want to use table for this and also can be styled easily with CSS. :)

thank you. :-D

domedia
08-25-2009, 03:37 PM
Do you want a link to a good example or some ideas on how to make one?

coloeagle
08-25-2009, 03:39 PM
Something like the one on this site?
http://www.welcometothecommunity.com/

nits4u
08-26-2009, 04:39 AM
Something like the one on this site?
http://www.welcometothecommunity.com/

yes exactly like this.
I want to know how to make it !!!!

coloeagle
08-26-2009, 04:53 AM
OK, I built that site for a friend 3 or 4 years ago. Give me a little time and I will post the script/steps for you.

coloeagle
08-26-2009, 05:23 AM
Create a page that will have the information to be displayed and save it as an html file. For this I will call it news.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
<!--
body {background:#E8E8E8; color:#012370; font-size:80%;}
-->
/*]]>*/
</style>
</head>
<body>
<div id="datacontainer" style="position:absolute;left:1px;top:10px;width:100%" onmouseover="scrollspeed=0" onmouseout="scrollspeed=cache">
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- END SCROLLER CONTENT -->
</div>
<script type="text/javascript" src="scroller.js (http://www.dreamweaverclub.com/forum/view-source:http://www.welcometothecommunity.com/js/events2.js)">
</script>
</body>
</html>
You will need to have two js pages.
The first page will need the following script. This is where you will control the size of the news box. Save it as the main script source page and link to it in the page where you want it to be displayed. (For this I will refer to it as display.js)

<script type="text/javascript" src="display.js"></script>


var iframesrc="news.html"
document.write('<iframe id="datamain" src="'+iframesrc+'" width="170px" height="120px" marginwidth="1" marginheight="1" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>')

The second js page will consist of the following. This where you will control the speed and actions of the box. ( For this I will call it scroller.js)

var scrollspeed=cache=1

//Specify intial delay before scroller starts scrolling (in miliseconds):
var initialdelay=500

function initializeScroller(){
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top="5px"
setTimeout("getdataheight()", initialdelay)
}

function getdataheight(){
thelength=dataobj.offsetHeight
if (thelength==0)
setTimeout("getdataheight()",10)
else
scrollDiv()
}

function scrollDiv(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed+"px"
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top="5px"
setTimeout("scrollDiv()",40)
}

if (window.addEventListener)
window.addEventListener("load", initializeScroller, false)
else if (window.attachEvent)
window.attachEvent("onload", initializeScroller)
else
window.onload=initializeScroller
If you look near the bottom of the html above you will find the call tag for this.

When entering links from the news,html page inside the news box you will need to use target="top" inside your link tag.

nits4u
08-26-2009, 06:06 AM
thank you for ur support.
it display properly, but no scrolling (the text is fixed) !!! :(

i dn't knw if i do something wrong..

can u please go thro' tour code...

coloeagle
08-26-2009, 03:23 PM
In the html page near the bottom, make sure you have the path correct to the second js page.

Do you have a url for your page?

nits4u
08-26-2009, 07:04 PM
ops!!! sorry..
actually scroller.js' was not copied.:confused:

thanks again.:-D