PDA

View Full Version : how do you produce running text


menace
10-20-2005, 12:56 PM
Hello..

How do you create text that scrolss across the screen... or to like how it is done on the news web-sites....

i.e update (then the text appears like it is just being typed with the underscore)

please advise me on both methods.

Thanks
Menace B)

davidj
10-20-2005, 01:45 PM
there are a number of ways to do this

In IE you can use the <marquee> tag (this only works in IE)

you can use javascript, xml, applets and im not sure but maybe CSS

do a search on google for text tickers

davidj
10-20-2005, 03:05 PM
here is one i have used before

i have also uploaded a flash example (see below)

paste it into the body of your page

<script language="JavaScript1.2">

//Specify the marquee's width (in pixels)
var marqueewidth="300px"
//Specify the marquee's height
var marqueeheight="25px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#DEFDD9"
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr><font face="Arial">Thank you for visiting <a href="http://www.dreamweaverclub.com">dreamweaverclub.</a> If you find this site useful, please buy us all a beer<a href="http://www.dreamweaverclub.com">click here.</a> Enjoy your stay!</font></nobr>'


marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+ "px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee 2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidt h*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.st yle.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+ "px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';he ight:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';he ight:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

i will post the .SWF once i work out how

kate
10-20-2005, 03:30 PM
This one can be used as a news scroller,

The script scrolls up screen. now your sorted up and across..lol

<script language="JavaScript1.2">

/*
Cross browser Marquee II- Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/

//Specify the marquee's width (in pixels)
var marqueewidth="200px"
//Specify the marquee's height
var marqueeheight="150px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//Pause marquee onMousever (0=no. 1=yes)?
var pauseit=1

//Specify the marquee's content
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<font face="Verdana">Thank you for visiting <a href="http://www.dynamicdrive.com">Dynamic Drive.</a><p>If you find this script useful, please consider linking to us by <a href="../link.htm">clicking here.</a><p>Visit our partner <a href="http://javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials.</font>'


////NO NEED TO EDIT BELOW THIS LINE////////////

marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
var actualheight=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.top=parseInt(marqueeheight)+8+ "px"
cross_marquee.innerHTML=marqueecontent
actualheight=cross_marquee.offsetHeight
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee 2
ns_marquee.top=parseInt(marqueeheight)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualheight=ns_marquee.document.height
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){

if (iedom){
if (parseInt(cross_marquee.style.top)>(actualheigh t*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.sty le.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+ "px"
}
else if (document.layers){
if (ns_marquee.top>(actualheight*(-1)+8))
ns_marquee.top-=copyspeed
else
ns_marquee.top=parseInt(marqueeheight)+8
}
}

if (iedom||document.layers){
with (document){
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';he ight:'+marqueeheight+';overflow:hidden" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px;width:10 0%;">')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee">')
write('<layer name="ns_marquee2" width='+marqueewidth+' height='+marqueeheight+' left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
}
</script>


;)

Jim_Shady
10-21-2005, 08:39 AM
Just on a personal note - I find text tickers / scrollers very annoying, distracting, and that they also make the webpage look 'cheap'. But thats only my opinion...

Shady.

davidj
10-21-2005, 08:55 AM
Just on a personal note - I find text tickers / scrollers very annoying, distracting, and that they also make the webpage look 'cheap'. But thats only my opinion...

Shady.
yes me too but they do a job

for example a news site or a Financial page. Useful for small bites of information like stock values or news flashes or a football site(soccer for those members in the states!!) which would display results of games that day.

i dont build websites anymore I have moved over to online application development (did that sound Pretentious ?) and i use a ticker to get messages across to users around the world. Say if the site is going down for maintenance etc
( i tried a static message to the page but people overlooked them!!!)

there is a place for them and they can be useful when used correctly

domedia
10-24-2005, 01:32 AM
Just on a personal note - I find text tickers / scrollers very annoying, distracting, and that they also make the webpage look 'cheap'. But thats only my opinion...

Shady.
I'm pretty much agree to this :) altough clients sometimes require them anyways.
They're one of those 'cool' effects, that normally does not increase the user experience. Main problem is that people read at different speeds, and the scroller only runs at one speed ;)