CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 14 09:23:43

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Effets

> LISTE UL DÉFILANTE UTILISANT SCRIPT.ACULO.US

LISTE UL DÉFILANTE UTILISANT SCRIPT.ACULO.US

Information sur la source

Note :

9,00 / 10

Catégorie :Effets Classé sous :Liste défilante, scriptaculous, Ajax-javascript, XHTML Niveau :Initié Date de création :17/12/2008 Date de mise à jour :17/12/2008 18:04:01 Vu / téléchargé :4 449 / 380

Auteur : mikerob

Ecrire un message privé

Site perso

Commentaire sur cette source (10)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Cela fait pas quelque temps que je cherche une liste défilante dont le contenu n'est pas fournit en javascript, mais est directement une liste (X)HTML. Il y avait bien le script de Chmel (pour rappel : http://www.javascriptfr.com/code.aspx?ID=25084) mais je voulais que les éléments de ma liste disparaisse élément par élément.

Donc finalement j'ai utilisé mes mains et mon cerveau (surtout mes mains...) pour faire une jolie liste déroulante avec des effects script.aculo.us.

Le version de script.aculo.us utilisée est la 1.8.1
Le script à été testé sur FireFox 3.0.5 et internet explorer 6.

Source

Voilà le code source pour ceux qui veulent pas downloader le zip.
Penser à ajouter les librairies scriptaculous 1.8.1
pour que sa fonctionne :)
<!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">
<html>
<head>
<title>Scroll List</title>
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/scriptaculous.js?load=effects" type="text/javascript"></script>
<script type="text/javascript">
<!--
/**
* Constructor
*/
function Scroller(objName, speed) {
this.name = objName;
this.speed = speed;
this.initList();
this.setSpeed(this.speed);
}
/**
* Methods
*/
Scroller.prototype = {
name:"",
speed:0,
currPos:0,
totalHeight:'0px',
action:false,
/**
* Get all list elements and move them.
*/
scrollList : function () {
if(this.action) {
var list = $(this.name);
var listElements = $$('#' + list.id + ' li');
var h = listElements[this.currPos].offsetHeight;
for(var i=0; i<listElements.length; i++) {
var currE = listElements[i];
this.moveElement(currE,-h);
}
this.currPos ++;
if(this.currPos >= listElements.length) {
this.currPos = 0;
}
}
},
/**
* Move up an element if it's not the first. Else put it to the end of
* the list. .
*/
moveElement : function(element, step) {
var tempH = this.totalHeight; // create because afterFinish method can't
//used this.totalHeight ?!
if(element.style.top.split("px")[0] <= 0) {
new Effect.Opacity(element, { from: 1.0, to: 0, duration: 0.5,
afterFinish:function(){
element.style.top=tempH-element.offsetHeight+'px';
Effect.Appear(element, { duration: 0.5 });
}
});
} else {
new Effect.Move(element, { x: 0, y: step, mode: 'relative'});
}
},
/**
* init list elements positions.
*/
initList : function () {
var list = $(this.name);
var elements = $$('#' + list.id + ' li');
var pos = 0;
for(var i=0; i<elements.length; i++) {
elements[i].style.top = pos + 'px';
pos = pos + elements[i].offsetHeight;
}
this.totalHeight = pos;
},
/**
* Allow to adjust the scrolling speed
* speed : speed in milliseconds
*/
setSpeed : function(speed) {
setInterval(this.name + '.scrollList()',speed);
},
/**
* Allow to start the list scrolling
*/
startScrolling : function (){
this.action = true;
},
/**
* Allow to stop the list scrolling
*/
stopScrolling : function() {
this.action = false;
}
}
// Hack to draw a correct list when Javascript is disabled
document.documentElement.className+=" hasJS";
-->
</script>
<style type="text/css">
ul.scroller {
border:none;
padding:0px;
margin:0px;
}
ul.scroller li {
padding:10px 0px 0px 15px;
margin: 0px 0px 0px 5px;
width:100%;
list-style:none;
background : url('./liststyle.gif') no-repeat left 10px;
font-family:arial;
font-size:11px;
}
.hasJS ul.scroller {
position:relative;
border:1px solid black;
overflow:hidden;
padding:0px;
margin:0px;
}
.hasJS ul.scroller li {
position:absolute;
left:0px;
padding:10px 0px 0px 15px;
margin: 0px 0px 0px 5px;
width:90%;
list-style:none;
background : url('./liststyle.gif') no-repeat left 10px;
font-family:arial;
font-size:11px;
}
#scroller1 {position:absolute; left:0px; top:10px; width:340px; height:300px;}
#scroller2 {position:absolute; left:400px; top:10px; width:250px; height:400px;}
#scroller3 {position:absolute; left:710px; top:10px; width:400px; height:200px;}
</style>
</head>
<body>
<ul id="scroller1" class="scroller">
<li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. </li>
<li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
</ul>
<ul id="scroller2" class="scroller">
<li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
</ul>
<ul id="scroller3" class="scroller">
<li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
<li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
</ul>
<script type="text/javascript">
var scroller1 = new Scroller('scroller1',4000);
var scroller2 = new Scroller('scroller2',2000);
var scroller3 = new Scroller('scroller3',1500);
// start all list scrolling
scroller1.startScrolling();
scroller2.startScrolling();
scroller3.startScrolling();
</script>
</body>
</html>

Voilà le code source pour ceux qui veulent pas downloader le zip. 
Penser à ajouter les librairies scriptaculous 1.8.1 
pour que sa fonctionne :)

<!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">
<html>
<head>
  <title>Scroll List</title>

  <script src="lib/prototype.js" type="text/javascript"></script>
  <script src="lib/scriptaculous.js?load=effects" type="text/javascript"></script>

  <script type="text/javascript">
  <!--
    /**
     * Constructor
     */         
    function Scroller(objName, speed) {    
      this.name = objName;
      this.speed = speed;
      this.initList();
      this.setSpeed(this.speed);
    }
    
    /**
     * Methods
     */
    Scroller.prototype = {
      name:"",
      speed:0,
      currPos:0,
      totalHeight:'0px',
      action:false,
      
      /**
       * Get all list elements and move them.
       */             
      scrollList : function () {
        if(this.action) {     
          var list = $(this.name); 
          var listElements = $$('#' + list.id + ' li'); 
          var h = listElements[this.currPos].offsetHeight;
          for(var i=0; i<listElements.length; i++) {
            var currE = listElements[i];      
            this.moveElement(currE,-h);
          }
          this.currPos ++;
          if(this.currPos >= listElements.length) {
            this.currPos = 0;
          }
        }
      },
      
      /**
       * Move up an element if it's not the first. Else put it to the end of 
       * the list.       .
       */             
      moveElement : function(element, step) {
        var tempH = this.totalHeight; // create because afterFinish method can't 
                                      //used this.totalHeight ?!
        if(element.style.top.split("px")[0] <= 0) {
         new Effect.Opacity(element, { from: 1.0, to: 0, duration: 0.5, 
           afterFinish:function(){
              element.style.top=tempH-element.offsetHeight+'px';
              Effect.Appear(element, { duration: 0.5 });
           }
         });
        } else {   
           new Effect.Move(element, { x: 0, y: step, mode: 'relative'});
        }
      },
    
      /**
       * init list elements positions.
       */             
      initList : function () {
        var list = $(this.name);
        var elements = $$('#' + list.id + ' li');
        
        var pos = 0;
        for(var i=0; i<elements.length; i++) {
          elements[i].style.top = pos + 'px'; 
          pos = pos + elements[i].offsetHeight;
        }
        this.totalHeight = pos;
      },
      
      /**
       * Allow to adjust the scrolling speed
       *  speed : speed in milliseconds
       */             
      setSpeed : function(speed) {
        setInterval(this.name + '.scrollList()',speed);
      },
      
      /**
       * Allow to start the list scrolling
       */             
      startScrolling : function (){
        this.action = true;
      },
      
      /**
       * Allow to stop the list scrolling
       */
      stopScrolling : function() {
        this.action = false;
      } 
    }
    
    // Hack to draw a correct list when Javascript is disabled
    document.documentElement.className+=" hasJS";
  -->  
  </script>

  <style type="text/css">    
  
    ul.scroller {
      border:none;
      padding:0px;
      margin:0px;
    }

    ul.scroller li {   
      padding:10px 0px 0px 15px;
      margin: 0px 0px 0px 5px;
      width:100%;
      list-style:none;
      background : url('./liststyle.gif') no-repeat left 10px;
      font-family:arial;
      font-size:11px;
    }
    
    
    .hasJS ul.scroller {
      position:relative;
      border:1px solid black;
      overflow:hidden;
      padding:0px;
      margin:0px;
    }
    
    .hasJS ul.scroller li {   
      position:absolute;
      left:0px;
      padding:10px 0px 0px 15px;
      margin: 0px 0px 0px 5px;
      width:90%;
      list-style:none;
      background : url('./liststyle.gif') no-repeat left 10px;
      font-family:arial;
      font-size:11px;
    }
    
    #scroller1 {position:absolute; left:0px;   top:10px; width:340px; height:300px;}
    #scroller2 {position:absolute; left:400px; top:10px; width:250px; height:400px;}
    #scroller3 {position:absolute; left:710px; top:10px; width:400px; height:200px;}
   
  </style>
</head>
<body>
    <ul id="scroller1" class="scroller">
      <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. </li>
      <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>     
    </ul>
    
    <ul id="scroller2" class="scroller">
      <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
    </ul>

    <ul id="scroller3" class="scroller">
      <li>01. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>02. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>03. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>04. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>05. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>06. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>07. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>08. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>09. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
      <li>10. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In volutpat. Donec neque lorem, tem ec, sollicitudin eu, ornare eget, orci. Maecenas tincidunt, nisi sed molestie molestie, ante purus interdum sapien, ac venenatis lacus sapien id est. Morbi viverra. Suspendisse in lorem eget enim elementum commodo.</li>
    </ul>
    <script type="text/javascript">
    
      var scroller1 = new Scroller('scroller1',4000);
      var scroller2 = new Scroller('scroller2',2000);
      var scroller3 = new Scroller('scroller3',1500);
      
      // start all list scrolling
      scroller1.startScrolling();
      scroller2.startScrolling();
      scroller3.startScrolling();      
    </script>  
</body>
</html>

Conclusion

Voilà, tout commentaire est le bienvenu. Je suis pas un programmeur Javascript donc n'hésitez pas à me signaler les fautes que je ferais ^^

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

ScrollingList
- lib
  - effects.js 38 986 octets
  - prototype.js 124 000 octets
  - scriptaculous.js 2 654 octets
- index.html 15 243 octets
- liststyle.gif 825 octets

Télécharger le zip

Historique

17 décembre 2008 18:04:01 :: Mise en page code

Sources de la même categorie

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

ACCESSIBARRE - AMÉLIORER LE CONFORT DES PERSONNES NON-VOYANT... par Pfuch

LOADER UNE PAGE EN AJAX AVEC UN PETIT EFFET par Annadrill

EXPLORATEUR WEB par XtremDuke

PERSONNALISER LES BOÎTES DE DIALOGUE par XtremDuke

PERSONNALISER SES SELECT par XtremDuke

Commentaires et avis

Commentaire de Kimjoa le 18/12/2008 19:42:36

salut, l'effet est sympas, mais j'ai quelque remarque concernant le code.

-met la valeur relative pour la position dans le css.
-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action.
-tu aurais du faire 2 variable locale this.listElements et this.liste, au lieu de les répété a chaque intervalle.
-tu appels t'as fonction locale setSpeed,avec un argument locale... pas besoin passe par un this (this.speed)
-utilise un binding pour lancer ton intervalle, de plus le nom de l'objet js doit etre le meme que l'id de la liste HTML, c 'est pas logique,... utilse ce bout de code a la place setInterval(this.scrollList.bind(this),this.speed);
-tu utilsie une classe css, hasJS pour documentElement, tu arrais du juste pour te liste lors de leur création.

code a revoir... j'espere avoir été constructif a+

Commentaire de mikerob le 19/12/2008 10:35:12

Salut Kimjoa,

Merci pour le commentaire. Oui je ocnfirme il est constructif, mais je suis pas sur de tout comprendre :

"-met la valeur relative pour la position dans le css " -> Tu parle de quel élément ?

"-tu lance l'intervalle lors de l'initialisation de l'objet, lance le lors de l'appel,n dans t'as fonction startScrolling, et suprime this.action." -> Si j'enlève le this.action du coup je peux plus stopper la liste au passage de la souris... Je pourrais faire de manière à se que le startScrolling change le setInterval, mais j'ai eu pas mal de bug en le changeant à la volée...

"-tu aurais du faire 2 variable locale this.listElements et this.liste..." -> yes relicat de test, sa sera changé ^^

"-tu appels t'as fonction locale setSpeed" -> c'est pour permettre éventuellement de changer la vitesse depuis "l'extérieur" et non pas dans l'objet js (méthode public).

D'ailleurs question en passant : en JS il n'y a pas vraiment de notion d'objet privé/public non ?

"-utilise un binding pour lancer ton intervalle" -> je connais pas cette notion mais à froid sa me plait bien. Je test et je l'implémenterais dans la pochaine version :)

Pour le hasJS, c'est une astuce global qui n'a pas d'impacte sur le fonctionnement du code, hormis le fait que la page s'affiche comme il faut si le JS est désactivé ^^ (astuce que l'on m'a donné ici : http://forum.alsacreations.com/topic-5-34711-1-resolu-CSS-specifique-JavaScript-active.html)

Voilà, je revois ma copie pour la prochaine version mais si tu as d'autres remarque n'hésite pas.

Commentaire de Kimjoa le 19/12/2008 21:52:49

re mikerob!

- pour le absolute du css, oublie ... ;),
-pour l'appel de l'intervalle. En js les intervalle consomme bcp de mémoire,que ton scroll soit stoppé ou en marche ton intervalle fonctionne tjrs ...
-pour la class css hasJS, celle ci s'applique pour toute les liste du document, il fallais juste l'appliqué pour chaque instance de t'as classe.
-en ce qui concerne les variable privé , public, js ne permet pas vraiment de faire de sécurité , met on peux le simuler , dans certain cas , voici un tuto tres bien fait en 3 partie http://t-templier.developpez.com/tutoriel/javascript/javascript-poo1/
-concernant le binding, quand tu passe une fonction comme argument a une autre fonction, celle-ci pert son context... le js possede 2 fonction native, call et apply ki permet d'appeller une fonction avec un cointext précis, tres utile pour faire de l'héritage... avec le lien ci dessus tu decrait comprende de suite.

je te file le code que j'ai modifierr
pour le css de hasJS, pas grans chose de changé...

.scroller.hasJS{
      position:relative;
      border:1px solid black;
      overflow:hidden;
      padding:0px;
      margin:0px;
    }

    .scroller.hasJS li {
      position:absolute;
      left:0px;
      padding:10px 0px 0px 15px;
      margin: 0px 0px 0px 5px;
      width:90%;
      list-style:none;
      font-family:arial;
      font-size:11px;
    }

pour le code js

function Scroller(list, speed) {
       this.speed=speed;
       this.list= $(list);
       this.list.className+=" hasJS";
       this.listElements = $$('#' + this.list.id + ' li');
       this.listLength=this.listElements.length;
       this.totalHeight = 0;
       for(var i=0; i<this.listLength; i++) {
         this.listElements[i].style.top = this.totalHeight + 'px';
         this.totalHeight = this.totalHeight +  this.listElements[i].offsetHeight;
       }
       Event.observe(this.list,'mouseover',this.onMouseOver.bindAsEventListener(this));
       Event.observe(this.list,'mouseout',this.onMouseOut.bindAsEventListener(this));
    }

    Scroller.prototype = {
      speed:0,
      currPos:-1,
      totalHeight:'0px',
      scrollList : function () {
        this.currPos++;
        for(var i=0; i<this.listLength; i++) {
           if(this.currPos==i) {
              new Effect.Opacity(this.listElements[i], { from: 1.0, to: 0, duration: 0.5,
                 afterFinish:function(element){
                    element.style.top=this.totalHeight-element.offsetHeight+'px';
                    if(Prototype.Browser.IE){
                       element.style.filter="alpha(opacity=100)";
                    }else{
                       element.style.opacity=1;
                    }
                 }.bind(this,this.listElements[i])
              });
              if(i==this.listLength-1)
                this.currPos=-1;
           }else{
              new Effect.Move(this.listElements[i], { x: 0, y: -this.listElements[this.currPos].offsetHeight, mode: 'relative'});
           }
        }
      },
      startScrolling : function (speed){
        if(speed)
           this.speed = speed;
        this.interval=setInterval(this.scrollList.bind(this),this.speed);
      },
      stopScrolling : function() {
         clearInterval(this.interval);
      },
      onMouseOver : function(e){
         this.stopScrolling();
      },
      onMouseOut : function(e){
         this.startScrolling();
      }
    }

note - j'utilse bindAsEventListener au lieux d'un simple bind dans le callback (ou handler) de ma fonction, cela permet de faire passé en 1er argument l'objet event...

je t'explique pas tout , je connais pas ton niveau , alors si t'as des questions hésite pas bye.

Commentaire de mikerob le 05/01/2009 12:03:57

Salut Kimjoa,

Bon, vu que les vacances de Noël sont finite :( j'ai enfin pris le temps de regarder tes modifications. En deux mots : Très intéressant !

je ne connaissais pas dutout la fonction clearInterval, se qui fait que du cou, j'ai plein d'autre code source à modifier pour améliorer les performances ^^'

Par contre tu utilise un element.style.filter ou element.style.opacity à la place du Effect.Appear, c'est pour améliorer les perfs ?

Sinon dans l'ensemble, je comprend bien ton code, sauf le .bind(this,this.listElements[i]) après le afterEffect. Mais je suppose que je le comprendrais quand j'aurais lu l'article que tu m'as passé sur les objet javascript.

Par contre je reste sur ma position pour le .hasJS en global, car le but est effectivement de modifier toutes les listes (et j'irai même plus loin, tous les éléments de ma page).

J'appliquerait tes modifs sur ma source dès que j'aurai 5 minutes :)

Merci encode pour tes précieux conseil.

Commentaire de etirex le 16/09/2009 18:01:52 9/10

Bonjour et merci pour cette magnifique source. J'aurais toutefois une question: comment fait-on pour ne plus avoir de pause à chaque mouvement d'un élément?

En fait j'aurais besoin d'une liste déroulante qui fonctionnerait en continue, sans pause et effet d'opacité.

Merci beaucoup

Commentaire de mikerob le 16/09/2009 18:15:47

Salut Etirex,

Ma source est seulement prévue pour effacer un élément à chaque fois. Si tu veux quelque chose en continu, je te propose de regarder le script de Chmel que j'ai déjà cité dans ma description ;) : http://www.javascriptfr.com/code.aspx?ID=25084.

Commentaire de etirex le 16/09/2009 22:39:35

Commentaire de etirex le 16/09/2009 22:43:12

oops, désolé pour le double message,

en fait j'ai d'abord testé le script de Chmel, mais il me pose 2 problèmes:

1- Quand on charge la page, la liste est d'abord vide, et le scroll commence, ce qui n'est pas très esthétique, par rapport à ton script qui démarre avec une liste pleine

2- Quand la liste arrive au bout, elle laisse un blanc derriere elle jusqu'a ce que la totalité des titres soient afficher pour ensuite recommencer, là encore c'est beaucoup mieux avec ton script qui lui, s'affiche réellement en continue

Donc soit je peux enlever la pause sur ton script, soit il faut que je reprenne celui de Chmel pour voir si je peux gommer ces 2 défauts...

Commentaire de etirex le 17/09/2009 09:11:48

Bon je viens de m'en sortir, j'ai pris des idées de ton script que j'ai transposé au script de Chmel, maintenant ça roule.

Merci encore

Commentaire de etirex le 17/09/2009 15:18:37

Je vous fais profiter de mes modifs, ça peut servir à d'autres:

<!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>
<title>Texte Defilant Vertical en Continue</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">


</script>

<style type="text/css">
  div.flash {
    position : absolute;
    top : 50px;
    left : 200px;
    font-family: Arial, Tahoma, Helvetica, Sans-Serif;
    font-size: 1em;
    border: 1px solid #000000;
    width : 340px;
    height: 250px;
    padding-left : 10px;
    overflow: hidden;
  }

  #menu_deroulant {
    overflow: hidden;
    position: relative;
  }
  #menu_defile {
    position: relative;
    text-align:center;
  }

  #menu_defile ul {
    border:none;
    padding:0px;
    margin:0px;
  }
  #menu_defile ul li {
    padding:8px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    width:100%;
    list-style:none;
    font-family:arial;
    font-size:1.2em;
   }

</style>
</head>

<body>

      <div class='flash'>
        <div id='menu_deroulant'>
          <div id='menu_defile'>
            <ul id="scroller1">
              <li>01. Lorem ipsum dolor sit amet</li>
              <li>02. Lorem ipsum dolor sit amet</li>
              <li>03. Lorem ipsum dolor sit amet</li>
              <li>04. Lorem ipsum dolor sit amet</li>
              <li>05. Lorem ipsum dolor sit amet</li>
              <li>06. Lorem ipsum dolor sit amet</li>
              <li>07. Lorem ipsum dolor sit amet</li>
              <li>08. Lorem ipsum dolor sit amet</li>
              <li>09. Lorem ipsum dolor sit amet</li>
              <li>10. Lorem ipsum dolor sit amet</li>
            </ul>
          </div>

        </div>
      </div>
</body>
</html>

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

[XHTML & XML] Peut-on créer ses propres balises ? [ par mentral ] Bonjour à tous.En premier lieu, j'aimerai développer un petit "composant" (le terme n'est sans doute pas approprié) en javascript perme Expressions régulières [ par koalyptus ] Bonjour, n'étant pas très à l'aise avec les RegExp je voudrais savoir comment faire pour trouver une occurrence exacte d'un mot dans une chaîne. Je m Script Dernier message forum dans du xhtml 1.0 Strict [ par animusaquila ] Bonjour à tous,J'ai créé un site web (lien sur mon profil) contenant un forum phpbb3. J'aimerais en fait, créé un script en Java pour afficher les 5 d Scrolling horizontal & Scriptaculous [ par alexismessaoudi ] Bonjour,Je souhaiterais, pour mon site web, obtenir un scrolling horizontal de même type que celui du site Gucci voirGrâce à la librai Preload d'image et scriptaculous [ par Annadrill ] Bonjour,je cherche à faire un préload qui se déroulerais comme ceci,1. on arrive sur la page qui s'affiche et une div "chargement..." s'affiche avec u js, xhtml, j'ai besoin d'aide pour xul [ par parayes ] Bonjour, Bonsoirje regarde parsi par la et découvre petit a petit le xulje suis sous firefox 3et je voudrais créer un tout petit add-on tout simple po si quelqu'un a un calendrier compatible en xhtml 1.0 strict se serait trop cool [ par ahl00 ] bonjour je suis a la recherche d'un calendrier compatible en xhtml 1.0 strict si quelqu'un en dispose de un de preference permanent se serai vachement Grosse URGENCE incompatibilité IE et XHTML [ par Obla ] Bonsoir, Suis nouveau ici, merci par avance pour la lecture de ce post. Je suis un peu à l'Ouest en langage web donc au niveau des termes que j'emplo

Nos sponsors

Derniers Blogs

SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko

XNA IS DEAD! par richardc

TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice

[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio

TECHDAYS PARIS 2012 : CHUCK MORRIS N'A PAS PEUR DES MALWARES, CE SONT LES MALWARES QUI ONT PEUR DE CHUCK MORRIS par ROMELARD Fabrice

Forum

RE : MENU VERTICAL DéROULANT par lordmacrage

RE : REMPLACER UN SOUS CHAINE DANS UNE AUTRE par Renfield

REMPLACER UN SOUS CHAINE DANS UNE AUTRE par stealon

GOOGLE MAP PB ZINDEX MARKER par philou8

RE : AIDE SUR UN SCRIPT?? par NHenry

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

URGENT - Realisation d-un flux standard XML -NewsML- CAHIER DES CHARGES DISPONIBLE
Budget : 400€
Creation de newsletter sur une page Facebook
Budget : 400€
fichier d-export de site OS commerce ver plateforme logistique-CDC disponible
Budget : 1 200€

Logiciels

DocTranslate (V3.1.0.0)
DOCTRANSLATE (V3.1.0.0)

DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom...

Cliquez pour télécharger DocTranslate
Tribler (2012)
TRIBLER (2012)

Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des...

Cliquez pour télécharger Tribler
OneSwarm (2012)
ONESWARM (2012)

Le peer-to-peer qui protège votre vie privée, c'est OneSwarm. Ce logiciel de peer-to-peer crypté...

Cliquez pour télécharger OneSwarm
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System