begin process at 2012 05 29 00:32:15
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Barre/jauge graphique à animer

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Barre/jauge graphique à animer

mardi 23 juin 2009 à 11:38:14 | Barre/jauge graphique à animer

jimyarts
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 :
<body style="width:250px; height:250px; background-image:url('http://www.wks.fr/local/cache-vignettes/L400xH400/tuto_308_1-40c3b.jpg');">
   
<DIV align=left style=" font-family: Arial; font-size: 14px; font-weight: bold; color: #74A0CF;"  >Notez-le<br>
<br><dl>
    <dt>Grimpeur</dt>
    <dd>
        <div id ="conteneur0"    style="width:100%;"><strong></strong></div>
    </dd><br>
    <dt>Sprinteur</dt>
    <dd>
        <div id ="conteneur1"     style="width:100%;"><strong></strong></div>
    </dd><br>
    <dt>Rouleur</dt>
    <dd>
        <div id ="conteneur2"   style="width:100%;"><strong></strong></div>    </dd><br>
<dt>Puncheur</dt>
    <dd>
        <div id ="conteneur3"   style="width:100%;"><strong></strong></div>< </dd><br>
<dt>Classiques pavées</dt>
    <dd>
        <div id ="conteneur4"   style="width:100%; font-size:11px;"><strong></strong></div>
    </dd>
</dl>
</div>

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é.)
mardi 23 juin 2009 à 11:55:03 | Re : Barre/jauge graphique à animer

kankrelune

Membre Club
Salut... une recherche google à "javascript slider" et tu devrais trouver ton bonheur... .. . ;o)

@ tchaOo°

l'homme est un loup pour l'homme... .. .
mardi 23 juin 2009 à 16:27:47 | Re : Barre/jauge graphique à animer

jimyarts
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 =
        [
            '<span class="s-hd">',

            '<span class="s-line-1" id="',sElementId,'-line-1"></span>',
            '<',sTagName,' class="ctrl-0" id="',sElementId,'-ctrl-0" ></',sTagName,'>',
            '<span  id="',sElementId,'-ctrl-1" class="ctrl-1">&nbsp;</span>',
            '<span   id="',sElementId,'-ctrl-2" class="ctrl-2">&nbsp;</span>',
            '</span>',
            '<',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;
   
}


Cette discussion est classée dans : barre, width, height, partie, 20px

Répondre à ce message

Sujets en rapport avec ce message

width ou height [ par MiTcH37 ] comment changer la taille d'une iframe à partir de la page contenue dedans ?ps : un code sûr..svp MiTcH <img src=/imgs2/smile_clo Dimension d'une image JS [ par superpaolo ] Je débute en javascript et je n'arrive pas à connaitre les dimensions d'une image (HEIGHT et WIDTH) à partir de son nom.monimage.height ?monimage.widt Popup, variables, au secours ! [ par yakou32 ] Bonjour ! J'essaie de faire un script de redirection selon la résolution. L'idée est de faire un popup centré, aux bonnes dimensions, et la page mère ajout fonction scroll [ par claudy03 ] Voilà, j'ai trouvé le script javascript  qui suitdans le head :function resizePopUp(monImage, monTitre)    {   &nbsp Erreur sous Netscape et pas sous IE [ par simsas ] Voici les erreurs javascript que j'ai lorsque je clic sur le bouton Rechercher(voir ci dessous dans left.asp) Sous ie 6 cela fonctionne très bien. So comment avoir le height width d'une div ... [ par GuilleW ] Disons que j'ai une div qui contient des image texte etc ... je voudrai avoir sa taille mais comme sa varie je ne peux mettre qu'une variable pour la jeu du sokoban [ par trufobaleine ] bonjour!nous avons créer un jeu du sokoban qui fonctionne tres bien mais pour augmenter les difficulter nous voulons mettre 2 caisses a chaque niveau. animation JS "au dessus" d'un flash [ par feydakin ] bonjour, je voudrais faire defiller le script javascript suivant ********* var snowsrc="**image**.gif" var no = 15; var ns4up = (document.layers) Trouvez l'erreur ! (redimmensionner un DIV) [ par supergrey ] Donc voila j'ai mis un DIV qui contient une image et je voudrais que ce calque diminue jusqu'a disparaitre, voila mon code:function Diminuer(){   widt Ouvrir une popup sans cliquer... [ par ViNCiNTO ] Bonjour, je cherche un moyen pour ouvrir une popup en javascript sans avoir a cliquer sur un lien. Pour le moment j'ouvre mes popups de la maniere sui


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)