Sujet Précédent Sujet Suivant

Barre/jauge graphique à animer

jimyarts Messages postés 6 Date d'inscription dimanche 21 juin 2009 Statut Membre Dernière intervention 1 février 2010 - 23 juin 2009 à 11:38
jimyarts Messages postés 6 Date d'inscription dimanche 21 juin 2009 Statut Membre Dernière intervention 1 février 2010 - 23 juin 2009 à 16:27
Tout d'abord, bonjour à toute la communauté de CS,

Je suis en train d'élaborer un site concernant le cyclisme, et donc les coureurs. Je connais bien le milieu, je connais leur valeur mais j'aimerais rendre mon site un peu plus interactif.

Je vous montre d'abord un exemple de notation selon mon avis :
http://jim.e3b.org/teams/saxobank/karvesen.html

Et vous voyez que j'ai mis à côté, un lien Notez-le ouvrant vers une nouvelle fenêtre http://jim.e3b.org/teams/saxobank/popup_notation.html

Donc je vous présente mon projet : je souhaiterais que l'on puisse :
- cliquer à un endroit de n'importe quelle barre graphique par exemple celle d'un grimpeur, et que la largeur de la barre bleue s'adapte à l'endroit où j'ai cliqué.
-ou bien que l'on puisse coulisser le marqueur séparant la partie bleue et la partie grise.

Et que ça me donne une valeur situé entre 0 et 10,0 dans une textbox.
Ensuite je pense pouvoir me débrouiller pour établir un formulaire.

Donc premièrement, ai-je été clair ? deuxièmement est-ce réalisable à l'aide de Javascript et enfin troisièmement merci à tous ceux qui prendront la peine de m'aider .
Je vous montre le code :

- la partie head : <style type="text/css">
<!--
html{overflow:hidden}
#conteneur{
    margin: 0px 0 10px 0px;
    width: 197px;
    height: 20px;
    background-image:url('images/g_colorbar2.jpg');
    border: 1px solid silver;
}
   dl {
        margin: 0;
        padding: 0;                    
    }
    dt {
        position: relative; /* IE is dumb */
        clear: both;
        display: block;
        float: left;
        width: 104px;
        height: 20px;
        line-height: 20px;
        margin-right: 17px;             
        font-size: .745em;
font-weight: bold;
        text-align: right;
    }
    dd {
        position: relative; /* IE is dumb */
        display: block;                
        float: left;    
        width: 197px;
        height: 20px;
        margin: 0 0 15px;
        background: url("images/g_colorbar.jpg");
font-size: .745em;
     }
     * html dd { float: none; }
    /* IE is dumb; Quick IE hack, apply favorite filter methods for
    wider browser compatibility */
     dd div {
        position: relative;
        background: url("images/g_colorbar2.jpg");
        height: 20px;
        width: 75%;
        text-align:right;
}
     dd div strong {
        position: absolute;
        right: -5px;
        top: -2px;
        display: block;
        background: url("images/g_marker.gif");
        height: 24px;
        width: 9px;
        text-align: left;
        text-indent: -9999px;
        overflow: hidden
opacity : 0.5;
filter:alpha(opacity=50);;
     }
</style>

- la partie Body :

   

Notez-le

    * Grimpeur
    :
       


   

    * Sprinteur
    :
       


   

    * Rouleur
    :
       

   

* Puncheur
    :
       

<

* Classiques pavées
    :
       


   

Note : Sur mon site j'ai tenté un onmouseover mais c'était pas concluant et puis je n'arrivait pas à tirer une valeur. ( c'est mon plus gros problème en réalité.)

2 réponses

Réponse 1 / 2
kankrelune Messages postés 1293 Date d'inscription mardi 9 novembre 2004 Statut Membre Dernière intervention 21 mai 2015
23 juin 2009 à 11:55
Salut... une recherche google à "javascript slider" et tu devrais trouver ton bonheur... .. . ;o)

@ tchaOo°

l'homme est un loup pour l'homme... .. .
0
Réponse 2 / 2
jimyarts Messages postés 6 Date d'inscription dimanche 21 juin 2009 Statut Membre Dernière intervention 1 février 2010
23 juin 2009 à 16:27
Merci beaucoup Kankrelune. Il me reste un problème qui semble bête mais je trouve toujours pas les causes .

Si tu regardes sur cette page : http://jim.e3b.org/teams/saxobank/popup%20notation.html.
Tu verras qu'il y a un curseur en bas à gauche qui est placé sans que je le veuille.

Le js :

(function(){

try{
var YMD = YAHOO.My.Debug;
var Debug = function(sText , nType)
{
    YMD.trace(sText , nType );
};}catch(err){Debug = function(){};};

var YUE = YAHOO.util.Event;
var YUD = YAHOO.util.Dom;
var YUC = YAHOO.util.CustomEvent ;
var isDrag = false;

if(window.opera)
{
    YUD.addClass(document.documentElement , 'borwser-opera');
};

var stopAction = function(e)
{
    YUE.stopEvent(e);
    return false;
};

var setValue =  function(nFrom,nTo,dFromBtn , bNotChangePosition )
{
   
    var nOldFrom  = this.from ;
    var nOldTo  = this.to ;

    var sElementId = this.id ;
    var  dEl = document.getElementById(sElementId);
    var  dBox =  document.getElementById(sElementId + '-box');
    var  dC0 = document.getElementById(sElementId + '-ctrl-0');
    var  dC1 = document.getElementById(sElementId + '-ctrl-1');
    var  dC2 = document.getElementById(sElementId + '-ctrl-2');
    var  dLn1 = document.getElementById(sElementId + '-line-1');
    var  nSliderWidth =dBox.offsetWidth;       
   
    var nf  = Math.min( nTo , Math.max( 0 , nFrom ) );
    var nt = Math.min( 100 , Math.max( nFrom ,nTo ) );
    if(isNaN(nf)){ nf = 0 };
    if(isNaN(nt)){ nf = 100 };
    nf = Math.round(nf);
    nt = Math.round(nt);

   

    this.from = nf ;
    this.to = nt ;

    if(!bNotChangePosition)
    {
        var nX1 = ( nSliderWidth * (this.from/100) ) ;
        var nX2 = ( nSliderWidth * (this.to/100) ) - dC2.offsetWidth ;
       
        if(dFromBtn == dC1 )
        {           
            dC1.style.left = nX1  + 'px';
        }
        else if(dFromBtn == dC2 )
        {
            dC2.style.left = nX2  + 'px';
        }
        else
        {
            dC1.style.left = nX1  + 'px';
            dC2.style.left = nX2  + 'px';           
        };           

        var nLeft =   parseInt( dC1.style.left ) - 1 ;
        var nRight =  parseInt( dC2.style.left ) + dC2.offsetWidth -1;
        dC0.style.left = dC1.style.left;
        dC0.style.width = nRight - nLeft +  'px';
    };

    //Debug(  ['from:' , this.from  , ' ; to:' , this.to ].join('') ) ;
    if(!!(nOldFrom - nf) || !!(nOldTo - nt ) )
    {
        this.onChange.fire(nf,nt);
    };
    return [nX1 , nX2 ] ;
};

var onMouseDown =  function(e,oSelf)
{
       
        var dBtn = this;
                   
        var  sElementId = oSelf.id ;
        var  dEl = document.getElementById(sElementId);
        var  dBox =  document.getElementById(sElementId + '-box');
        var  dC0 = document.getElementById(sElementId + '-ctrl-0');
        var  dC1 = document.getElementById(sElementId + '-ctrl-1');
        var  dC2 = document.getElementById(sElementId + '-ctrl-2');
        var  dLn1 = document.getElementById(sElementId + '-line-1');
        var  nSliderWidth = dBox.offsetWidth;   
        var nOffsetLeft = YUD.getX( dBox   ) ||  YUD.getX( dEl  );
        var nLimitLeft  = 0;
        var nLimitRight   =  nSliderWidth -  dBtn.offsetWidth ;
        var nSliderWidth = nSliderWidth    ;
       

        if(dBtn.className == 'ctrl-2')
        {
            nLimitLeft =  parseInt( dC1.style.left ) + dC1.offsetWidth ;
        }
        else
        {
            nLimitRight   =   parseInt( dC2.style.left )   - dC1.offsetWidth ;
        };
       
        var onMouseUp = function(e)
        {
                               
                YUE.stopEvent(e);           
                YUE.removeListener( document , 'mousemove' ,onMouseMove );
                YUE.removeListener( document , 'mouseup' , onMouseUp );           
                isDrag = false;   
                oSelf.onMouseUp.fire(e);
                return false;
        };

        var onMouseMove =  function(e)
        {       
               
                var nEx = e.clientX - nOffsetLeft ;       
                /*
                Debug( 'nOffsetLeft = ' + nOffsetLeft  );
                Debug( 'limit = ' + [ nLimitLeft , nLimitRight ] ,2 );
                Debug( 'e.clientX = ' + e.clientX  );
                Debug( 'nEx = ' + nEx );
                */
               
                if(!isDrag )
                {   
                    onMouseUp.call( document ,e,aArg);
                    return;
                };                   

                nEx = Math.max(  nLimitLeft  , nEx);
                nEx = Math.min(  nEx ,nLimitRight );
                if( dBtn == dC1 )
                {
                    oSelf.from = Math.abs( ( nEx / (nSliderWidth - dC1.offsetWidth - dC2.offsetWidth) ) * 100 );
                }
                else
                {
                    oSelf.to = Math.abs( ( nEx / (nSliderWidth - dC1.offsetWidth - dC2.offsetWidth) ) * 100 );
                };

                if(Math.abs( oSelf.from - oSelf.to ) <=3 )
                {
                     oSelf.from = oSelf.to
                };

               
               
              
               setValue.call(oSelf ,  oSelf.from , oSelf.to , dBtn , true );
                if( dBtn == dC1 )
                {
                    dBtn.style.left =nEx + 'px';
                    var nLeft =   parseInt( dC1.style.left ) - 1 ;
                    var nRight =  parseInt( dC2.style.left ) + dC2.offsetWidth -1;
                    dC0.style.left = dC1.style.left;
                    dC0.style.width = nRight - nLeft +  'px';
                   
                }
                else
                {                   
                    dBtn.style.left =nEx + 'px';
                    var nLeft =   parseInt( dC1.style.left ) - 1 ;
                    var nRight =  parseInt( dC2.style.left ) + dC2.offsetWidth -1;
                    dC0.style.left = dC1.style.left;
                    dC0.style.width = nRight - nLeft +  'px';
                   
                };

               
               

                YUE.stopEvent(e);
                oSelf.onSlide.fire(e , oSelf.from, oSelf.to );
                return false;
        };

        YUE.on( document , 'mousemove' , onMouseMove  );
        YUE.on( document , 'mouseup' , onMouseUp );
        isDrag = true;   
        YUE.stopEvent(e);
        oSelf.onMouseDown.fire(e);
        return false;

};

var onMouseDownOnBackground = function(e,oSelf)
{
        var  sElementId = oSelf.id ;
   
        var  dBox =  document.getElementById(sElementId + '-box');
        var  dC0 = this;
        var  dC1 = document.getElementById(sElementId + '-ctrl-1');
        var  dC2 = document.getElementById(sElementId + '-ctrl-2');
        var  dLn1 = document.getElementById(sElementId + '-line-1');
        var  nSliderWidth = dBox.parentNode.offsetWidth || dBox.offsetWidth;   
        var  nAvailRangeWidth = nSliderWidth -  dC1.offsetWidth -  dC2.offsetWidth ;
        var  nOffsetLeft = YUD.getX( dBox );
   
        var  ndC0Width = dC0.offsetWidth;
        var  ndC2Width = dC2.offsetWidth;
        var  nLimitRight   =  nSliderWidth -  ndC0Width  ;
        var  nMouseDownX =   e.clientX - YUD.getX( dC0 );
        var  nRange =  oSelf.to -  oSelf.from  ;

        var onMouseMove = function(e)
        {
           
            if(!isDrag )
            {   
                onMouseUp.call( document ,e);
                return;
            };   
            var nEx =  Math.max( 0 , e.clientX - nOffsetLeft - nMouseDownX  ) ;
            if(nEx < nLimitRight )
            {               
               
                var nTo =  Math.min(100 , Math.round( ( ( nEx + ndC0Width )  / nAvailRangeWidth ) * 100 ) ) ;
                var nFrom = nTo - nRange ;

                setValue.call( oSelf , nFrom , nTo , null, true );
                dC0.style.left = nEx + 'px';                   
                dC0.style.width = ndC0Width + 'px';
                dC2.style.left = nEx + ndC0Width - ndC2Width +  1  + 'px';
            }
            else
            {
                dC0.style.left = nLimitRight + 'px';                   
                dC0.style.width = ndC0Width + 'px';   
                dC2.style.left = nLimitRight + ndC0Width - ndC2Width +  1  + 'px';
            };
            dC1.style.left = dC0.style.left;
            oSelf.onSlide.fire(e , oSelf.from, oSelf.to );
           
           
        };

        var onMouseUp = function(e)
        {
            YUE.removeListener( document , 'mousemove' , onMouseMove );
            YUE.removeListener( document , 'mouseup' , onMouseUp );
            isDrag = false;   
        };

       
        YUE.on( document , 'mousemove' ,onMouseMove );
        YUE.on( document , 'mouseup' , onMouseUp );
        isDrag = true;   
        YUE.stopEvent(e);
   
       
        oSelf.onMouseDown.fire(e);
        return false;
};

YAHOO.widget.RangeSlider = function(sElementId , oAttr)
{
   
    var oSelf = this;   
   
    oSelf.onMouseDown = new YUC('mousedown');
    oSelf.onMouseUp = new YUC('mouseup');
    oSelf.onSlide = new YUC('slide');
    oSelf.onLoad = new YUC('load');
    oSelf.onChange = new YUC('change');

    if( typeof( oAttr ) != 'object' )
    {
        oAttr = {};
    };

    var init = function()
    {
        var dEl = this;
       
        dEl.className = 'yui-range-slider';
        if(dEl.tagName!='SPAN')
        {
            throw Error('YAHOO.widget.RangeSlider Error: \n Element['+sElementId+']\'s tagName is not SPAN');
            return;
        };
       

        oSelf.type = ( YUD.hasClass(dEl ,  'yui-range-slider-v' ) )?2:1;
       

        YUD.addClass( dEl , 'yui-range-slider yui-range-slider-' + oSelf.type );
       
        var sTagName = window.opera?'span':'button';
        dEl.innerHTML =
        [
            '',

            '',
            '<',sTagName,' class="ctrl-0" id="',sElementId,'-ctrl-0" ></',sTagName,'>',
            '&nbsp;',
            '&nbsp;',
            '',
            '<',sTagName,' hidefocus="hidefocus" class="s-bd" id="',sElementId,'-box" >&nbsp;</',sTagName,'>',

        ].join('');

       
       
       
        var  dBox =  document.getElementById(sElementId + '-box');
        dBox.style.width = (  oAttr.width || 200 ) + 'px';
        dBox.style.height = (  oAttr.height || 23) + 'px';

        var  dC0 = document.getElementById(sElementId + '-ctrl-0');
        var  dC1 = document.getElementById(sElementId + '-ctrl-1');
        var  dC2 = document.getElementById(sElementId + '-ctrl-2');
        var  dLn1 = document.getElementById(sElementId + '-line-1');
        var  nSliderWidth =dBox.offsetWidth;   
       
       
   
        dLn1.style.width =  parseInt(dBox.style.width)-4 + 'px';        dC0.style.height dC1.style.height dC2.style.height = ( parseInt( dBox.style.height  ) - 4 ) + 'px';
       
        dLn1.style.top = (  oAttr.height || 23 ) /2 + 'px';
       
       
        YUE.on(  dC1 , 'mousedown' , onMouseDown , oSelf );
        YUE.on(  dC2 , 'mousedown' , onMouseDown , oSelf );
        YUE.on(  dC0 , 'mousedown' , onMouseDownOnBackground , oSelf );
        YUE.on(  dEl , 'selectstart' , stopAction  );           
        YUE.on(  dBox , 'mousedown' , stopAction  );           

        setValue.call(oSelf , oSelf.from , oSelf.to );
        oSelf.readyState = 'complete';
       
        oSelf.onLoad.fire();
        //Debug('slidebar element:  ' + sElementId + ' complete' , 2);
       

       
   
    };

    this.id = sElementId;
    YUE.onAvailable( sElementId , init );
};

YAHOO.widget.RangeSlider.prototype =
{
    id:'',
    readyState:'uninitialized',
    type:1,
    from:0,
    to:50,
    setValue : function(nFrom , nTo)
    {
        var oSelf =this;
        nFrom =  isNaN(nFrom)?0: (nFrom || 0 );
        nTo = isNaN(nTo)?100: (nTo || 100 );       
       
        nFrom = Math.max( 0 , nFrom ); 
        nTo = Math.min( 100 , nTo); 
        nFrom = Math.min( nFrom , nTo );
       
        var fAction = function()
        {
            setValue.call( oSelf , nFrom , nTo );
        };

        if(oSelf.readyState!='complete')
        {
            oSelf.onLoad.subscribe(fAction);
        }
        else
        {
            fAction();
        };

       
    },
   
    getValue:function()
    {
        return [this.from,this.to];
    },

    getElement:function()
    {
        return document.getElementById(this.id);
    }
};
})();

Le CSS :

.yui-range-slider
{
   
    font-size:0;

}

.yui-range-slider *
{
    font:0/0;
}

.yui-range-slider .s-bd{
   
   
   
   
    background:#848484 url(images/g_colorbar.jpg) repeat-x;
    padding:0;
    border:solid 1px #FFFFFF;
    border-right-color:#FFFFFF;
    border-bottom-color:#FFFFFF;
    vertical-align:top;
}

.yui-range-slider span.s-hd{
       
    overflow:hidden;
    position:relative;
    font-size:0;
    line-height:0;
    vertical-align:top;
   
   
}

//Ligne du milieu
.yui-range-slider span.s-line-1
{
    font-size:0;
    line-height:0;
    position:absolute;
    top:8px;
    left:2px;
    height:0;
    border-top:solid 1px #aaa;
    border-bottom:solid 1px #dfdfdf;
}

.yui-range-slider span.s-hd span
{
    border:none
    font-size:1px;
    width:9px;
    height:24px;
    position:absolute;
    display:block;
    top:0px;
      padding-top:10px;
    background-image:url('images/g_marker.gif');   
background-repeat: no-repeat ;
z-index:1000;
}

html.borwser-opera .yui-range-slider span.s-hd span
{
    top:2px;
}

.yui-range-slider span.s-hd span.ctrl-1:hover, .yui-range-slider span.s-hd span.ctrl-2:hover
{
   
}

.yui-range-slider span.s-hd span.ctrl-0:hover
{
    opacity:1;
    filter:alpha(opacity=1);
   
}

.yui-range-slider span.s-hd .ctrl-0
{
    position:absolute;
    display:block;
    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;
   
    width:0;
    left:0;
    top:2px;
    _top:1px;
    border:solid 1px #333366;
    background:url(images/g_colorbar2.jpg);
    _background: #666666;
   
    filter:alpha(opacity=60);
    cursor:default;
    cursor:default;
    opacity:1;
    z-index:1;
}

html.borwser-opera .yui-range-slider span.s-hd .ctrl-0
{
    top:2px;
}

.yui-range-slider span.s-hd span.ctrl-1
{
    left:0;
    z-index:100;
    cursor:w-resize;
opacity:0;
filter:alpha(opacity=0);

   
}

.yui-range-slider span.s-hd span.ctrl-2
{
    left:0;
    z-index:200;
    cursor:e-resize;
   
}
0

Discussions similaires

tableau dans une interface graphique
jihenfst -
jihenfst -

9 réponses
[D7] Impression code-barres sur une imprimante d'étiquettes
cs_nitrique -
cs_nitrique -

15 réponses
Logiciel pour créer interface graphique
ceeno -
s1245 -

3 réponses
Barre de recherche web
martial30061999 -
HitTshite19 -

1 réponse
Afficher une barre de progression pendant le traitement d'une macro excel
cs_gwenadu -
PROGRAMMIX -

1 réponse
Rejoignez-nous