|
JavaScript - Scrolling Marquee Based On A .txt File
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 Similar TutorialsHi, 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! Sorry if I'm describing this wrong. But I was wondering if there was any premade dropdown menu which opens based on what position you are on the page. For example, when I'm on the top of the page and hover the mouse over the dropdown menu, the menu opens upward instead of downward because the navigation is mid-screen. But if I was to be more than halfway across the screen and still see the navigation as it was on top of the screen and hover the mouse over it, the dropdown menu opens downward as oppose to up. I hope I explained that right or at least if it sounds right to someone. Any help would be greatly appreciated. If you could direct me to a resource you may know of. Thank you for your time. Hi, I have some code that performs differently in Opera than it does in any other browser. So I have a stylesheet specifically for opera. Is there a way to do something like this, where I check the browser, and if it's not opera, then load the default sheet, otherwise load the opera-specific css? Code: <script>
// Browser Detection Javascript
// copyright 1 February 2003, by Stephen Chapman, Felgall Pty Ltd
// You have permission to copy and use this javascript provided that
// the content of the script is not changed in any way.
function whichBrowser() {
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("opera") != -1) return 'Opera';
if (agt.indexOf("staroffice") != -1) return 'Star Office';
if (agt.indexOf("webtv") != -1) return 'WebTV';
if (agt.indexOf("beonex") != -1) return 'Beonex';
if (agt.indexOf("chimera") != -1) return 'Chimera';
if (agt.indexOf("netpositive") != -1) return 'NetPositive';
if (agt.indexOf("phoenix") != -1) return 'Phoenix';
if (agt.indexOf("firefox") != -1) return 'Firefox';
if (agt.indexOf("safari") != -1) return 'Safari';
if (agt.indexOf("skipstone") != -1) return 'SkipStone';
if (agt.indexOf("msie") != -1) return 'Internet Explorer';
if (agt.indexOf("netscape") != -1) return 'Netscape';
if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
if (agt.indexOf('\/') != -1) {
if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
return navigator.userAgent.substr(0,agt.indexOf('\/'));}
else return 'Netscape';} else if (agt.indexOf(' ') != -1)
return navigator.userAgent.substr(0,agt.indexOf(' '));
else return navigator.userAgent;
}
if(whichBrowser() != 'Opera')
{
<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
}
else
{
<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.OPERA.css" rel="stylesheet" />
}
</script>
As of this writing, that code seems to break my page, as if it doesn't like loading a sheet based on an if/else clause. 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>"; I'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>
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! 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. 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 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. Hi there, I was wondering of there is any way to have a browser window scroll down when your mouse reaches the bottom of the page? Any help would be much appreciated, Thanks +++ is it possible to scroll / jump to say, 10px above a div? i tried adding padding, but it doesn't work. also, when I use <a href="#xxxx">, is it possible to prevent the browser from adding #xxxx to the url in the browser? thanks!!! +++ Hi, I'm looking to create a div which contains a list of news items which can be vertically scrolled through by hovering near the top or the bottom of the div. It will then automatically start scrolling through the content. The nearer to the bottom of the div they position their mouse, the faster the scrolling is. Is this something which is possible, and if so how can I do this? Thanks Curt Hello. I am in the process of making a basic game board using javascript. Just a table with a bunch of cells that are blank, soon to be colored. However, what I want to do is create my board and be able to scroll depending on where the mouse cursor is. For example, if it is 100px away from the right side of the screen, then move the board to the right. I am trying to use the information from: here I can't seem to get it to work. I have checked firebug, set and checked breakpoints, but it never moves and I am not sure why. Could anyone please help? Thank you. Heres my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
#land {
table-layout: fixed;
width: 2500px;
height: 2500px;
}
#land td {
width: 25px;
height: 25px;
border: 1px solid black;
empty-cells:show;
}
#land tr {
height: 25px;
}
</style>
<script type="text/javascript" src="World/world.js"></script>
<script type="text/javascript" src="mapscrolling.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body id="mainBody">
<div id="mainDiv">
</div>
<script type="text/javascript" >
new CursorDivScroll( 'mainDiv', 20, 20 ); // HERES THE REFERENCE!
var i, j;
body = document.getElementById("mainDiv");
land = document.createElement("table");
land.setAttribute("id", "land");
land.setAttribute("cellspacing", "0");
land.style.border = "1";
for(i = 0; i < 100; ++i)
{
var row = document.createElement("tr");
for(j = 0; j < 100; ++j)
{
var cell = document.createElement("td");
cell.appendChild(document.createElement("div")) // tried &nsbd; but didn't work
row.appendChild(cell);
}
land.appendChild(row);
}
body.appendChild(land);
</script>
</body>
</html>
I am creating a testimonials page on a customers site, and I am wanting it to be like a scrolling content. I have the border created, and I want to have text inside the border that will scroll sideways displaying a new one every 10 seconds or so, but having the ability to move between the content. Can anyone tell me what sort of script I should use? I've seen something like it before, but I've had a mind blank. I know it's some kind of Java scripting. Any ideas? Thanks in advance hey, basically, on my blog i have a "load more" button at the bottom which works great. it uses AJAX to pull in the additional content. now, i want to keep that button, but I also want it to automatically load this content when you scroll to the bottom of the page (endless scrolling - like you see on a lot of sites). so far this is my code. I'm really knew to jquery so I'm sure the problem is obvious to you guys, but please be kind haha. #article_wrapper contains all the blog posts. #loaded contains the new ones that are loaded in with AJAX. #older_posts is the load more button. #load_more is a div around the load more button. thanks! Code: $(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
$('#articles_wrapper').append("<div class='loaded'></div>");
$('div.loaded:last').load(url);
var last = $('div.loaded:last ul');
if (last.is(':empty')) {
$('#older_posts').remove();
}
url="/ajax/content_load.php" + $('#older_posts').attr('href') + " #load_more";
$('#older_posts').load(url);
return false;
}
});
|
|||||||