Ok. So, I have been trying to figure out a way of making a marquee equivalent using just javascript. For the folks that don't know what a marquee is... it is Microsoft's way of making text scroll across the page or so I have read. Anyways, it is a deprecated way of getting text to scroll across a page, however this is so far the only way I have been able to do this. So, any thoughts on the subject would be great to have? Just for a little background info: I am very new to web development still and figured javascript would be the way to get it done. So if you know of a better way please let me know.
Thanks in advance.
example of scrolling text with marquee:
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>
You should check out the JQuery javascript library. It has a very useful function called .animate() that you can use to animate elements on your website.
Here's a simple example of how to position a div off the screens right side, animate it from right to left across the screen, and have it leave the left side of the screen:
HTML
Code:
<div class="scroll">This text be scrollin'!</div>
$(document).ready(function(){
$('.scroll').animate({ // call animate function on elements with class="scroll" right: $(document).width() // animates right value from the original -200px(from css) to the documents width(ie if elements right value = the document width, then element is off screen) }, 3000); // 3000 is duration in milliseconds (ie 3 seconds)
});
Also, be sure to include the JQuery library in the <head> of your document so you can use JQuery functions/code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 200px; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
border: 2px solid orange;
padding: 2px;
padding-left: 4px;
}
</style>
<script type="text/javascript">
/***********************************************
* Simple Marquee (04-October-2012)
* by Vic Phillips - http://www.vicsjavascripts.org.uk/
***********************************************/
var zxcMarquee={
init:function(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone,nu=Math.ceil(p[mde[1]]/sz)+1,z0=1;
p.style.overflow='hidden';
obj.style.position='absolute';
obj.style[mde[0]]='0px';
obj.style[mde[3]]=sz+'px';
for (;z0<nu;z0++){
clone=obj.cloneNode(true);
clone.style[mde[0]]=sz*z0+'px';
clone.style[mde[2]]='0px';
obj.appendChild(clone);
}
o=this['zxc'+id]={
obj:obj,
mde:mde[0],
sz:sz*(z0-1)
}
if (typeof(srt)=='number'){
o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
}
else {
this.scroll(id,0)
}
},
scroll:function(id,ud){
var oop=this,o=this['zxc'+id],p;
if (o){
ud=typeof(ud)=='number'?ud:0;
clearTimeout(o.dly);
p=parseInt(o.obj.style[o.mde])+ud;
if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
p+=o.sz*(ud>0?-1:1);
}
o.obj.style[o.mde]=p+'px';
o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
}
}
}
function init(){
zxcMarquee.init({
ID:'marquee1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
zxcMarquee.init({
ID:'marquee2', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
StartDelay:2000, //(optional) the auto start delay in milli seconds'. (number, default = no auto start)
StartDirection:-1 //(optional) the auto start scroll direction'. (number, default = -1)
});
}
if (window.addEventListener)
window.addEventListener("load", init, false)
else if (window.attachEvent)
window.attachEvent("onload", init)
else if (document.getElementById)
window.onload=init
</script></head>
<body>
<div id="marquee1" class="container" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
<div id="marquee2" class="container" onmouseover="zxcMarquee.scroll('marquee2',0);" onmouseout="zxcMarquee.scroll('marquee2',-1);" style="width:600px;">
<div style="position: absolute; width: 200px;">
<p style="margin-top: 0"><b><a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">Iframe &
Ajax category added</a></b><br>
The Dynamic Content category has just been branched out with a new
<a href="http://www.dynamicdrive.com/dynamicindex17/indexb.html">sub category</a>
to better organize its scripts.</p>
<p><b><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image Maker</a></b><br>
We're excited to introduce our latest web tool- Gradient Image Maker!</p>
<p><b><a href="http://www.dynamicdrive.com/forums/">DD Help Forum</a></b><br>
Check out our new forums for help on our scripts and coding in general.</p>
<p align="left"><b><a href="http://www.dynamicdrive.com/notice.htm">Terms of
Usage update</a></b><br>
Please review our updated usage terms regarding putting our scripts in an
external .js file. </p>
</div>
</div>
</body>
</html>
The marquee tag was a Microsoft non standard element and never adopted by the w3c, Internet Explorer was the only browser to support it (I think). The w3c thought it was distracting and everyone else hated it because it was a Microsoft invention, a shame really I thought it had its uses.
Anyways here is my implementation of a simple horizontal scroll:
Code:
<html>
<head>
<style type="text/css">
#scroll{
position : absolute;
white-space : nowrap;
top : 0px;
left : 200px;
}
#oScroll{
margin : 0px;
padding : 0px;
position : relative;
width : 200px;
height : 20px;
overflow : hidden;
}
</style>
<script type="text/javascript">
function scroll(oid,iid){
this.oCont=document.getElementById(oid)
this.ele=document.getElementById(iid)
this.width=this.ele.clientWidth;
this.n=this.oCont.clientWidth;
this.move=function(){
this.ele.style.left=this.n+"px"
this.n--
if(this.n<(-this.width)){this.n=this.oCont.clientWidth}
}
}
var vScroll
function setup(){
vScroll=new scroll("oScroll","scroll");
setInterval("vScroll.move()",20)
}
onload=function(){setup()}
</script>
</head>
<body>
<div id="oScroll">
<div id="scroll">This is the scrolling text</div>
</div>
</body>
</html>
Reply With Quote
Originally Posted by ZABI
i still use where ever it can be used.
Bookmarks