• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 614
  • Last Modified:

How do I create a scrolling announcement webpage?

I have a PC running Windows XP hooked up to a TV and want it to use it to display announcements.
I want the announcements to be stored in a separate HTML file for easy editing in Word(without the possibility of accidentally deleting the scroll code.
Also want it to re-read the external HTML file periodically in-case it's modified and would like it to loop when done.
I've been searching but haven't found anything that satisfies all my criteria and attempts to merge different scripts haven't gone well.
I'd like to avoid having to install php/perl/apache on XP but if I have to, I will.
0
jasonzx
Asked:
jasonzx
  • 5
  • 4
1 Solution
 
jasonzxAuthor Commented:
I found some code that almost does exactly what I want(attached below). Unfortunately I can't get it to use an external file.
I tried using:
document.write('<iframe id="datamain" src="external.html" width="800px" height="800px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>')
But it's a frame inside a frame and if I define the height too big it scrolls forever, if it's too short it cuts it off.
<style type="text/css">



#marqueecontainer{

position: relative;

width: 800px; /*marquee width */

height: 600px; /*marquee height */

background-color: white;

overflow: hidden;

border: 3px solid orange;

padding: 2px;

padding-left: 4px;

}



</style>



<script type="text/javascript">



/***********************************************

* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit http://www.dynamicdrive.com/ for this script and 100s more.

***********************************************/



var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)

var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)

var pauseit=0 //Pause marquee onMousever (0=no. 1=yes)?



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



var copyspeed=marqueespeed

var pausespeed=(pauseit==0)? copyspeed: 0

var actualheight=''



function scrollmarquee(){

if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))

cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"

else

cross_marquee.style.top=parseInt(marqueeheight)+8+"px"

}



function initializemarquee(){

cross_marquee=document.getElementById("vmarquee")

cross_marquee.style.top=0

marqueeheight=document.getElementById("marqueecontainer").offsetHeight

actualheight=cross_marquee.offsetHeight

if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit

cross_marquee.style.height=marqueeheight+"px"

cross_marquee.style.overflow="scroll"

return

}

setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)

}



if (window.addEventListener)

window.addEventListener("load", initializemarquee, false)

else if (window.attachEvent)

window.attachEvent("onload", initializemarquee)

else if (document.getElementById)

window.onload=initializemarquee



document.write('<BODY>')

document.write('<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')

document.write('<div id="vmarquee" style="position: absolute; width: 98%;">')



var iframesrc="announcement.html"

document.write('<iframe id="datamain" src="'+iframesrc+'" width="600px" height="10650px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>')



</script>







<!--YOUR SCROLL CONTENT HERE-->



<!--YOUR SCROLL CONTENT HERE-->



</div>

</div>

</BODY>

Open in new window

0
 
s8webCommented:
This should do the trick, since you don't have to worry about validation, you can use the marquee tag.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta http-equiv="refresh" content="120">
<style type="text/css">
*{margin:0;padding:0}
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
*html #container {
   height:100%;
}
#header {
   background:#000;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;
   background:#CACAFF
   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#000;
}
</style>
<script src="simplemarquee.js" type="text/javascript"></script>
<script>
function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id +
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}
</script> 
<script src="simplemarquee.js" type="text/javascript"></script></head>

<body onLoad="clientSideInclude('include', 'fromword.htm');">
<div id="container">
   <div id="header"></div>
   <div id="body">
   
   <marquee><span id="include"></span></marquee>
   </div>
   </div>
   <div id="footer"></div>
</div>
</body>
</html>

Open in new window

fromword.htm
0
 
kadabaCommented:
I haven't gone through s8web suggestion, but I saw the script you provided, seems fine.

when you change the height of the iframe also change

width: 800px; /*marquee width */

height: 600px; /*marquee height */

so that the frame contents will be displayed the way you want it to. What exactly are you having trouble with?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jasonzxAuthor Commented:
s8web: Thanks but your code scrolls 1 line horizontally. I'm looking for something more end-of-movie-credits-style.

kadaba: Once setup, the contents will be updated on a daily basis by someone without html knowledge. I just want them to be able to save a simple page from MS Word and have it just work without fiddling with the size of the page.
0
 
jasonzxAuthor Commented:
I'm a step closer. The attached code works but since the page isn't local, the script can't seem to tell when to restart. Any ideas on how to fix it?

<style type="text/css">

#marqueecontainer{
position: relative;
width: 800px; /*marquee width */
height: 600px; /*marquee height */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=0 //Pause marquee onMousever (0=no. 1=yes)?

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

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id +
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>


<!--YOUR SCROLL CONTENT HERE-->

<body onLoad="clientSideInclude('includeone', 'announcement.html');">
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<span id="includeone">
</span>

<!--YOUR SCROLL CONTENT HERE-->

</div>
</div>
</BODY>

Open in new window

0
 
s8webCommented:
Sorry about that, I didn't know you were going for vertical. There's a simple solution for what you want to do.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Marquee with Include</title>
<meta http-equiv="refresh" content="120" /><!--content is how often you want the page to refresh in seconds-->
<style type="text/css">
*{margin:0;padding:0}
img, fieldset{border:none;}
#marqueeholder{
width: 800px; /*marquee width */
background-color: white;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
margin: 0 auto;
}
</style>
<script>
function clientSideInclude(id, url) {
  var req = false;
  // For Safari, Firefox, and other non-MS browsers
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {
    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
 var element = document.getElementById(id);
 if (!element) {
  alert("Bad id " + id +
   "passed to clientSideInclude." +
   "You need a div or span element " +
   "with this id in your page.");
  return;
 }
  if (req) {
    // Synchronous request, wait till we have it all
    req.open('GET', url, false);
    req.send(null);
    element.innerHTML = req.responseText;
  } else {
    element.innerHTML =
   "Sorry, your browser does not support " +
      "XMLHTTPRequest objects. This page requires " +
      "Internet Explorer 5 or better for Windows, " +
      "or Firefox for any system, or Safari. Other " +
      "compatible browsers may also exist.";
  }
}
</script> 
</head>
<body onload="clientSideInclude('include', 'announcement.html');">
   
   <div id="marqueeholder">
   <marquee direction=up loop=true height="600" scrolldelay="150"> <!--set the height and speed (scrolldelay) here-->
   <!--Your marquee content here-->
   <span id="include"></span>
   <!--End marquee content-->
   </marquee>
   </div>
    
</body>
</html>

Open in new window

announcement.html
0
 
jasonzxAuthor Commented:
s8web: That's brilliant. Exactly what I've been searching for.
Just one follow-up question. Is it possible to smooth the scrolling? I don't think it's possible using this method but had to ask.
0
 
s8webCommented:
No, unfortunately I don't think that it is. I think that may be one reason why the marquee tag was retired. I'll keep my ear to the ground for any further solutions.
0
 
jasonzxAuthor Commented:
I did a bit of digging and this change cleans things up:
<marquee behavior="scroll" direction="up" scrolldelay="90" scrollamount="2" height="600" width="350">
0
 
s8webCommented:
Great! Thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now