Menu défilant - Codes sources

Information pour mettre en place

Les informations pour créer une menu défilant vertical

Code JAVASCRIPT : (dmc_utils.zip, dmcplugnewsV.js)
A mettre dans la header de votre page (X)HTML (<head></head>)
Exemple de code :
<script src="dmc_utils.js" type="text/javascript"> </script>
<script src="dmcplugnewsV.js" type="text/javascript"> </script>

Déclaration des menus défilant :
Pour ajouter un nouveau menu vous devez utiliser la méthode dmcNewsV.dmcNewsVaddNews() dans une balise script après la déclaration des deux fichiers js.

Cette dernière accepte comme paramètre un objet {}.

L'objet accepte un paramètre obligatoire id qui correspond à l'id de la liste.
Il accepte aussi des paramètres facultatifs :
- spacer : number qui correspond à l'espace entre chaque article de la news (li) en px; 5px par défaut.
- width : number qui correspond à la longueur en px du menu défillant, peut être spécifié aussi dans la css
- height : number qui correspond à la hauteur en px du menu défilant, peut être spécifié aussi dans la css
- timer : number qui correspond au temps entre chaque déplacement des articles de la news en millième de seconde, 50 millisecondes par défaut.
- bouge : boolean, true si la hauteur des articles est inférieure à la hauteur du menu, on duplique les articles pour les faires défiler. false par défaut.
- btshow : valeur de l'id de l'élément qui va agrandir la hauteur du menu pour afficher l'ensemble des articles.
Exemple de code :
dmcNewsV.dmcNewsVaddNews({id:"dmcNews", timer:100, spacer:20, bouge:true, width:100, height:200, btshow:"parent"});

Code HTML :
Le plugin "dmcplugnewsV" se lance automatiquement.
Le menu défilant est obligatoirement une liste (OL ou LI):
Exemple de code :
<ul id="dmcNews">
  <li>
    <span>10/12/207</span>
    <p>Ajoute d'un nouveau script</p>
  </li>
  <li>
    <span>11/12/207</span>
    <p>
      <a href="http://www.aliasdmc.fr" target="_blank">On peut faire des liens
      </a>
    </p>
  </li>
  <li>
    <img src="images/codesource/bruleur.jpg"/>
  </li>
</ul>

Si vous avez des images vous devez spécifier une taille.

Code CSS :
Vous devez spécifier quatre propriétés pour le conteneur, les tailles doivent être en pixels (peuvent être spécifier via le javascript), mais je vous conseille de les spécifier.
Exemple de code :
<style type="text/css">
#dmcNews{
  list-style:none;
  overflow:hidden;
  width:150px;
  height:100px;
}
</style>

Les padding sont supprimés automatiquement pour le conteneur ol (ou ul).
Les margin sont supprimés automatiquement pour les li