logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 08-25-2009, 08:38 AM   #1
nits4u
 
Join Date: Jun 2009
Posts: 133
Default vertical news ticker !!!

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.
nits4u is offline   Reply With Quote
Old 08-25-2009, 03:37 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Do you want a link to a good example or some ideas on how to make one?
domedia is offline   Reply With Quote
Old 08-25-2009, 03:39 PM   #3
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

Something like the one on this site?
http://www.welcometothecommunity.com/
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-26-2009, 04:39 AM   #4
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

Quote:
Originally Posted by coloeagle View Post
Something like the one on this site?
http://www.welcometothecommunity.com/
yes exactly like this.
I want to know how to make it !!!!
nits4u is offline   Reply With Quote
Old 08-26-2009, 04:53 AM   #5
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

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.
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-26-2009, 05:23 AM   #6
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

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
Code:
<!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">
</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)
HTML Code:
<script type="text/javascript" src="display.js"></script>
Code:
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)
Code:
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.
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-26-2009, 06:06 AM   #7
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

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...
nits4u is offline   Reply With Quote
Old 08-26-2009, 03:23 PM   #8
coloeagle
coloeagle's Avatar
 
Join Date: Sep 2008
Location: Colorado, USA
Posts: 596
Default

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?
__________________
The Beauty of CSS (One of my hobbies)
Home Security (My real Job)
Multiple Link Styles with CSS
coloeagle is offline   Reply With Quote
Old 08-26-2009, 07:04 PM   #9
nits4u
 
Join Date: Jun 2009
Posts: 133
Default

ops!!! sorry..
actually scroller.js' was not copied.

thanks again.
nits4u is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:36 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com