displaying news with javascript

Question

I keep coming up against this issue. Displaying news on a website. And I'd like to come up with a solution to use like a template, something I can just drop on a site easily.

The solution I keep seeing is an iframe with javascript to scroll the content. However, I'm really opposed to the idea of using iframes, I think the time for those has passed.

I want to use JS without a framework, because it disallows using other frameworks. Does anyone know where I could find something robust?

(I'm thinking of using vertical scrolling, but I'm also curious about other solutions)

Answer 1

Why don´t you take a div insert an other div an give the second div a nagative top value.

` function toTop(top_value) { if (top_value == 0) { document.getElementById('news').css.top = '0'; }

document.getElementById('news').css.top = '-5px'; } window.setTimeout('toTop(1)', 100); window.setTimeout('toTop(0)', 10000); ` This is untested, but I´ve done it this way.

MaikL

Answer 2

I found a script that seems to wok well for me, maybe someone else will find this helpful

/***********************************************
* 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=1000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1; //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1; //Pause marquee onMousever (0=no. 1=yes)?
var tim;
////NO NEED TO EDIT BELOW THIS LINE////////////

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

function scrollmarquee(){
 //document.write(parseInt(cross_marquee.style.top));
  //if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
 if (document.getElementById('track').value == "") {
  if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8)) {
   cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px";
   //alert(actualheight);
  }
  else {
   //alert(parseInt(marqueeheight));
   cross_marquee.style.top=parseInt(marqueeheight)-8+"px";
  }
 }
}

//on mouse out
function mouse_out() {
 clearTimeout(tim);
 scrollmarquee;
}

//init()
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()",55)', delayb4scroll);
}

//event listener
if (window.addEventListener) {
 window.addEventListener("load", initializemarquee, false);
}
else if (window.attachEvent) {
 window.attachEvent("onload", initializemarquee);
}
else if (document.getElementById) {
 window.onload=initializemarquee;
}

the html:

<!-- scroll -->
<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" class="vmarquee_content">
 <!--YOUR SCROLL CONTENT HERE-->
</div>
</div>
<input id="track" name="track" type="hidden" value="">

and the css:

#marqueecontainer{
    position: relative;
    width: 250px; /*marquee width */

    height: 150px; /*marquee height */
    background-color: white;
    overflow: hidden;
    border: 1px solid #666666;
    padding: 2px;
    padding-left: 4px;
}
.scroll_div {
    border:solid 1px #3366FF;
    width: 260px;
    width/**/: 280px !important;
}
.vmarquee_content {
    position:absolute;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}