div con scroll horizontal

marweb · #1 (**permalink**) 08/04/2009, 09:02

Buen dia amigos foreros les hago esta consulta tengo una serie de botones echos con css, digamos sean pasos a veces hay 3 a veces hay 15 , la cosa es que los 15 no cabe en una sola linea y se pasan para abajo pero eso depende la anchura del monitor, asi que queria meter esos disv botones dentro de un div con scrool con forma de mover a derecha e izquiera horizontalmente, pero ademas que me posicione en el centro el paso en el que se encuentra el ejemplo si esta en el 4 que el 4 este en el cento , o si es en el 10 asi, alguien conoce algo que me pueda ayudar.

Saludos

Panino5001 · #2 (**permalink**) 09/04/2009, 07:12

Colocá el código que estás usando para tener una idea más clara de tu objetivo. En principio bastaría con una capa (div) con overflow hidden que contenga y enmascare tus botones, y luego jugar con la propiedad scrollLeft de dicha capa.

marweb · #3 (**permalink**) 09/04/2009, 07:58

Abajo muestro lo que me pasa, lo que quiero es que esos div botones se queden un digamos div scroll y que el que esta seleccionado quede en el centro y que se pueda mover a derecha e izquierad.

Gracias

Panino5001 · #4 (**permalink**) 09/04/2009, 09:27

No sé si te entiendo bien. Fijate si esto te sirve:

Código PHP:

  <!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=iso-8859-1" />
<title>test</title>
<style>
#contenedor{ width:400px; height:50px; overflow:hidden; position:relative; border:1px dashed #000}
#sub{position:absolute;}
#sub div{ position:absolute; top:15px; width:100px; text-align:center}
form{display:inline}
input{ height:20px; font-size:10px; width:100px; line-height:20px; margin:0; width:80px}
</style>
<script>
function $(x){return document.getElementById(x);}
function estilo(obj,w3c,IE){
    if(window.getComputedStyle){
    return parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue(w3c));
    }else{
        return parseInt(obj.currentStyle[IE]);
    }
}
onload=function(){
    
    var bots=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
    for(var i=0,bot;bot=bots[i];i++){
        var t=$('clon').cloneNode('true');
        t.style.left=i*estilo($('clon'),'width','width')+'px';
        t.firstChild.value=bot;
        (function(i,t){
            t.firstChild.onclick=function(){
                $('sub').style.left=estilo($('contenedor'),'width','width')/2-estilo(t,'width','width')*(i+1)+estilo(t,'width','width')/2+'px';
            }
        })(i,t);
        $('sub').appendChild(t);
    }
}
</script>
</head>

<body>


<form id="form1" name="form1" method="post" action="">
<div id="contenedor">
<div id="sub">
  <div id="clon"><input type="button" value="algo" /></div>
</div>
</div>
</form>
</body>
</html>

O un poco más animado:

Código PHP:

  <!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=iso-8859-1" />
<title>test</title>
<style>
#contenedor{ width:400px; height:50px; overflow:hidden; position:relative; border:1px dashed #000}
#sub{position:absolute;}
#sub div{ position:absolute; width:100px; text-align:center; background-color:#FFFFFF}
form{display:inline}
#bot{font-size:10px; width:100px;  margin:0; width:80px; margin-top:10px; background-color:#CCC; height:30px; line-height:30px; cursor:pointer}
</style>
<script>
function $(x){return document.getElementById(x);}
function estilo(obj,w3c,IE){
    if(window.getComputedStyle){
        return parseInt(document.defaultView.getComputedStyle(obj,'').getPropertyValue(w3c));
    }else{
        return parseInt(obj.currentStyle[IE]);
    }
}

function transicion(curva,ms,callback){
    this.ant=0.01;
    this.done_=false;
    var _this=this;
    this.start=new Date().getTime();
    this.init=function(){
        setTimeout(function(){
                if(!_this.next()){
                    callback(1);
                    _this.done_=true;
                    window.globalIntervalo=0;
                    return;
                }
                callback(_this.next());
                _this.init();
            },13);
    }
    this.next=function(){
        var now=new Date().getTime();
        if((now-this.start)>ms)
            return false;
        return this.ant=curva((now-this.start+.001)/ms,this.ant);
    }
}

function fx(obj,inicio,fin,propCss,u,curva,ms,cola){
    if(!window.globalIntervalo)
        window.globalIntervalo=1;
    else {
        if(cola)
            return setTimeout(function(){fx(obj,inicio,fin,propCss,u,curva,ms,cola);},30);
        else
            return;
    }    
    var t=new transicion(curva,ms,function(p){
        if(fin<inicio){
            var delta=inicio-fin;
            obj.style[propCss]=(inicio-(p*delta))+u;
        }
        else{
            var delta=fin-inicio;
            obj.style[propCss]=(inicio+(p*delta))+u;
        }
    });
    t.init();
    t=null;
}
function senoidal(p,ant){
    return (1 - Math.cos(p * Math.PI)) / 2;
} 
onload=function(){
    var bots=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
    for(var i=0,bot;bot=bots[i];i++){
        var t=$('clon').cloneNode('true');
        t.style.left=i*estilo($('clon'),'width','width')+'px';
        t.firstChild.innerHTML=bot;
        (function(i,t){
            t.firstChild.onclick=function(){
            for(var ii=0,el=$('sub').getElementsByTagName('p');el[ii];ii++)
                el[ii].style.backgroundColor='#CCC';
            this.style.backgroundColor='red';
            var obj=$('sub');
            var inicio=isNaN (parseInt($('sub').style.left))?0:parseInt($('sub').style.left);
            var fin=estilo($('contenedor'),'width','width')/2-estilo(t,'width','width')*(i+1)+estilo(t,'width','width')/2;
            fx(obj,inicio,fin,'left','px',senoidal,500,true);
                
            }
        })(i,t);
        $('sub').appendChild(t);
    }
    $('sub').removeChild($('clon'));
}
</script>
</head>

<body>


<div id="contenedor">
<div id="sub">
  <div id="clon"><p id="bot">sss</p></div>
</div>
</div>
</body>
</html>