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

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;
}

Answer 2

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

<script type="text/javascript">
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);
</script>

This is untested, but I´ve done it this way.

友情链接