Why marquee works in chrome and not others

@Tasmanian_DevilMay 23.2016

Howdy~
Below is my code on working page and the underline sections are ones that work on test page by them self ok but when added to working page, it only works in chrome and not others. But on test page by itself it works fine in all browsers, what have I done wrong?

[CODE]<html> <head> <title>Home</title>

<script src=”dbMenu.js” type=”text/javascript”></script> [U]<script src=”ledmarquee.js” type=”text/javascript”></script>[/U] <link href=”global.css” type=”text/css” rel=”stylesheet” media=”screen”> <link href=”dropDown.css” type=”text/css” rel=”stylesheet” media=”screen”>

[U]<style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%;} .digit {float:left; width:14px; height:26px; margin-right:2px; background:#000 url(ledmarquee.gif) 0px 0px;} #ledmarquee {height:26px; visibility:hidden; background-color:#000000;} </style> <style> p { text-indent: 50px; } </style>[/U] </head>

<body bgcolor=”#eee” onload=”detectBrowser()”> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5″; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));</script> <ul id=”menu” class=”dbMenu onMouse”>

<li>Test A <ul> <li><a href=””>Test 1</a></li> <li><a href=””>Test 2</a></li> <li><a href=””>Test 3</a></li> </ul> </li>

<li>Test B <ul> <li><a href=””>Test 1</a></li> <li><a href=””>Test 2</a></li> </ul> </li>

<li>Test C <ul> <li><a href=””>Test 1</a></li>

</ul> </li>

<br><br> <center><img src=”/logo1.png” width=”400px” height=”184px”><br>[U]<div id=”ledmarquee”><yellow>This Is A Test</div>[/U]</center> <br><br> <p>Blah blah blah.</p> <center><img src=”/American-flag-waving.gif”></center> </body> </html>[/CODE]

Thanks
Tasmanian

to post a comment

JavaScript

3 Comments(s) _↴

@Kevin2May 24.2016 — #Start with reasonably valid HTML:

[B]<yellow>[/B] is not and never has been a tag. If you want to change text color use [B]color: yellow;[/B] in CSS.

[B]<center>[/B] was deprecated in, oh, 1997 or so. Use [B]margin: auto;[/B] or [B]text-align: center;[/B] in CSS.

As to the actual problem, there could be a couple of things: The <yellow> tag mentioned does nothing and may in fact mess up the script that runs the "marquee" depending on how it finds the text to scroll. Because it does nothing you have default black text on a black background. Secondly, [B]visibility:hidden;[/B] in the CSS for that DIV hides the marquee's div.

All that out of the way, here's a modified, valid version of your page. Change what you need.

[code=html]<!DOCTYPE html> 
 <html>
 <head>
 <meta charset="utf-8">
 <title>Home</title>
 
  <script src="dbMenu.js"></script>
   <script src="ledmarquee.js"></script>
  <link href="global.css" rel="stylesheet" media="screen">
  <link href="dropDown.css" rel="stylesheet" media="screen">
 
 <style>
 body { font-family: verdana, arial, sans-serif; font-size: 90%; background-color: #eee; }
 /* .digit {} removed as it is not used. Add it back if needed. */
 #ledmarquee { height: 26px; background-color: #000; color: yellow; margin: auto; }
 p { text-indent: 50px; }
 img { display: block; margin: 1em auto; }
 </style>
 </head>
 
 <body onload="detectBrowser()">
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <ul id="menu" class="dbMenu onMouse">
 <li>Test A
 <ul>
 <li><a href="">Test 1</a></li>
 <li><a href="">Test 2</a></li>
 <li><a href="">Test 3</a></li>
 </ul>
 </li>
 
   <li>Test B
   <ul>
   <li><a href="">Test 1</a></li>
   <li><a href="">Test 2</a></li>
   </ul>
   </li>
 
   <li>Test C
   <ul>
   <li><a href="">Test 1</a></li>
   </ul>
   </li>
  </ul>
 
 <img src="/logo1.png" width="400" height="184" alt="Logo">
 
 <div id="ledmarquee">This Is A Test</div>
 
 <p>Blah blah blah.</p>
 
 <img src="/American-flag-waving.gif" alt="American flag waving"> <!--Add width and height attributes to center this image-->
 </body>
 </html>[/code]

@Tasmanian_DevilauthorMay 25.2016 — #Kevin~

Ok I used you code ya gave me and I not having any luck. All kinds of things are going on depends what browser ya are in, so I will post the external javascript so ya can see whats going on with it. The javascript marquee was created by a buddy of mine and I have been trying to make it work just no luck other than in chrome. So if ya can make it work please do thank you for ya help.

[CODE]mwidth=25;
 mdelay=200;
 dumpExtraSpaces=false; 
 mpos=0;
 chars=" 0123456789abcdefghijklmnopqrstuvwxyz+-*/=?^&().,'!~$";
 content=new Array();
 color=new Array();
 colors=new Array();
 colors['green']=0;
 colors['yellow']=-27;
 colors['red']=-54;
 colors['blue']=-81;
 colorind=new Array();
 colorind[0]='green';
 var mtxt;
 function marqueeInit(){
 mtxt=document.getElementById("ledmarquee").innerHTML.toLowerCase();
 mtxt=mtxt.replace(/.../g,'~');
 mtxt=mtxt.replace(/&/g,'&');
 mtxt=mtxt.replace(/"/g,"'");
 mtxt=mtxt.replace(/[/g,'(');
 mtxt=mtxt.replace(/]/g,')');
 mtxt=mtxt.replace(/{/g,'(');
 mtxt=mtxt.replace(/}/g,')');
 mtxt=mtxt.replace(/[nr]/g,' ');
 if(dumpExtraSpaces) mtxt=mtxt.replace(/s{2,}/g,' ');
 bpos=mtxt.indexOf('<');
 attempt=0;
 while(bpos>=0){
 mtxt.search(/<([^>]*)>/);
 ctmp=RegExp.$1;
 colorind[bpos]=ctmp;
 mtxt=mtxt.replace(/<[^>]*>/,'');
 bpos=mtxt.indexOf('<');
 attempt++;
 if(attempt>500){
 alert('parse failure'); // prevent browser lockups if something goes fishy (open <)
 return false;
 }
 }
 mcont="<div style='display:none'>"+mtxt+"<p> </p></div>";
 for(i=0;i<mwidth;i++){
 mcont+="<div class='digit' id='js_dig"+i+"'></div>n";
 mtxt=' '+mtxt+' ';
 }
 curcolor=0;
 for(i=0;i<mtxt.length;i++){
 if(colorind[i-mwidth]!=null){
 curcolor=colors[colorind[i-mwidth]]||0;
 }
 color[i]=curcolor;
 content[i]=-16*chars.indexOf(mtxt.substr(i,1));
 }
 document.getElementById("ledmarquee").style.width=(mwidth*16)+'px';
 document.getElementById("ledmarquee").innerHTML=mcont;
 document.getElementById("ledmarquee").style.visibility='visible';
 mtimer=setInterval('marqueeScroll()',mdelay);
 }
 function marqueeScroll(){
 for(i=0;i<mwidth;i++){
 document.getElementById('js_dig'+i).style.backgroundPosition=content[i+mpos]+'px '+color[i+mpos]+'px';
 }
 mpos++;
 if(mpos==mtxt.length-mwidth) mpos=0;
 }
 function onloadAppend(func){
 var oldonload=window.onload;
 if(typeof window.onload!='function'){
 window.onload=func;
 } else {
 window.onload=function(){
 if(oldonload) {
 oldonload();
 }
 func();
 }
 }
 }
 onloadAppend(marqueeInit);[/CODE]

@Kevin2May 25.2016 — #After a quick search I found the original script and associated code (be sure you have downloaded the image file!) here: http://www.javascriptsource.com/text-effects/led-marquee.html

Using that script this works in Chrome, Firefox, IE11 and Edge:

[code=html]<!DOCTYPE html> 
 <html>
 <head>
 <meta charset="utf-8">
 <title>Home</title>
 
  <link href="global.css" rel="stylesheet" media="screen">
  <link href="dropDown.css" rel="stylesheet" media="screen">
   <script src="ledmarquee.js"></script>
  <script src="dbMenu.js"></script>
 
 <style>
 body { font-family: verdana, arial, sans-serif; font-size: 90%; background-color: #eee; }
 .digit {float:left; width:14px; height:26px; margin-right:2px; background:#000 url(ledmarquee.gif) 0px 0px;}
 #ledmarquee { height: 26px; background-color: #000; visibility: hidden; margin: auto; }
 p { text-indent: 50px; }
 img { display: block; margin: 1em auto; }
 </style>
 </head>
 
 <body onload="detectBrowser()">
 <script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
 fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <ul id="menu" class="dbMenu onMouse">
 <li>Test A
 <ul>
 <li><a href="">Test 1</a></li>
 <li><a href="">Test 2</a></li>
 <li><a href="">Test 3</a></li>
 </ul>
 </li>
 
   <li>Test B
   <ul>
   <li><a href="">Test 1</a></li>
   <li><a href="">Test 2</a></li>
   </ul>
   </li>
 
   <li>Test C
   <ul>
   <li><a href="">Test 1</a></li>
   </ul>
   </li>
  </ul>
 
 <img src="/logo1.png" width="400" height="184" alt="Logo">
 
 <div id="ledmarquee"><yellow>This is a test</div>
 
 <p>Blah blah blah.</p>
 
 <img src="/American-flag-waving.gif" alt="American flag waving"> <!--Add width and height attributes to center this image-->
 </body>
 </html>[/code]

Apparently the .digit CSS class is needed by the script as is visibility: hidden; in #ledmarquee. And the invalid <yellow> (or another color) tag is needed by the script to determine which color character to pull from the image.

Also in #JavaScript _↴

autocmplete feature using javascript.GetCurrentPosition()onchange and onfocus functions

Success!

Help @Tasmanian_Devil spread the word by sharing this article on Twitter...

Tweet This

Why marquee works in chrome and not others

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Why marquee works in chrome and not others

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴