Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Problema con testo scorrevole orizzontale

    sto seguendo questo articolo: http://javascript.html.it/articoli/l...-scorrevole/2/
    sto cercando di trasformarlo da vaerticale a orizzontale.
    ho già modificato il javascript, ed infatti dopo il tempo impostato il testo scorre via.
    il problema però è che il secondo item nn appare.
    penso ci sia un problema di css.
    vi posto tutto il codice.
    html/js:
    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
        <HEAD>
            <TITLE>HTML.it - il sito italiano sul Web publishing</TITLE>
            
            <script src="dw_scroller.js" type="text/javascript"></script>
            <script type="text/javascript">
                function initScroller() {
                    // arguments: id of layer that scrolls, width and height of scroller (of wn),
                    // number of items (including repeated 1st item), axis ("v" or "h")
                    // set up pause/resume onmouseover/out? (true or false)
                    var scr1 = new dw_scroller('cnt', 150, 160, 5, "h", true);
                    scr1.setTiming(100, 7000);
                }
            </script>
            
            <link rel="stylesheet" type="text/css" href="style.css" />
        </HEAD>
        <body onload="initScroller()">
            
            <h2>Div scorrevole</h2>
            <div id="bg">
                <div id="wn">
                    <div id="cnt">
                        
                        <div class="item">
                            <h3>New Scroller</h3>
                            
    
    item1.</p>
                        </div>
                        
                        <div class="item">
                            
    
    item2.</p>
                        </div>
                        
                        <div class="item">
                            <h3>New Scroller</h3>
                            
    
    The new code is lean and efficient. Its time-based motion is smoother in most browsers.</p>
                            
    
    Its speed is generally more consistent across different browsers and platforms.</p>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            
            
        </BODY>
    </HTML>
    css:
    codice:
    /* sfondi e bordi del div scorrevole */
    
    #bg {
        position:relative; 
        /*    left:10px;*/
        z-index:1000;
        /*    width:170px; */
        width: 100%;
        height:180px;
    /*    background-color:#eee;*/
        border:1px solid #338;
    }
    
    /* posizionamento del div scorrevole */
    
    div#wn {
        position:absolute; 
        left:8px;
        top:6px;
    /*    width:150px; */
        width: 100%;
        height:160px;
        z-index:1;
        clip:rect(0, 150px, 160px, 0);
        overflow:hidden;
    }
    
    div#cnt {
        position:absolute;
        z-index:1;
    }
    
    /* formattazione del testo che faremo scorrere */
    
    div#cnt div.item {
        /*    width:150px;*/
        width: 100%;
        height:160px;
        color:#336;
    }
    
    div#cnt h3 {
        font-size:12px;
        margin:0 0 .5em 0;
    }
    
    div#cnt p {
        font-size:11px;
        margin:.5em 0 0 0;
    }
    
    div#cnt ul {
        margin:.5em 0 0 0;
        padding:0;
        font-size:11px;
    }
    
    div#cnt ul li {
        margin: .5em 0 0 1em;
        list-style-type:none;
    }
    potete aiutarmi??

  2. #2

  3. #3
    si certo eccolo:
    codice:
    /*************************************************************************
      This code is from Dynamic Web Coding at www.dyn-web.com
      Copyright 2001-5 by Sharon Paine 
      See Terms of Use at www.dyn-web.com/bus/terms.html
      regarding conditions under which you may use this code.
      This notice must be retained in the code as is!
    *************************************************************************/
    
    /*
        pausing scroller - vertical or horizontal 
        version date: May 2005 (March 2005, revised GeckoTableFix)
    */
    
    /*  Readable code available for licensed users */
    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||"h"; // c'era v
        this.ctr=0;
        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;
    };
    
    var dw_Inf={};
    
    dw_Inf.fn=function(h){ // c'era v anche alla riga sotto
        return eval(h)
    };
    
    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_Inf.gw=dw_Inf.fn("\x77\x69\x6e\x64\x6f\x77\x2e\x6c\x6f\x63\x61\x74\x69\x6f\x6e");
    dw_Inf.ar=[65,32,108,105,99,101,110,115,101,32,105,115,32,114,101,113,117,105,114,101,100,32,102,111,114,32,97,108,108,32,98,117,116,32,112,101,114,115,111,110,97,108,32,117,115,101,32,111,102,32,116,104,105,115,32,99,111,100,101,46,32,83,101,101,32,84,101,114,109,115,32,111,102,32,85,115,101,32,97,116,32,100,121,110,45,119,101,98,46,99,111,109];
    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";
    };
    
    dw_scrollers={};
    
    dw_scrollers.ar=[];
    dw_scrollers.setMouseEvents=function(obj){
        obj.onmouseover=dw_scrollers.halt;
        obj.onmouseout=dw_scrollers.resume;
    };
    
    dw_Inf.get=function(ar){
        var s="";
        var ln=ar.length;
        for(var i=0;i<ln;i++){
            s+=String.fromCharCode(ar[i]);
        }
        return s;
    };
    
    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_Inf.mg=dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x65\x74\x28\x64\x77\x5f\x49\x6e\x66\x2e\x61\x72\x29');
    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;
                }
            }
        }
    };
    
    dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x3d\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x2e\x68\x6f\x73\x74\x6e\x61\x6d\x65');
    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&&dw_scrollers.ready){
                var now=new Date().getTime();
                curObj.elapsed=now-curObj.lastTime;
                curObj.lastTime=now;
                curObj.controlScroll();
            }
        }
    };
    
    dw_Inf.x0=function(){
        dw_Inf.fn('\x69\x66\x28\x21\x28\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x3d\x3d\x22\x22\x7c\x7c\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x3d\x3d\x22\x31\x32\x37\x2e\x30\x2e\x30\x2e\x31\x22\x7c\x7c\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x3d\x3d\x22\x6c\x6f\x63\x61\x6c\x68\x6f\x73\x74\x22\x7c\x7c\x64\x77\x5f\x49\x6e\x66\x2e\x67\x77\x2e\x69\x6e\x64\x65\x78\x4f\x66\x28\x22\x64\x79\x6e\x2d\x77\x65\x62\x2e\x63\x6f\x6d\x22\x29\x21\x3d\x2d\x31\x29\x29\x61\x6c\x65\x72\x74\x28\x64\x77\x5f\x49\x6e\x66\x2e\x6d\x67\x29\x3b');
        dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x72\x65\x61\x64\x79\x3d\x74\x72\x75\x65\x3b');
        dw_Inf.fn('\x64\x77\x5f\x73\x63\x72\x6f\x6c\x6c\x65\x72\x73\x2e\x72\x65\x61\x64\x79\x3d\x74\x72\x75\x65\x3b');
    };
    
    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);
        }
    };
    
    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";
            }
        }
    };
    
    dw_Inf.fn('\x64\x77\x5f\x49\x6e\x66\x2e\x78\x30\x28\x29\x3b');
    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
        };
    
    };
    
    function dw_contained(oNode,oCont){
        if(!oNode)return;
        while(oNode=oNode.parentNode)if(oNode==oCont)return true;
        return false;
    };
    
    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);
    al posto di h c'erano le v dove ci sono i commenti nella parte iniziale.
    ho provato varie combinazioni senza successo.

  4. #4
    le modifiche che hai fatto sicuramente non vanno bene , ma comunque ci sono diversi problemi nello script. Ma sei obbligato ad usare quello? quell'articolo è anche un pò vecchiotto, perchè non usi uno di questi ad esempio?

    http://www.gcmingati.net/wordpress/w...llanimate.html

  5. #5
    no no nn sono obbligato.
    quello che mi hai postato lo sto provando in parallelo.
    mi sa che mi butto su quello e basta allora così restringo il campo.

    su questo esempio ho solo il problema che a me serve largo quanto la pagina.
    se allargo il div al 100% le scritte partono cmq da metà del div invece che da inizio pagina.
    mi sono guardato quello che ha scritto il creatore ma nn sono riuscito a venirne fuori.
    che per caso te ne sai qualcosa circa la posizione iniziale del testo??

  6. #6
    penso tu debba modificare anche la larghezza di queste classi:

    .tickercontainer .mask

  7. #7
    in verità l'avevo già fatto ma ho svelato il mistero.
    il punto di partenza dipende da quanti[*] ci sono.
    se ce ne sono pochi parte più in mezzo, sennò tutto a destra.
    penso anche dipenda dalla risoluzione/larghezza schermo ma ancora nn ho provato perchè nn ho schermi più piccoli.

  8. #8
    no più che altro ho un altro problema:
    codice:
    jQuery.fn.liScroll = function(settings) {
        settings = jQuery.extend({
            travelocity: 0.07
        }, settings);
        return this.each(function(){
            var $strip = jQuery(this);
            $strip.addClass("newsticker")
            var stripWidth = 0;
            var $mask = $strip.wrap("<div id='mask_id' class='mask'></div>");
            var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");
            var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width
            $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).width();
            });
            $strip.width(stripWidth);
            var defTiming = stripWidth/settings.travelocity;
            var totalTravel = stripWidth+containerWidth;
            function scrollnews(spazio, tempo){
                $strip.animate({
                    left: '-='+ spazio
                    }, tempo, "linear", function(){
                    $strip.css("left", containerWidth);
                    scrollnews(totalTravel, defTiming);
                });
            }
            scrollnews(totalTravel, defTiming);
            $strip.hover(function(){
                jQuery(this).stop();
            },
            function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
            });
        });
    };
    una volte conlcuse le news che sono dentro i tag li, questi nn ripartono da soli se nn si ricarica la pagina.
    sapete dirmi dov'è che posso modificare per fare in modo che una volta conlusa la visualizzazione questa ricominci?
    in pratica nn deve mai fermarsi.

  9. #9
    ho scoperto che l'errore era nel css.
    avevo impostato per i div una larghezza al 100%.
    se invece la imposto in px funziona.
    penso che contatterò l'autore, faccii prima.
    grazie!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.