|
JavaScript - How To Marquee
Hello Every 1 .
how do i put the below Code on A Marquee ... PHP Code: echo "<td>$name</td>"; echo "<td align='right'><font color=$font_color>$comment</font></td>"; echo "<td align='right'>$date</td>"; Similar TutorialsI've got a code. I've listed it below. The only question I have which I am sure I'm just overlooking it, but I need to find a way to squeeze this to the top of the screen and to the left. Where can I modify this on this code? The first section is the whole file. Thanks! Edit: I'm trying to remove the awkward gap on top and to the left. I merged the .js file since this will only be a file that is updated with new news. Code: <html>
<head>
<script type="text/javascript">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
/* Update 4/2011 to v1.5 - Adds optional random property. Set it to true to use.
Fixes browser crash from empty crawlers, ad and image blocking software/routines.
Fixes behavior in some IE of breaking script if an image is missing.
Adds alt attributes to images without them to aid in diagnosis of missing/corrupt
images. This may be disabled with the new optional noAddedAlt property set to true.
Internal workings enhanced for greater speed of execution, less memory usage.
*/
///////////////// No Need to Edit - Configuration is Done in the On Page Call(s) /////////////////
function marqueeInit(config){
if(!document.createElement) return;
marqueeInit.ar.push(config);
marqueeInit.run(config.uniqueid);
}
(function(){
if(!document.createElement) return;
marqueeInit.ar = [];
document.write('<style type="text/css">.marquee{white-space:nowrap;overflow:hidden;visibility:hidden;}' +
'#marq_kill_marg_bord{border:none!important;margin:0!important;}<\/style>');
var c = 0, tTRE = [/^\s*$/, /^\s*/, /\s*$/, /[^\/]+$/],
req1 = {'position': 'relative', 'overflow': 'hidden'}, defaultconfig = {
style: { //default style object for marquee containers without configured style
'margin': '0 auto'
},
direction: 'left',
inc: 2, //default speed - pixel increment for each iteration of a marquee's movement
mouse: 'pause' //default mouseover behavior ('pause' 'cursor driven' or false)
}, dash, ie = false, oldie = 0, ie5 = false, iever = 0;
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
ie = true;
try{document.documentMode = 2000}catch(e){};
iever = Math.min(document.documentMode, navigator.appVersion.replace(/^.*MSIE (\d+\.\d+).*$/, '$1'));
if(iever < 6)
oldie = 1;
if(iever < 5.5){
Array.prototype.push = function(el){this[this.length] = el;};
ie5 = true;
dash = /(-(.))/;
String.prototype.encamel = function(s, m){
s = this;
while((m = dash.exec(s)))
s = s.replace(m[1], m[2].toUpperCase());
return s;
};
}
@end @*/
if(!ie5){
dash = /-(.)/g;
function toHump(a, b){return b.toUpperCase();};
String.prototype.encamel = function(){return this.replace(dash, toHump);};
}
if(ie && iever < 8){
marqueeInit.table = [];
window.attachEvent('onload', function(){
marqueeInit.OK = true;
for(var i = 0; i < marqueeInit.table.length; ++i)
marqueeInit.run(marqueeInit.table[i]);
});
}
function intable(el){
while((el = el.parentNode))
if(el.tagName && el.tagName.toLowerCase() === 'table')
return true;
return false;
};
marqueeInit.run = function(id){
if(ie && !marqueeInit.OK && iever < 8 && intable(document.getElementById(id))){
marqueeInit.table.push(id);
return;
}
if(!document.getElementById(id))
setTimeout(function(){marqueeInit.run(id);}, 300);
else
new Marq(c++, document.getElementById(id));
}
function trimTags(tag){
var r = [], i = 0, e;
while((e = tag.firstChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
while((e = tag.lastChild) && e.nodeType === 3 && tTRE[0].test(e.nodeValue))
tag.removeChild(e);
if((e = tag.firstChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[1], '');
if((e = tag.lastChild) && e.nodeType === 3)
e.nodeValue = e.nodeValue.replace(tTRE[2], '');
while((e = tag.firstChild))
r[i++] = tag.removeChild(e);
return r;
}
function randthem(tag){
var els = oldie? tag.all : tag.getElementsByTagName('*'), i = els.length - 1, childels = [], newels = [];
for (i; i > -1; --i){
if(els[i].parentNode === tag){
childels.push(els[i]);
newels.push(els[i].cloneNode(true));
}
}
newels.sort(function(){return 0.5 - Math.random();});
i = childels.length - 1;
for (i; i > -1; --i){
tag.replaceChild(newels[i], childels[i]);
}
}
function Marq(c, tag){
var p, u, s, a, ims, ic, i, marqContent, cObj = this;
this.mq = marqueeInit.ar[c];
if(this.mq.random){
randthem(tag);
}
for (p in defaultconfig)
if((this.mq.hasOwnProperty && !this.mq.hasOwnProperty(p)) || (!this.mq.hasOwnProperty && !this.mq[p]))
this.mq[p] = defaultconfig[p];
this.mq.style.width = !this.mq.style.width || isNaN(parseInt(this.mq.style.width))? '100%' : this.mq.style.width;
if(!tag.getElementsByTagName('img')[0])
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? tag.offsetHeight + 3 + 'px' : this.mq.style.height;
else
this.mq.style.height = !this.mq.style.height || isNaN(parseInt(this.mq.style.height))? 'auto' : this.mq.style.height;
u = this.mq.style.width.split(/\d/);
this.cw = this.mq.style.width? [parseInt(this.mq.style.width), u[u.length - 1]] : ['a'];
marqContent = trimTags(tag);
tag.className = tag.id = '';
tag.removeAttribute('class', 0);
tag.removeAttribute('id', 0);
if(ie)
tag.removeAttribute('className', 0);
tag.appendChild(tag.cloneNode(false));
tag.className = ['marquee', c].join('');
tag.style.overflow = 'hidden';
this.c = tag.firstChild;
this.c.appendChild(this.c.cloneNode(false));
this.c.style.visibility = 'hidden';
a = [[req1, this.c.style], [this.mq.style, this.c.style]];
for (i = a.length - 1; i > -1; --i)
for (p in a[i][0])
if((a[i][0].hasOwnProperty && a[i][0].hasOwnProperty(p)) || (!a[i][0].hasOwnProperty))
a[i][1][p.encamel()] = a[i][0][p];
this.m = this.c.firstChild;
if(this.mq.mouse === 'pause'){
this.c.onmouseover = function(){cObj.mq.stopped = true;};
this.c.onmouseout = function(){cObj.mq.stopped = false;};
}
this.m.style.position = 'absolute';
this.m.style.left = '-10000000px';
this.m.style.whiteSpace = 'nowrap';
if(ie5) this.c.firstChild.appendChild((this.m = document.createElement('nobr')));
if(!this.mq.noAddedSpace)
this.m.appendChild(document.createTextNode('\xa0'));
for(i = 0; marqContent[i]; ++i)
this.m.appendChild(marqContent[i]);
if(ie5) this.m = this.c.firstChild;
ims = this.m.getElementsByTagName('img');
if(ims.length){
for(ic = 0, i = 0; i < ims.length; ++i){
ims[i].style.display = 'inline';
if(!ims[i].alt && !this.mq.noAddedAlt){
ims[i].alt = (tTRE[3].exec(ims[i].src)) || ('Image #' + [i + 1]);
if(!ims[i].title){ims[i].title = '';}
}
ims[i].style.display = 'inline';
ims[i].style.verticalAlign = ims[i].style.verticalAlign || 'top';
if(typeof ims[i].complete === 'boolean' && ims[i].complete)
ic++;
else {
ims[i].onload = ims[i].onerror = function(){
if(++ic === ims.length)
cObj.setup(c);
};
}
if(ic === ims.length)
this.setup(c);
}
}
else this.setup(c)
}
Marq.prototype.setup = function(c){
if(this.mq.setup) return;
this.mq.setup = this;
var s, w, cObj = this, exit = 10000;
if(this.c.style.height === 'auto')
this.c.style.height = this.m.offsetHeight + 4 + 'px';
this.c.appendChild(this.m.cloneNode(true));
this.m = [this.m, this.m.nextSibling];
if(this.mq.mouse === 'cursor driven'){
this.r = this.mq.neutral || 16;
this.sinc = this.mq.inc;
this.c.onmousemove = function(e){cObj.mq.stopped = false; cObj.directspeed(e)};
if(this.mq.moveatleast){
this.mq.inc = this.mq.moveatleast;
if(this.mq.savedirection){
if(this.mq.savedirection === 'reverse'){
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.direction === 'right'? 'left' : 'right';};
} else {
this.mq.savedirection = this.mq.direction;
this.c.onmouseout = function(e){
if(cObj.contains(e)) return;
cObj.mq.inc = cObj.mq.moveatleast;
cObj.mq.direction = cObj.mq.savedirection;};
}
} else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.mq.inc = cObj.mq.moveatleast;};
}
else
this.c.onmouseout = function(e){if(!cObj.contains(e)) cObj.slowdeath();};
}
this.w = this.m[0].offsetWidth;
this.m[0].style.left = 0;
this.c.id = 'marq_kill_marg_bord';
this.m[0].style.top = this.m[1].style.top = Math.floor((this.c.offsetHeight - this.m[0].offsetHeight) / 2 - oldie) + 'px';
this.c.id = '';
this.c.removeAttribute('id', 0);
this.m[1].style.left = this.w + 'px';
s = this.mq.moveatleast? Math.max(this.mq.moveatleast, this.sinc) : (this.sinc || this.mq.inc);
while(this.c.offsetWidth > this.w - s && --exit){
w = isNaN(this.cw[0])? this.w - s : --this.cw[0];
if(w < 1 || this.w < Math.max(1, s)){break;}
this.c.style.width = isNaN(this.cw[0])? this.w - s + 'px' : --this.cw[0] + this.cw[1];
}
this.c.style.visibility = 'visible';
this.runit();
}
Marq.prototype.slowdeath = function(){
var cObj = this;
if(this.mq.inc){
this.mq.inc -= 1;
this.timer = setTimeout(function(){cObj.slowdeath();}, 100);
}
}
Marq.prototype.runit = function(){
var cObj = this, d = this.mq.direction === 'right'? 1 : -1;
if(this.mq.stopped || this.mq.stopMarquee){
setTimeout(function(){cObj.runit();}, 300);
return;
}
if(this.mq.mouse != 'cursor driven')
this.mq.inc = Math.max(1, this.mq.inc);
if(d * parseInt(this.m[0].style.left) >= this.w)
this.m[0].style.left = parseInt(this.m[1].style.left) - d * this.w + 'px';
if(d * parseInt(this.m[1].style.left) >= this.w)
this.m[1].style.left = parseInt(this.m[0].style.left) - d * this.w + 'px';
this.m[0].style.left = parseInt(this.m[0].style.left) + d * this.mq.inc + 'px';
this.m[1].style.left = parseInt(this.m[1].style.left) + d * this.mq.inc + 'px';
setTimeout(function(){cObj.runit();}, 30 + (this.mq.addDelay || 0));
}
Marq.prototype.directspeed = function(e){
e = e || window.event;
if(this.timer) clearTimeout(this.timer);
var c = this.c, w = c.offsetWidth, l = c.offsetLeft, mp = (typeof e.pageX === 'number'?
e.pageX : e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - l,
lb = (w - this.r) / 2, rb = (w + this.r) / 2;
while((c = c.offsetParent)) mp -= c.offsetLeft;
this.mq.direction = mp > rb? 'left' : 'right';
this.mq.inc = Math.round((mp > rb? (mp - rb) : mp < lb? (lb - mp) : 0) / lb * this.sinc);
}
Marq.prototype.contains = function(e){
if(e && e.relatedTarget){var c = e.relatedTarget; if(c === this.c) return true;
while ((c = c.parentNode)) if(c === this.c) return true;}
return false;
}
function resize(){
for(var s, w, m, i = 0; i < marqueeInit.ar.length; ++i){
if(marqueeInit.ar[i] && marqueeInit.ar[i].setup){
m = marqueeInit.ar[i].setup;
s = m.mq.moveatleast? Math.max(m.mq.moveatleast, m.sinc) : (m.sinc || m.mq.inc);
m.c.style.width = m.mq.style.width;
m.cw[0] = m.cw.length > 1? parseInt(m.mq.style.width) : 'a';
while(m.c.offsetWidth > m.w - s){
w = isNaN(m.cw[0])? m.w - s : --m.cw[0];
if(w < 1){break;}
m.c.style.width = isNaN(m.cw[0])? m.w - s + 'px' : --m.cw[0] + m.cw[1];
}
}
}
}
if (window.addEventListener)
window.addEventListener('resize', resize, false);
else if (window.attachEvent)
window.attachEvent('onresize', resize);
})();
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
updated: 4/2011 for random order option, more (see below)
*/
</script>
</head>
<body>
<font color="white" face="arial" size="2" background="#0066CC">
<div class="marquee" id="mycrawler" align="left">
2/21/12 Today is testing the marquee. This will be used for announcements. Stay tuned!!!                        
</div></font>
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '1px',
'width': '1000px', //change to 1000 for normal, change to 0 for off
'background': '#0066CC',
'border': '0px solid black'
},
inc: 1, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'false', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script>
</body>
</html>
EDIT: Just figured out its Firefox only bug, seems to work in Safari. Any workarounds? Trying to get text to scroll across inside the div. The "Loading" text scrolls for a split second, but when it has loaded, the song title doesn't scroll. I looked in Firebug and the <marquee> tags are still there with the song title, they just don't seem to do anything. I'm guessing its to do with the javascript. Code: Playa.onStateChange = function() {
sTitle = (Playa.playListPosition+1) + "/" + Playa.playlistSize + " ";
sTitle += Playa.title;
nTitle = "<marquee>" + Playa.title + "</marquee>";
document.getElementById("songTitle").innerHTML = nTitle;
document.getElementById("btnPlayStop").alt = Playa.btnState;
document.getElementById("btnPlayStop").src = Playa.imageSrc;
}
<div id="songTitle"><marquee>Loading</marquee></div>
Any suggestions? Thanks I'm looking for a code like these news tickers you see on TVS nowadays at the bottom of the screen, where they show you the latest headlines. I want a simple scrolling marquee text that shows the text based on a txt file with the ability to insert an image between every line Hello i Have this Marquee Code , I use it in My smarty Template , All working fine ,with IE8 , but with Firfox , it dose Not .. Firefox will Not Show the Buttons for speed up , slow down , right , left ..under the table but instaed will include it with the Marquee.. the Strang thing if i open the Template direct to Firfox , the buttons shows up but No effect , means when u click any button will not change the Directions.. PHP Code: <marquee id="last_feed" behavior="scroll" direction="up" scrolldelay="10" height="100px" scrollamount="2" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);" > <{foreach item=project from=$myproject}> <p dir="rtl"> <div> [ <{$name}> : <b><{$comment}></b> :: <{date}> ] <img border="0" src="images/logo2.gif" width="18" height="18"> <{/foreach}> </p> </div></marquee> <div> <img src="images/Right-arrow-32.png" title="To Right" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='right';document.all.last_feed.start();" width="16" height="16"> <img src="images/Left-arrow-32.png" title="To Left" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='left';document.all.last_feed.start();" width="16" height="16"> <img src="images/Up-arrow-32.png" title="UP" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='up';document.all.last_feed.start();" width="16" height="16"> <img src="images/Down-arrow-32.png" title="DOWN" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.direction='down';document.all.last_feed.start();" width="16" height="16"> <img src="images/plus.gif" title="Speed Up" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.scrollAmount=5;" width="12" height="12"> <img src="images/minus.gif" title="Slow Down" border="0" align="center" style="cursor:hand;" onclick="document.all.last_feed.scrollAmount=3;" width="12" height="12"> </div> This is for an assignment that I am working on, have figured out most of the code already, I am just having a hard time getting one question. The question is "in the defineMarquee function it says for every item in the marqueeTxt array, store the value of the top style from the CSS style sheet in a variable named topValue. (Hint: To extract the values from the style sheet , use object detection to determine the calculated CSS style value.) After you have calculated a vale for the topValue variable, store that value in the top style property for the current item in the marqueeTxt array." In truth I really don't understand what it is asking, so if someone could help me out with some detail or what I should be looking for. Here is the code i have so far: Code:
var timeID;
var marqueeTxt = new Array();
var marqueeOff = true;
window.onload = defineMarquee;
function defineMarquee(){
var allElems = document.getElementsByTagName("*");
for (var i=0; i<allElems.length; i++){
if (allElems[i].className == "marqueeTxt") marqueeTxt.push(allElems[i]);
}
for (i = 0; i < marqueeTxt.length; i++) {
if (window.getComputedStyle) {
var topValue = marqueeTxt[i].currentStyle["top"];
}
marqueeTxt[0].style.top = topValue + "px";
}
document.getElementById("startMarquee").onclick = startMarquee;
document.getElementById("stopMarquee").onclick = stopMarquee;
}
function startMarquee(){
if(marqueeOff == true){
timeID = setInterval("moveText()",50);
marqueeOff = false;
}
}
function stopMarquee(){
clearInterval(timeID);
marqueeOff = true;
}
function moveText(){
for(var i=0; i<marqueeTxt.length; i++){
topPos = parseInt(marqueeTxt[i].style.top);
if (topPos < -110){
topPos = 700;
}else{
topPos = topPos - 1;
}
marqueeTxt[i].style.top = topPos + "px";
}
}
I have no idea if that's the only problem but I just can't get the marquee to work and I think that is part of the problem . Thank you in advance for and help. Hi, We have a marquee that we use occasionally at work when we want to announce something important. The text is dynamic and will sometimes contain links. I need to make it so that the marquee stops when you mouseover it and then begins again when you mouseout. I can get this to work just fine. The problem is, I want the pause to happen when you hover over the text ONLY, not the entire 690 width TD! I tried wrapping a span around the text and putting an action on it, but the marquee still stops even when you have your cursor out in never-never land to the right. Does anyone know how to make this work in IE without using a huge JavaScript file like on Dynamic Drive? Code: <td width="690" valign="middle" class="headerNewsFlash"> <marquee onMouseOver="this.stop();" onMouseOut="this.start();" scrolldelay="0" scrollamount="4">News Flash Text Goes Here</marquee> </td> Thanks! Hi, I am working on this site galleria and it seems that on some IE browsers on my client's computers, especially on his Vista, the Thumbnails are not showing up or loading fully and/or showing black with "error" in the spaces. On my firefox and safari I see the galleria images and scrolled text extending down the page briefly while the page is loading... Is this a JS issue or just a large image loading-time issue? I do not know JS and had adopted the JS code from another site so I am thinking there must be some errors in my JS settings. Secondly, can someone recommend a website that I could find the code and tutorial on how to install a simple JS scrolling marquee like the one I have on the site (which is hacked html right now) that will load quickly etc? Here is the site: <http://eagleeyeco.com/TEST/homes.html> Thanks! Hya, I've been trying to get a marquee working for my site, and would like it to use an external file for the text that it scrolls. Currently nothing is showing up except for a little space where it should be that is only visible when I highlight the page by selecting edit>select all I have used the script avaliable here but instead of inserting the script into the body I have put it into an external .js my script is the same as theirs except I have made the links point to my documents instead of the samples they gave, however I will paste it here incase I have managed to delete one vital full stop or something. Code: <IE:Download ID="marqueedata" STYLE="behavior:url(#default#download)" />
<marquee id="externalmarquee" direction=up scrollAmount=4 style="width:200px;height:150px;border:1px solid black;padding:3px" onmouseover="this.scrollAmount=2" onmouseout="this.scrollAmount=4" src="News.htm">
</marquee>
<script language="Javascript1.2">
function downloaddata(){
marqueedata.startDownload(externalmarquee.src,displaydata)
}
function displaydata(data){
externalmarquee.innerHTML=data
}
if (document.all)
window.onload=downloaddata
</script>
<![endif]-->
I'm guessing it's because I have incorrectly moved the code from inside the HTML to the external .js. My website is avaliable here And the code I have used to insert this into the HTML (which I have a feeling is the problem) is as follows: Code: <div> <script type="text/javascript" src="/News.js"> </script> </div> Cheers, Al Hi there Am trying out Cross Browser Marquee II by Dynamic Drive and it works great. However between the end of each scroll and the beginning of the repeat scroll, there's a large blank space. I would like to minimise this space so that the beginning repeats fairly quickly after the end. Not used to js so not sure how to do this. The page I am working on currently is at: http://www.mrjindustrial.com.au/scro..._concrete.html Thanks, hope someone can help. Hi all, i'm using this code: Code: var r_text = new Array ();
r_text[0] = "Random Text 0";
r_text[1] = "Random Text 1";
r_text[2] = "Random Text 2";
r_text[3] = "Random Text 3";
r_text[4] = "Random Text 4";
r_text[5] = "Random Text 5";
r_text[6] = "Random Text 6";
r_text[7] = "Random Text 7";
r_text[8] = "Random Text 8";
var i = Math.floor(9*Math.random());
{
document.write("<Marquee SCROLLAMOUNT=10><FONT-FAMILY: 'Calibri'><FONT-SIZE: 13pt)<B><FONT COLOR='#FFFF00'>" +
r_text[i] + "</FONT></B></FONT-SIZE></FONT-FAMILY></Marquee>");
}
This code works as far as me getting a right to left marquee, which, every time the page reloads, generates one of the random pieces of text. I'd like to add a piece of coding to this so that on mouseover, the marquee will pause, but I don't have a clue what to add, or where. My other problem: The text is yellow..size 10, yet whatever font family i specify, will ALWAYS appear in the font Georgia (in the browser im using, Firefox.) in both Opera and IE, it comes out Times New Roman! this is a real rooky problem, but i am a rooky and i'd just like to understand why, and how to ACTUALLY get Calibri. Any help would be greatly appreciated Hi - in editing a website...this javascript html is really getting on my nerves - can somebody please tell me why i keep getting the error message expected ")" when i try this code: (which ive fiddled around with bloody loads to try and resolve!) <SCRIPT LANGUAGE=JAVASCRIPT > var r_text = new Array (); r_text[0] = Text 0; r_text[1] = Text 1; r_text[2] = Text 2; var i = Math.floor(3*Math.random()); { document.write("<marquee style="font-family: 'Georgia'; color: #FFFF00; font-size: 13pt; mso-fareast-font-family: 'Arial'" ><scrollamount="15"><b>" + r_text[i] + "</b></scrollamount></marquee>"); } it seems fine to me and is getting me really frustrated now any help greatly appreciated, do whatever you like to the coding if itll work! thankyou very much, joe. |
|||||||