crear marquesina en javascript

chemon · #1 (**permalink**) 30/01/2007, 04:18

Saludos a todos

Estoy intentando crear una marquesina con javascript, porque la etiqueta <marquee> no funciona bien en todos los navegadores, pero no hay manera.

He conseguido crear algo mediante capas y tablas pero no queda demasiado bien.

He visto algunos códigos en internet, que funcionan mediante la etiqueta <ilayer> pero no me funcionan bien. Además, leí que la etiqueta <ilayer> está obsoleta.

Alguien sabe de algún código para crear marquesinas mediante javascript?

Gracias por la colaboración

Shade · #2 (**permalink**) 30/01/2007, 04:48

JS

Código:

/* Argumentos: id del layer que contiene el scroller (dentro de wn), ancho y alto del scroller
   (de wn), numero de items (repetir 1er item al final), eje vertical u horizontal, onmouseover */
function dw_scroller(id, w, h, num, axis, bMouse) {
    this.id=id; this.el = document.getElementById? document.getElementById(id): null; 
    if (!this.el) return; this.css = this.el.style; 
    this.css.left = this.x = 0; this.css.top = this.y = 0;
    this.w=w; this.h=h; this.num=num; this.axis=axis||"v"; 
    this.ctr=0; //Pausa hasta carga de la pagina 0=false, 1=true
    this.pause=5000; this.speed=60;
    if (bMouse) dw_scrollers.setMouseEvents(this.el);
    this.lastTime = new Date().getTime(); this.check = 0;
    this.index = dw_scrollers.ar.length;  dw_scrollers.ar[this.index] = this;
    this.active = true;
}

dw_scroller.prototype.setTiming = function(speed, pause) {
    this.speed = speed; this.pause = pause;
}

dw_scroller.prototype.controlScroll = function() {
    if (this.ctr > this.num-1) {
        this.shiftTo(0, 0); this.ctr = 1;
    } else {
        switch (this.axis) {
            case "v" :
                if (this.y > -this.h * this.ctr) { 
                    var ny = this.y + -1 * this.elapsed/1000 * this.speed;
                    ny = Math.max(ny, -this.h * this.ctr);
                    this.shiftTo(0, ny);	
                } else this.doPause();
                break;
            case "h" :
                if (this.x > -this.w * this.ctr) { 
                    var nx = this.x + -1 * this.elapsed/1000 * this.speed;
                    nx = Math.max(nx, -this.w * this.ctr);
                    this.shiftTo(nx, 0);	
                } else this.doPause();
            break;
        }
    }
}

dw_scroller.prototype.doPause = function() {
    this.check += this.elapsed;
    if (this.check >= this.pause) { this.ctr++; this.check = 0; }
}

dw_scroller.prototype.shiftTo = function(x, y) {
    this.css.left = (this.x = x) + "px";
    this.css.top = (this.y = y) + "px";
}

// Pausa y continue
dw_scrollers = {};  
dw_scrollers.ar = []; // Acceso a las instancias del scroller

dw_scrollers.setMouseEvents = function(obj) {
    obj.onmouseover = dw_scrollers.halt;
    obj.onmouseout = dw_scrollers.resume;
}

dw_scrollers.halt = function() {
    var curObj;
    for (var i=0; curObj = dw_scrollers.ar[i]; i++) 
        if ( curObj.id == this.id ) { curObj.active = false; return; }
}

dw_scrollers.resume = function(e) {
    var curObj;
    for (var i=0; curObj = dw_scrollers.ar[i]; i++) {
        if ( curObj.id == this.id ) {
            e = e? e: window.event;
            var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
            if ( this != toEl && !dw_contained(toEl, this) ) { 
                var now = new Date().getTime();
                curObj.elapsed = now - curObj.lastTime;
                curObj.lastTime = now; curObj.active = true; return; 
            }
        }
    }
}

// Manejo de todas las instancias mediante un timer
dw_scrollers.timer = window.setInterval("dw_scrollers.control()", 10);
dw_scrollers.control = function() {
    var curObj;
    for (var i=0; curObj = dw_scrollers.ar[i]; i++) {
        if ( curObj.active ) {
            var now = new Date().getTime();
            curObj.elapsed = now - curObj.lastTime;
            curObj.lastTime = now; curObj.controlScroll();
        }
    }
}

/* Remover todas las capas dentro de tablas para ns6+/mozilla (necesario para scrollers dentro
   de tablas). Id de los scrollers (ex. div que contiene el scroll, por defecto wn). */
dw_scrollers.GeckoTableFix = function() {
    var ua = navigator.userAgent;
    if ( ua.indexOf("Gecko") > -1 && ua.indexOf("Firefox") == -1 
        && ua.toLowerCase().indexOf("like gecko") == -1 ) {
        dw_scrollers.hold = [];
        for (var i=0; arguments[i]; i++) {
            var wndo = document.getElementById( arguments[i] );
            var holderId = wndo.parentNode.id;
            var holder = document.getElementById(holderId);
            document.body.appendChild( holder.removeChild(wndo) );
            wndo.style.zIndex = 1000;
            var pos = getPageOffsets(holder);
            wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
            dw_scrollers.hold[i] = [ arguments[i], holderId ];
        }
        window.addEventListener("resize", dw_scrollers.rePosition, true);
    }
}

// Ns6+/mozilla necesitan reposicionar layers onrezise cuando el scroller se encuentra dentro de tablas.
dw_scrollers.rePosition = function() {
    if (dw_scrollers.hold) {
        for (var i=0; dw_scrollers.hold[i]; i++) {
            var wndo = document.getElementById( dw_scrollers.hold[i][0] );
            var holder = document.getElementById( dw_scrollers.hold[i][1] );
            var pos = getPageOffsets(holder);
            wndo.style.left = pos.x + "px"; wndo.style.top = pos.y + "px";
        }
    }
}

function getPageOffsets(el) {
    var left = el.offsetLeft;
    var top = el.offsetTop;
    if ( el.offsetParent && el.offsetParent.clientLeft || el.offsetParent.clientTop ) {
        left += el.offsetParent.clientLeft;
        top += el.offsetParent.clientTop;
    }
    while ( el = el.offsetParent ) {
        left += el.offsetLeft;
        top += el.offsetTop;
    }
    return { x:left, y:top };
}

// Devuelve true si oNode es contenido por oCont.
function dw_contained(oNode, oCont) {
  if (!oNode) return; // Previene errores en caso de alt-tab
  while ( oNode = oNode.parentNode ) if ( oNode == oCont ) return true;
  return false;
}

// Previene fallo de memoria en ie
dw_scrollers.unHook = function() {
  var i, curObj;
  for (i=0; curObj = dw_scrollers.ar[i]; i++) {
    if ( curObj.el ) { 
      curObj.el.onmouseover = null;
      curObj.el.onmouseout = null;
      curObj.el = null;
    }
  }
}

if ( window.addEventListener ) window.addEventListener( "unload", dw_scrollers.unHook, true);
else if ( window.attachEvent ) window.attachEvent( "onunload", dw_scrollers.unHook );

HTML

Código:

				<div class="hallzmarq">
				    <div id="hold">
                        <div id="wn">
                            <div id="hallz">
                                <table align="center" id="imgTbl" border="0" cellpadding="0" cellspacing="0">
                                    <tr align="center">
										<td align="center">
											Mensaje1
										</td>
										<td align="center">
											Mensaje2
										</td>
										<td align="center">
											Mensaje3
										</td>
										<td align="center">
											Mensaje4
										</td>
										<td align="center">
											Mensaje1 //repetir mensaje 1
										</td>
                                    </tr>    
                                </table>
                            </div>
                        </div>
                    </div>
		</div>

CSS

Código:

#hold {
position:relative;
width:394px;
height:19px;
z-index:1000;
overflow:hidden
}
#hold #wn {
position:absolute;
left:0;
top:0;
width:394px;
height:19px;
z-index:1;
clip:rect(0, 394px, 19px, 0);
overflow:hidden
}
#hold #wn #hallz {
position:absolute;
z-index:1
}
#hold #wn #hallz #imgTbl {
width:3940px;
background-image:url(/images_new/home/fondo_marq.gif)
}
#hold #wn #hallz #imgTbl td {
width:394px
}
#hold #wn #hallz #imgTbl span {
background-color:#EDEDED;
padding-left:5px;
padding-right:5px
}

Para adaptarlo a tu contenido tendras que variar los height y los width, pero fijate que para calcular el width de #imgTbl tienes que calcular asi:

nº de mensajes (incluyendo la repeticion del 1) x ancho de los td (en mi caso eran 10 mensajes x 394px de cada td = 3940px.

P.D.: Este codigo me costo mucho desarrollarlo y conseguir que funcione bien. Asi que por favor, tratenlo con cuidado xD.

chemon · #3 (**permalink**) 30/01/2007, 05:33

Gracias por la ayuda

Voy a probarlo