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

Ce site au démarrage

begin process at 2012 05 28 11:14:26

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Navigation

> MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET SANS LIBRAIRIE

MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET SANS LIBRAIRIE

Information sur la source

Note :

9,00 / 10

Catégorie :Navigation Classé sous :marquee, défilement, mootools, jquery, prototype Niveau :Initié Date de création :30/03/2010 Date de mise à jour :23/04/2010 14:25:27 Vu / téléchargé :3 578 / 430

Auteur : Kimjoa

Ecrire un message privé

Commentaire sur cette source (30)

Ajouter un commentaire et/ou une note

Description

Suite au succès de la première version, et de beaucoup de messages mail, je met à disposition cette nouvelle version. J'ai rajouté la possibilité de définir des boutons de défilement, en fonction des évènements mouseover, ou mouseup.

Il est toujours possible de gére le scroll automatique au survol de la sourie.
On peux faire défiler le contenue en restant le bouton appuyé sur la sourie et en la déplacant.

On peux aussi activer les cookie pour quel le contenue ne change pas de place au chargement de la page.

J'ai aussi adapté ce code au 3 grosses librairie js, à savoir, Mootools, jQuery et Prototype.

Source

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>simpleMarquee</title>
<link rel="stylesheet" href="../ressource/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript">
function init(){
/*
* Définition de Marquee, fonction de défilement
* @param box (string/node) le noeud marquee
* @param options (map) les options
* - speed : la vitesse du déplacement (default 0.5)
* - dirc : la direction du déplacement (default top)
* - btSpeedUp : la bouton d'accélération
* - btSpeedDown : la bouton d'esaccélération
* - speedActiveBt : vitesse d'accélaration pour le bouton (default 10)
* - cssActiveBtSpeedUp : class du bouton accélération actif
* - cssActiveBtSpeedUp : class du bouton desaccélération actif
* - eventBt : l'évenement de l'activation de bouton (default over, sinon down)
* - stopOnOver : pour stopper le difelement au survole (default false)
* - scrollOnMove : pour actievr le scrolling au survole
* - maxSpeedOnMove : vitesse d'accélaration pour le scrool (default 10)
* - expoSpeedOnMove : comportement exponentiel de l'accélaration (default 2)
* - draggable : permet de scroller le contenue lors d'un drag (default false)
* - cursorOverDrag : définit l'url du curseur à utilisé pour spécifié que le contenue peux etre "dragger"
* - cursorOnDrag : définit l'url du curseur à utilisé pour spécifié que le contenue est en train d'etre "dragger"
*/
new Marquee('marqueeBox1', {
speed : 0.5,
dirc : 'top',
btSpeedUp : 'btUp1',
btSpeedDown : 'btDown1',
speedActiveBt : 10,
cssActiveBtSpeedUp : 'btUpVActive',
cssActiveBtSpeedDown : 'btDownVActive',
eventBt : 'down',
draggable : true,
cursorOverDrag : '../ressource/drag.cur',
cursorOnDrag : '../ressource/move.cur'
});
new Marquee('marqueeBox2', {
speed : 2,
dirc : 'bottom',
scrollOnMove : true,
maxSpeedOnMove : 10,
expoSpeedOnMove : 3
});
new Marquee('marqueeBox3', {
speed : 0.5,
dirc : 'left',
btSpeedUp : 'btUp3',
btSpeedDown : 'btDown3',
speedActiveBt : 10,
cssActiveBtSpeedUp : 'btUpHActive',
cssActiveBtSpeedDown : 'btDownHActive',
eventBt : 'over',
stopOnOver : true
});
new Marquee('marqueeBox4', {
speed : 2,
dirc : 'right',
stopOnOver : true,
draggable : true,
cursorOverDrag : '../ressource/drag.cur',
cursorOnDrag : '../ressource/move.cur'
});
}
</script>
</head>
<body onload='init()'>
<h1>{<br />
speed : 0.5,<br />
dirc : 'top',<br />
btSpeedUp : 'btUp1',<br />
btSpeedDown : 'btDown1',<br />
speedActiveBt : 10,<br />
cssActiveBtSpeedUp : 'btUpVActive',<br />
cssActiveBtSpeedDown : 'btDownVActive',<br />
eventBt : 'down',<br />
draggable : true,<br />
cursorOverDrag : '../ressource/drag.cur',<br />
cursorOnDrag : '../ressource/move.cur'<br />
}</h1>
<a id='btUp1' class='btUpV'></a>
<div id='marqueeBox1' class='marqueeBoxV drag'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
</div>
</div>
<a id='btDown1' class='btDownV'></a>
<br />
<h1>{<br />
speed : 2,<br />
dirc : 'bottom',<br />
eventBt : 'over',<br />
stopOnOver : false,<br />
scrollOnMove : true,<br />
maxSpeedOnMove : 10,<br />
expoSpeedOnMove : 3<br />
}</h1>
<div id='marqueeBox2' class='marqueeBoxV'>
<div id='contentBox2'>
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
</div>
</div>
<div class='horizontale'>
<h1>{<br />speed : 0.5,<br />
dirc : 'left',<br />
btSpeedUp : 'btUp3',<br />
btSpeedDown : 'btDown3',<br />
speedActiveBt : 10,<br />
cssActiveBtSpeedUp : 'btUpHActive',<br />
cssActiveBtSpeedDown : 'btDownHActive',<br />
eventBt : 'over',<br />
stopOnOver : true<br />
}</h1><br />
<a id='btUp3' class='btUpH'></a>
<div id='marqueeBox3' class='marqueeBoxH'>
<span id='contentBox3'>
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
</span>
</div>
<a id='btDown3' class='btDownH'></a>
</div>
<br /><br /><br /><br />
<div class='horizontale'>
<h1>{<br />
speed : 2,<br />
dirc : 'right',<br />
stopOnOver : true,<br />
draggable : true,<br />
cursorOverDrag : '../ressource/drag.cur',<br />
cursorOnDrag : '../ressource/move.cur'<br />
}</h1><br />
<div id='marqueeBox4' class='marqueeBoxH'>
<span id='contentBox4'>
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
du blabla en HTML oui oui !! <img src='../ressource/image.gif' />
</span>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>simpleMarquee</title>

<link rel="stylesheet" href="../ressource/style.css" type="text/css" media="screen" />

<script type="text/javascript" src="marquee.js"></script>
<script type="text/javascript">
   
  
   function init(){
      
	  
	 /* 
	 * Définition de Marquee, fonction de défilement 
	 * @param box (string/node) le noeud marquee 
	 * @param options (map) les options
	 *		- speed : la vitesse du déplacement (default 0.5)
	 *		- dirc : la direction du déplacement (default top)
	 *		- btSpeedUp : la bouton d'accélération 
	 *		- btSpeedDown : la bouton d'esaccélération 
	 *		- speedActiveBt : vitesse d'accélaration pour le bouton (default 10)
	 *		- cssActiveBtSpeedUp : class du bouton accélération actif
	 *		- cssActiveBtSpeedUp : class du bouton desaccélération actif
	 *		- eventBt : l'évenement de l'activation de bouton (default over, sinon down)
	 *		- stopOnOver : pour stopper le difelement au survole (default false)
	 *		- scrollOnMove : pour actievr le scrolling au survole
	 *		- maxSpeedOnMove : vitesse d'accélaration pour le scrool (default 10)
	 *		- expoSpeedOnMove : comportement exponentiel de l'accélaration  (default 2)
	 *		- draggable : permet de scroller le contenue lors d'un drag  (default false)
	 *		- cursorOverDrag : définit l'url du curseur à utilisé pour spécifié que le contenue peux etre "dragger" 
	 *		- cursorOnDrag : définit l'url du curseur à utilisé pour spécifié que le contenue est en train d'etre "dragger" 
	 */
	 
	 
      new Marquee('marqueeBox1', {
	      speed : 0.5,
		  dirc : 'top',
		  btSpeedUp : 'btUp1',
		  btSpeedDown : 'btDown1',
		  speedActiveBt : 10,
		  cssActiveBtSpeedUp : 'btUpVActive',
		  cssActiveBtSpeedDown : 'btDownVActive',
		  eventBt : 'down',
		  draggable : true,
		  cursorOverDrag : '../ressource/drag.cur',
		  cursorOnDrag : '../ressource/move.cur'
	  });
	  
	  new Marquee('marqueeBox2', {
	      speed : 2,
		  dirc : 'bottom',
		  scrollOnMove : true,
		  maxSpeedOnMove : 10,
		  expoSpeedOnMove : 3
	  });
	  
	   new Marquee('marqueeBox3', {
	      speed : 0.5,
		  dirc : 'left',
		  btSpeedUp : 'btUp3',
		  btSpeedDown : 'btDown3',
		  speedActiveBt : 10,
		  cssActiveBtSpeedUp : 'btUpHActive',
		  cssActiveBtSpeedDown : 'btDownHActive',
		  eventBt : 'over',
		  stopOnOver : true
	  });
	  
	   new Marquee('marqueeBox4', {
	      speed : 2,
		  dirc : 'right',
		  stopOnOver : true,
		  draggable : true,
		  cursorOverDrag : '../ressource/drag.cur',
		  cursorOnDrag : '../ressource/move.cur'
	  });
   }
</script>
</head>
<body onload='init()'>
	<h1>{<br />
			speed : 0.5,<br />
		  dirc : 'top',<br />
		  btSpeedUp : 'btUp1',<br />
		  btSpeedDown : 'btDown1',<br />
		  speedActiveBt : 10,<br />
		  cssActiveBtSpeedUp : 'btUpVActive',<br />
		  cssActiveBtSpeedDown : 'btDownVActive',<br />
		  eventBt : 'down',<br />
		  draggable : true,<br />
		  cursorOverDrag : '../ressource/drag.cur',<br />
		  cursorOnDrag : '../ressource/move.cur'<br />
		  }</h1>
   <a id='btUp1' class='btUpV'></a>
   <div id='marqueeBox1' class='marqueeBoxV drag'>
      <div id='contentBox1'>
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
      </div>
   </div>
   <a  id='btDown1' class='btDownV'></a>
   <br />
   <h1>{<br />
	      speed : 2,<br />
		  dirc : 'bottom',<br />
		  eventBt : 'over',<br />
		  stopOnOver : false,<br />
		  scrollOnMove : true,<br />
		  maxSpeedOnMove : 10,<br />
		  expoSpeedOnMove : 3<br />
	  }</h1>
   <div id='marqueeBox2' class='marqueeBoxV'>
      <div id='contentBox2'>
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> <br />
      </div>
   </div>
	
	
	
	<div class='horizontale'>
   <h1>{<br />speed : 0.5,<br />
		  dirc : 'left',<br />
		  btSpeedUp : 'btUp3',<br />
		  btSpeedDown : 'btDown3',<br />
		  speedActiveBt : 10,<br />
		  cssActiveBtSpeedUp : 'btUpHActive',<br />
		  cssActiveBtSpeedDown : 'btDownHActive',<br />
		  eventBt : 'over',<br />
		  stopOnOver : true<br />
	  }</h1><br />
   <a  id='btUp3' class='btUpH'></a>
   <div id='marqueeBox3' class='marqueeBoxH'>
      <span id='contentBox3'>
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
      </span>
   </div>   
   <a   id='btDown3' class='btDownH'></a>
   </div>
	<br /><br /><br /><br />
   <div class='horizontale'>
   <h1>{<br />
	      speed : 2,<br />
		  dirc : 'right',<br />
		  stopOnOver : true,<br />
		  draggable : true,<br />
		  cursorOverDrag : '../ressource/drag.cur',<br />
		  cursorOnDrag : '../ressource/move.cur'<br />
	  }</h1><br />
   <div id='marqueeBox4' class='marqueeBoxH'>
      <span id='contentBox4'>
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
         du blabla en HTML oui oui !! <img src='../ressource/image.gif' /> 
      </span>
   </div>
   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>

Conclusion

on pourrait mettre de barre de scroll , mais j'ai pas le temps.

Fichier Zip

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

marquee
- jquery
  - index.html 6 694 octets
  - index2.html 4 425 octets
  - jquery.js 72 174 octets
  - marquee.js 11 733 octets
- mootools
  - index.html 8 339 octets
  - marquee.js 9 936 octets
  - mootools.js 66 867 octets
- prototype
  - index.html 8 314 octets
  - marquee.js 10 814 octets
  - prototype.js 144 728 octets
- ressource
  - down.png 2 027 octets
  - downActive.png 1 842 octets
  - drag.cur766 octets
  - image.gif 1 039 octets
  - left.png 1 695 octets
  - leftActive.png 1 570 octets
  - move.cur766 octets
  - right.png 1 706 octets
  - rightActive.png 1 574 octets
  - style.css 1 508 octets
  - Thumbs.db27 648 octets
  - up.png 2 039 octets
  - upActive.png 1 856 octets
- stand alone
  - index.html 8 569 octets
  - marquee.js 16 360 octets

Télécharger le zip

Historique

30 mars 2010 19:14:04 :: correction de bug + ajout fonctionnalités
09 avril 2010 14:07:45 :: mise en place de cookie
20 avril 2010 13:00:50 :: mise a jour des langues écrite de gauche à droite
21 avril 2010 15:57:53 :: correction de bug
23 avril 2010 14:25:29 :: encore des bugs !!

Sources du même auteur

SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON

MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...

UID - FRAMEWORK JAVASCRIPT

DOMBUILDER

GETELEMENTSBYREG

Toutes les sources de Kimjoa

Sources de la même categorie

ANTI-ROBOTS V 1.0 par MacGaliver

PRÉSENTOIR PAGE/SUJET par tiranus

NAVIGATEUR INTERNET HAVRET par HAVRETos

WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator

NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh

Toutes les sources de la catégorie Navigation

Sources en rapport avec celle ci

MYNOTIFICATIONS par inwebo

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

RÉALISER UN COMPTE À REBOURS AVEC REDIRECTION AUTOMATIQUE AV... par kmsystem

SCROLLBAR CLASS par heycraft

GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx

Commentaires et avis

Commentaire de LeFauve42 le 06/04/2010 12:44:22

Ca a l'air sympa, mais tu n'aurais pas une version en ligne quelque part qu'on puisse voir a quoi ca ressemble ?

Eric

Commentaire de Kimjoa le 06/04/2010 14:06:41

désolé eric pas de version en ligne pour cette version, sinon une ancienne ici -> http://st-coeur.fr/

Commentaire de LeFauve42 le 06/04/2010 14:12:55

OK, je vois un peu mieux ce que c'est :o)
Merci pour le lien !

Commentaire de suspect_0 le 09/04/2010 07:36:35

Sympa le script.
J'utilise la version avec Jquery et j'aimerais diffuser du news. Je voudrais alors enregistrer en session PHP avec ajax la dernière news affichée, ainsi si l'utilisateur rafraîchit la page les news ne recommenceront pas à 0. Pourriez-vous m'indiquer comment faire
Merci.

Commentaire de LeFauve42 le 09/04/2010 11:28:58

Ce serait peut-etre plus simple de faire ca avec un cookie, non ?

Commentaire de suspect_0 le 09/04/2010 13:15:41

Oui. Mais mon problème n'est pas au niveau de l'enregistrement mais plutôt comment connaître le dernier élément affiché (sélécteurs Jquery peut-être? mais comment)

Commentaire de Kimjoa le 09/04/2010 13:17:37

bonne idée suspect_0, sinon LeFauve42 a raison , faux passer par un cookie. Vais inclure cette option rapidement.

a++

Commentaire de Kimjoa le 09/04/2010 14:13:24

"comment connaître le dernier élément affiché"

Ce script permet de faire défiler tout le contenue d'un élément, mais pas de le faire par item. Donc on peux pas connaitre la dernière news dans ton cas. On peux juste récupérer la position.

Je viens de reposter dit moi si ca le fait.

Commentaire de suspect_0 le 09/04/2010 14:45:54

J'ai vu dans le code getCookie et saveCookie mais je ne sais pas comment utiliser

Commentaire de Kimjoa le 09/04/2010 14:50:09

faut que mette en option activeCookie à true, comme dans le 1er example.

Commentaire de suspect_0 le 13/04/2010 12:15:53

C'est OK pour moi KIMJOA, merci pour l'update.

Commentaire de jadawl01 le 19/04/2010 15:38:11

Bonjour
Merci pour le script
Il mrache bien tant que le charset n'est pas UTF
Si on met UTF dans content="text/html;charset=iso-8859-1"
<html dir="rtl" lang="ar" xml:lang="ar"

content="text/html;charset=utf" />
Alors ça bloque pour le scroll horizontal
Tu paeux voire par toi-meme ici:
http://fet.123.fr/marquee/jquery/index.html
Alors , s'agit-il d'un bug?

Commentaire de jadawl01 le 19/04/2010 15:41:03

Bonjour
Merci pour le script
Il mrache bien tant que le charset n'est pas UTF
Si on met UTF dans content="text/html;charset=iso-8859-1"
et si on met la direction sur RTL right To Left (j'utilise l'arabe)
<html dir="rtl" lang="ar" xml:lang="ar"

Alors ça bloque pour le scroll horizontal
Tu paeux voire par toi-meme ici:
http://fet.123.fr/marquee/jquery/index.html
Alors , s'agit-il d'un bug?

Commentaire de Kimjoa le 20/04/2010 13:04:55

ok normalement c'est bon. Mais c'est bizarre , en langue arabe les barres de scroll horizontale sont à fond à droite quand elle valent 0 et à fond à gauche avec un chiffre négatif ....

dit moi si ca le fait ! a+

Commentaire de jadawl01 le 20/04/2010 16:39:55

Bonjour
Je ne vois pas que c'est bon :)
Car quand j'ouvre la page avec Ie7
- le scroll vertical commence tout de suite et en continu
- le scroll horizontal met un temps terrible à ommencer (presque 30 secondes)
- dans le scroll vertical, j'ai le message suivant (j'ai enlevé exprés le < de la tag pour qu'il s'affiche dans ce forum):
span id='contentBox3'>
         ????? ????? ????? ?????  img src='../ressource/image.gif' />
         du blabla en HTML oui oui !!  img src='../ressource/image.gif' />
         ????? ????? ????? ?????  !!  img src='../ressource/image.gif' />
         du blabla en HTML oui oui !!  img src='../ressource/image.gif' />
         ????? ????? ????? ????? ?????  !!  img src='../ressource/image.gif' />
         du blabla en HTML oui oui !!  img src='../ressource/image.gif' />

Seul apparait le message en français (charctéres latines)

Sous Firefox, meme comportement, à l'exception que le ça met moins de temps à apparaitre et que le messgae disparait subitement avant la fin et qu'aucun caractére arabe n'apparait !!!

Merci

Commentaire de jadawl01 le 20/04/2010 16:47:56

CORRECTION DU MESSAGE PRECEDENT !!!!
Bonjour
Je ne vois pas que c'est bon :)
Car quand j'ouvre la page avec Ie7
- le scroll vertical commence tout de suite et en continu
- le scroll horizontal met un temps terrible à ommencer (presque 30 secondes)
- dans le scroll HORIZONTAL , j'ai le message suivant (j'ai enlevé exprés le < de la tag pour qu'il s'affiche dans ce forum):
span id='contentBox3'>
         ????? ????? ????? ?????  img src='../ressource/image.gif' />
         du blabla en HTML oui oui !!  img src='../ressource/image.gif' />
         ????? ????? ????? ?????  !!  img src='../ressource/image.gif' />
         du blabla en HTML oui oui !!  img src='../ressource/image.gif' />
         ????? ????? ????? ????? ?????  !!  img src='../ressource/image.gif' />
         du blabla en HTML oui oui !!  img src='../ressource/image.gif' />

Seul apparait le message en français (charctéres latines)

Sous Firefox, meme comportement, à l'exception que le ça met moins de temps à apparaitre et que le messgae disparait subitement avant la fin et qu'aucun caractére arabe n'apparait !!!

Merci

Commentaire de Kimjoa le 21/04/2010 15:58:44

ok jadawl01 là ca devrait le faire , tiens moi au courant

Commentaire de jadawl01 le 22/04/2010 22:19:42

Bonsoir
Merci Kimjoa pour la nouvelle version
c'est nettement meilleur maintenant
petit probleme (de compatibilité peut-etre):
Sous Firefox, ça marche nickel !!!
Sous IE, quand tout le message est passé, il met un certain à recommencer (12 secondes). D'ailleurs, le message clignote et disparait vers la fin (aprés le passage d' à peu prés 97%)
Sous Opera, le message met un certain temps à s'initialiser, puis disparait juste aprés le passage d' à peu prés 10% , puis il met un trés loooong temps avant de reaparaitre

tu peux tester avec les trois navigateurs sur:
http://fet.123.fr/marquee2/jquery/index.html
Merci

Commentaire de Kimjoa le 23/04/2010 14:27:32

bon j'espère que cette fois si, c'est bon ! j'ai testé sous ie, ff ,opéra et safari, en langue française et arabe.
a+

Commentaire de Kimjoa le 23/04/2010 14:29:39

sinon j'oubliais , y'a un scintillement sous ie, pour l'éviter, remplace le span "contentBox3" par un div et applique lui une hauteur fixe.

Commentaire de jadawl01 le 23/04/2010 16:45:32

Bonjout
J'ai testé le fichier jquery/index2.html
pour FireFox OK !!
Pour Opera OK !!
Pour IE7 il y a ce probleme irritant de scintillement meme avec DIV au lieu de SPAN

Commentaire de Kimjoa le 23/04/2010 16:47:09

ok , as tu mit une hauteur fixe pour contentBox3 ?

Commentaire de Kimjoa le 23/04/2010 16:58:43

bon en faite même avec une hauteur fixe ca clignote sous ie7 ET IE6. Sous IE8 c'est bon.
Je pense pas pouvoir faire grand chose en faite. J'ai découvert un bug en langue arabe , ie gère très mal les scroll bar dans cette langue, et même si on les voit pas elle sont active. Bizarrement quand je teste sans caractère arabe y'a aucun problème.

Je sais qu'il existe pas mal de css pour former les caractères arabes, tu devrais les essayer.

dsl de pas plus t'aider, a+

Commentaire de jadawl01 le 23/04/2010 18:59:42

Merci Kimjoa pour cet aide
Oui, le css est la bonne direction
en effet, Jai ajouté un "padding" :
<div id='contentBox3' style=' padding: 4px;'>
Maintenant sous IE, plus de scintillement !!
Seul une petite secousse de temps en temps :)

Commentaire de jadawl01 le 24/04/2010 15:47:03

Bonjour
Je reviens pour dire que maintenant ça marche nickel sans AUCUN probleme et ce pour Opera, FireFox et IE7
le script est 100% compatible UTF y compris l'arabe
Je l'ai definitivement adopté sur mon site htt://hijaj.net/bb
comme on le voit, Le defillement est souple

Un grand Merci :)

Commentaire de Kimjoa le 24/04/2010 23:41:42

ba ca fait plaisir a entendre :) a++

Commentaire de Easysmile le 29/04/2010 17:44:09 9/10

Marche très bien sur mon site en local, merci pour le code !

Commentaire de piballo le 10/06/2010 05:45:39

Super source, j'aimerai l'utiliser comme slider, peut on faire en sorte que ça ne boucle pas ? je m'explique, je le lance avec speed à 0 et je voudrais que ça défile uniquement au passage sur les flèches, jusque la pas de soucis mais du coup j'aimerai qu'au départ le clip contenant les éléments soit donc calé à gauche et pas caché et que lorsqu'on arrive à l'extrémité gauche ou droite ça ne boucle pas, est ce possible ? en espérant être clair dans ma demande :$
merci d'avance.

Commentaire de piballo le 10/06/2010 06:40:09

Bon j'ai réussi, si ça intéresse quelqu'un, j'ai ajouté une option boucle et modifié :

Cette fonction

if(this.options.activeCookie && this.box.id){
Event.observe(window, 'unload', this.saveCookie.bindAsEventListener(this));
this.currentStep = this.getCookie() || this.startStep;
}else{
if(this.options.boucle == true){
this.currentStep =0;
}else{
this.currentStep = this.startStep;
}
}

puis celle ci :

setSteep : function(){;
var acc = this.options.speed;
this.content.style[this.options.dirc] = this.currentStep - acc + 'px';
this.currentStep -= acc;
if(this.options.boucle == true){
if(this.currentStep >= 0)
this.currentStep = 0;
if(this.inverseDirc){
if(this.currentStep < this.maxDim+ this.startStep)
this.currentStep = this.maxDim+ this.startStep;
}else if(this.currentStep < this.maxDim+ this.startStep){
this.currentStep = this.maxDim+ this.startStep;
}
}else{
if(this.currentStep > this.startStep)
this.currentStep = this.maxDim;
if(this.inverseDirc){
if(this.currentStep < this.maxDim)
this.currentStep = this.startStep;
}else if(this.currentStep < this.maxDim){
this.currentStep = this.startStep;
}
}

},

Commentaire de froh80 le 20/02/2011 11:31:33 9/10

Hello Piballo, peux-tu préciser à quel endroit précisément on doit mettre ta condition :

"
if(this.options.activeCookie && this.box.id){
Event.observe(window, 'unload', this.saveCookie.bindAsEventListener(this));
this.currentStep = this.getCookie() || this.startStep;
}else{
if(this.options.boucle == true){
this.currentStep =0;
}else{
this.currentStep = this.startStep;
}
}
"

Merci !

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

plugin wslide jquery [ par am1ra2 ] bonjour, j'ai utilisé le pluguin wslide de jquery pour le défilement des pages html,tout va bien,ce que je veux est que le défilement soit juste au pa comment faire fonctionner un script pour prototype avec un script pour jquery sur une même page html [ par tiger159 ] Bonjour, Je voudrais faire fonctionner un script en prototype et un script en jQuery sur une même page. J'ai bien essayé de placer l'appel de prototyp jquery / Jquery UI : Faire apparaître une div et modifier une image puis faire l'inverse [ par monoski ] Bonjour à tous, Voilà ce que j'aimerai faire : J'aimerai réaliser une page avec des titres, puis en dessous une petite image "+" qui lorsqu'on cliq probleme avec jquery [ par karouani ] Bonsoir Je veux utiliser une slider plusieur fois dans ma page Php en fusant une boucle cette dernier fait appel a une page HTML qui contient slider TRANSITION DE PAGES HTML5 [ par yakkhuru ] Bonjour Je suis en train de programmer un site avec plusieurs pages indépendantes et j'aimerais utiliser l'effet de transition entre pages en slide c Calendrier dynamique: infobulle dans un "event" [ par Dusty35 ] Bonjour, J'utilise un calendrier dynamique [url=http://jquery-week-calendar.googlecode.com/svn/trunk/jquery.weekcalendar/full_demo/weekcalendar_full_ Compatibilité entres navigateurs avec JQuery [ par maclive ] Bonjour, Je ne sais pas si je suis dans la bonne section car je suis débutant en javascript. Voila je m'intéresse à la librairie jquery, j'ai un chat [jQuery] Faire sortir une variable de $.ajax [ par kilhom ] Bonjour à tous ! Voilà je suis débutant en javascript et j'ai quelque soucis avec une fonction (ajax) de jQuery. J'aimerais pouvoir faire sortir la va fonction Remove(); avec this [ par corentin9 ] Bonjour, Je ne m'en sors vraiment pas pour effectuer une petite fonction toute simple en javacript/jquery. J'ai une liste d'item qui s'affichent sur pb lightbox jquery et sortable() jquery [ par sebastien_et_typh ] Bonjour a tous voici mon problème : sur ma page j'aimerais afficher des photos miniatures en fonction de leur position dans ma bdd , dessus j'utilise

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP