cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014
-
14 avril 2009 à 17:47
lecoriace
Messages postés100Date d'inscriptionmercredi 28 juillet 2010StatutMembreDernière intervention24 décembre 2023
-
27 sept. 2013 à 12:43
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
/*
* 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 true)
* - 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)
* - activeCookie : permet de sauvegarder la position du défilement et de la restitué au chargement de al page (acif que durant la session)
*/
<!-- end of menu -->
</div> <!-- end of menu wrapper -->
<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<div class="section_w620 fl margin_right_50">
<div class="header_01">
Qui sommes nous ?</div>
<p class="em_text">Nous sommes cabinet de conseil spécialisé en gestion de maintenance sur le plan technique, organisationnel et du système d'information. Notre objectif est d'apporter des solutions pratiques aux divers problémes opérationnels qui destabilisent les entreprises afin de les faire parvenir "au zéro panne"</p>
<p><strong>Dans le but de vous aider à améliorer votre système d'information, le cabinet HOUDATECH CONSULTING vous propose la solution adoptée par les professionnels : la G.M.A.O(Gestion de Maintenance Assistée par Ordinateur).</strong></p>
<div class="margin_bottom_40"></div>
<div class="section_320 fl margin_right_40">
<div class="header_01">
<div>FIABILISEZ VOS EQUIPEMENTS</div>
</div>
<p class="em_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis eros eu mauris sollicitudin luctus. </p>
<p>Pellentesque condimentum, urna a luctus porta, lacus lacus pretium ante, sed vehicula leo dolor a nisi. Aliquam erat volutpat. Etiam dictum pellentesque elit eu viverra. Vestibulum egestas, purus ac cursus porttitor, sem metus fringilla purus.</p>
<ul class="list_01">
<li>
<div><a href="#">Zéro-panne avec le programme TPM</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Programme d'Efficacité énergétique
</a></li>
</ul>
</div>
<div class="section_w250_without_padding fl">
<div class="header_01">
<div>PILOTEZ VOS OPERATIONS</div>
</div>
<div class="header_02"><a href="pages/Management industriel.html#whatpanne">Qu'appelez vous une panne?</a></div>
<p>Voila une question simple, mais qui ...</p>
<div class="header_02"><a href="pages/Management industriel.html#riskmag">Les risques du magasin</a></div>
<p>Votre plus grande hantise avec le</p>
<div class="header_02"><a href="pages/Management industriel.html#whymaint">Pourquoi le plan de maintenance?</a></div>
<p>Pendant que les financiers font leur...</p>
<div class="header_02"><a href="pages/Management industriel.html#whatpanne">Etes vous condamné au 5S...?</a></div>
<p>Le 5S est beaucoup plus qu'une opération set-setal</p>
<div class="header_02"><a href="pages/Management industriel.html#whymaint">Atteindre le zero panne</a></div>
<p>Voila un titre bien provocateur pour bon nombre</p>
</div>
<div class="margin_bottom_20"></div>
</div>
<div class="margin_bottom_20"></div>
</div> <!-- end of content -->
<!--<div id='marqueeBox1' class='marqueeBoxV drag'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
</div>
</div>
<br />-->
</body>
proftnj
Messages postés54Date d'inscriptionlundi 10 juillet 2006StatutMembreDernière intervention11 septembre 2011 11 sept. 2011 à 16:11
Si la page comporte bien les déclarations obligatoires, elle est validée XHTML 1.0 Transitional quand elle comporte le script.
Ce script permet donc de se passer de 'marquee' et offre d'autres effets intéressants.
proftnj
Messages postés54Date d'inscriptionlundi 10 juillet 2006StatutMembreDernière intervention11 septembre 2011 11 sept. 2011 à 02:30
Pour ne pas me casser la tête, j'utilise
this.coefOverSpeed=coefOverSpeed || 0;
J'ai alors l'effet que je voulais vraiment pour un scroll vertical classique avec arrêt par onmouseover.
C'est super !
Reste à voir si la page qui contiendra ce script sera validée en XHTML 1.0 Transitional (je n'ai pas encore vérifié).
Bravo et merci !
masternico
Messages postés487Date d'inscriptiondimanche 5 octobre 2003StatutMembreDernière intervention 1 septembre 2011 29 nov. 2010 à 16:59
Salut,
j'aime beaucoup ton script que j'utilise sur un de mes sites. L'intégration s'est passé sans (trop) de problèmes.
Par contre, je ne mets pas 10 car tu as restreint le fonctionnement du passage de la souris à la seule accélération et abitrairement en te basant sur la zone du milieu. Par exemple, j'avais besoin que le marquee s'arrete et non pas qu'il accélère. Il serait interessant que tu rajoute un paramètre qui permette de définir comment on veut que celà fonctionne
Autre modif que j'ai du faire, c'est que le marquee est déjà rempli lorsqu'il commence ( this.startStep=0; )
Et pour un défilement en continu, j'ai rajouté un clonage de div, parceque sinon, il faut attendre que tout le message ait disparu pour le voir réapparaitre à nouveau.
Je mets ici mes modifs pour le cas ou celà inspirerait qqu'un:
function Marquee(box,content,speed,dirc,coefOverSpeed){
//ini les variables
this.box=$(box);
this.content=$(content);
//on repositionne les élements + cache les scrolls
this.box.style.overflow='hidden';
this.box.style.position='relative';//ie7 bug
this.content.style.position='relative';
//on clone le content pour avoir un affichage continu
this.content_double = this.content.cloneNode(this.content);
this.box.appendChild(this.content_double);
//calcule la dimension du conteneur + la dimention du contenue
var boxDim=this.box['client'+(horizontalDirc?'Height':'Width')];
var contentDim=this.content['offset'+(horizontalDirc?'Height':'Width')];
//on definit las position max et de départ
this.maxDim=this.inverseDirc?-boxDim:-contentDim;
this.startStep=0;
this.currentStep=this.startStep;
//ajoutes les evenemnts
this.eventOver=this.onMouseover.bindAsEventListener(this);
Event.observe(this.box,'mouseover',this.eventOver);
Event.observe(window, 'load', init_carousel);
function init_carousel(){
/*
liste des arguments possibles :
- id ou element conteneur
- id ou element contenue
- vitesse initiale
- direction du déplacement
- vitesse du scrolling , lors d'un mouse mouve au dessus de l 'élement
*/
new Marquee('carousel_conteneur','carousel',1,'top',0);
}
//////////////////
Merci pour ton script
patrickbangkok
Messages postés7Date d'inscriptionmardi 31 août 2010StatutMembreDernière intervention31 août 2010 31 août 2010 à 16:48
J'ai cherche pendant plusieurs heures un script qui fonctionne... En vain.
Le tien contient quelques petites erreurs :fermeture </html> par exemple et d'autres que n'importe qui peut corriger facilement.
Il est facile a parametrer et donc a utiliser.
Bravo, continue.
PatrickBangkok (neophyte de la construction de site)
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 7 juin 2010 à 12:41
analog101
Messages postés173Date d'inscriptionmardi 1 avril 2008StatutMembreDernière intervention25 février 2020 7 juin 2010 à 10:07
bonjour,
ou peut-on voir des exemples ?
frost20
Messages postés1Date d'inscriptionmercredi 3 février 2010StatutMembreDernière intervention 3 février 2010 3 févr. 2010 à 03:31
ça marche très bien j'adore W3C all good.
CreaReno
Messages postés2Date d'inscriptionmercredi 13 mai 2009StatutMembreDernière intervention20 mai 2009 20 mai 2009 à 17:10
En fait il y avait un autre fichier Js qui n'étais plus utilisé et qui s'appelait scroll.js je suppose que c'est lui qui fesait un conflit.
Pour le coup faute de temps j'ai mis en place un malheureux <marquee> mais à l'occasion je me re-pencherais sur ton jolie script.
je repasserais poster le résultat de mes pérégrination au besoin.
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 13 mai 2009 à 17:11
t'as pas un msg d'erreur pour voir si je peux t'aider?
CreaReno
Messages postés2Date d'inscriptionmercredi 13 mai 2009StatutMembreDernière intervention20 mai 2009 13 mai 2009 à 17:05
J'ai l'impression qu'il y a un conflit entre les javascript type Lightbox et ce code :(
Quelqu'un d'autre a t-il observé quelque chose de similaire ?
envahiseur
Messages postés1Date d'inscriptionmardi 21 avril 2009StatutMembreDernière intervention21 avril 2009 21 avril 2009 à 20:36
merci je prend se code pour mon site qui es en test présentement je recherche un 100% w3c validation pas facile beau travail
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 17 avril 2009 à 12:57
Salut jdmcreator, concernant le white-space : nowrap; il est pas forcement nécessaire dans 100% des cas, par exemple si mon contenue est un tableau ect ...,mais juste à 99ù :) !!
concernant la direction , c'est tout à fait possible , par défaut cette option vaut 3 , pour faire simple faut juste remplacé cette ligne .
this.coefOverSpeed=coefOverSpeed || 3;
par
this.coefOverSpeed=coefOverSpeed || 0;
voià, je reposte pas pour si peu...
merci pour la note crazygogo , j'espère que ça te servira !!
a++
crazygogo
Messages postés135Date d'inscriptionsamedi 18 janvier 2003StatutMembreDernière intervention17 avril 2009 17 avril 2009 à 09:47
ça marche nickel bravo
jdmcreator
Messages postés647Date d'inscriptionsamedi 30 décembre 2000StatutMembreDernière intervention20 juillet 20127 16 avril 2009 à 23:56
Bonjour,
Pour le white-space, pourquoi ne l'ajoute tu pas dynamiquement ? Sinon, bonne source, je n'ai pas vu la version modifié mais serais-ce possible que lorsque l'on aille d'un bord, cela ne change pas de direction ?
JDMCreator
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 16 avril 2009 à 18:07
je viens de reposter le code, y avais un beug dans le prototype , et aussi lorsque le contenue était plus petit que le conteneur ...
!!! si vous voulais faire marquee horizontale, placé toujours le contenue dans un span , et aussi avec un style white-space : nowrap;
bye
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 15 avril 2009 à 15:14
merci les gars pour vos commentaire !!
concernant la compatibilité sur chrome , j'avais éssayé y a 1 an de ça avec un doctype transitional , et ça ne marchait pas, oui je sais 1 an c'est énorme :) , après c'est sur respecté les normes à fond c'est une chose , mais est-ce vraiment utile si aux final c'est 100% compatible?? .... perso , je suis pas un acharné des normes, mais ais créer ce script pour kil soit aussi plus évolutif que la simple balise marquee , y'a déjà un système de défilement au passage de la sourie en plus , j'ai pas le temps d'en faire plus , vous peux être :) ,par exemple un systeme de scroll à barre et bouton plus classique , ou scroller directement le contenue avec un mouse down , intégrer des items au contenue pour un défilement discontinue ect... En faite je lais fais surtout pour bien comprendre la méthode pour le développement ma librairie, dont je reprendrais le développement après le taff qui m'a été confié ...
Pour info , une règle css comme marque devrait voire le jour en css3 , donc dans 10 ans , çà fait 10 de moins :)
Concernant ie7, je règle ce beug de suite, et élargie mes testes de compatibilité.
a++
XtremDuke
Messages postés626Date d'inscriptionsamedi 28 septembre 2002StatutMembreDernière intervention18 mai 20094 15 avril 2009 à 13:57
Marquee est une balise propriétaire (de MS si je me souviens bien) et est donc logiquement interdite par le consortium qui prône la standardisation des langages.
Cependant, il est tout à fait possible de l'utiliser dans un document purement Html et dénué de doctype.
A partir du moment où on précise la compatibilité du document (html/xhtml => doctype), il faut bien-entendu oublier cette balise.
Tout dépend du développeur.
crazygogo
Messages postés135Date d'inscriptionsamedi 18 janvier 2003StatutMembreDernière intervention17 avril 2009 15 avril 2009 à 09:59
Bul3
Messages postés4933Date d'inscriptionsamedi 1 juillet 2006StatutMembreDernière intervention 2 février 201516 15 avril 2009 à 09:54
bah... marquee ça marche pourtant nickel,
avec Chrome compris...
exemple avec des liens et des images :
<marquee OnMouseOver="this.stop();"
OnMouseOut="this.start();">
[url1 ]
[url2 ]
[url3 ]
[url4 ]
</marquee>
l'organisme dont on parle reconnaitra
sûrement cette balise dans 20 ans...
@+
crazygogo
Messages postés135Date d'inscriptionsamedi 18 janvier 2003StatutMembreDernière intervention17 avril 2009 15 avril 2009 à 09:34
Comme l'a dit kimjoa, c'est la balise marquee qui n'est pas compatible !!!
cs_Kimjoa
Messages postés262Date d'inscriptionvendredi 6 mai 2005StatutMembreDernière intervention19 septembre 2014 14 avril 2009 à 23:46
salut, ba en faite c'est compatible chrome justement ...
bye
cs_Manuel78
Messages postés1Date d'inscriptiondimanche 1 mars 2009StatutMembreDernière intervention14 avril 2009 14 avril 2009 à 23:35
très bonne source vais m'en servir, dommage pour chrome mais vu sont taux de pénétration limite on s'en fout...
27 sept. 2013 à 12:43
<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>HOUDATECH CONSULTING</title>
<meta name="keywords" content="Site officiel de houdatech consulting" />
<meta name="description" content="Cabinet de conseil spécialisé en gestion de maintenance assisté par ordinateur" />
<!--LIEN DU MENU ICI-->
<link rel='stylesheet' href='styles/styles.css' />
<link rel="icon" type="image/png" href="images/logo officiel.png" />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<!--FIN LIEN DU MENU-->
<link href="styles/templatemo_style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
<link rel="stylesheet" href="marquee/ressource/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="marquee/jquery/jquery.js"></script>
<script type="text/javascript" src="marquee/jquery/marquee.js"></script>
<script type="text/javascript">
/*
* 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 true)
* - 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)
* - activeCookie : permet de sauvegarder la position du défilement et de la restitué au chargement de al page (acif que durant la session)
*/
$(function(){
$('.section_w250 #marqueeBox1').marquee({
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',
});
$('#marqueeBox2').marquee({
speed : 2,
dirc : 'bottom',
scrollOnMove : true,
maxSpeedOnMove : 10,
expoSpeedOnMove : 3
});
$('#marqueeBox3').marquee({
speed : 0.5,
dirc : 'left',
btSpeedUp : 'btUp3',
btSpeedDown : 'btDown3',
speedActiveBt : 10,
cssActiveBtSpeedUp : 'btUpHActive',
cssActiveBtSpeedDown : 'btDownHActive',
eventBt : 'over',
stopOnOver : true
});
$('#marqueeBox4').marquee({
speed : 2,
dirc : 'right',
stopOnOver : true,
draggable : true,
cursorOverDrag : '../ressource/drag.cur',
cursorOnDrag : '../ressource/move.cur'
});
});
</script>
</head>
<body >
<div id="templatemo_header_wrapper">
<div id="templatemo_header">
<div id="image">
<img src="images/gljdfgior2.png" />
</div>
<!--<div id="twitter"><a href="#"> </a></div>-->
</div> <!-- end of header -->
</div> <!-- end of header wrapper -->
<div id="templatemo_menu_wrapper">
<!-- commence of menu -->
<!--<div id="templatemo_menu">
<ul>
<li><a href="#" class="current"><span></span>Homepage</a></li>
<li><a href="#" target="_parent"><span></span>Templates</a></li>
<li><a href="http://www.koflash.com" target="_blank"><span></span>Gallery</a></li>
<li><a href="#"><span></span>Partners</a></li>
<li><a href="#"><span></span>Contact</a></li>
<a href="http://fr.vectorhq.com" title="fichier vectoriel from fr.vectorhq.com" class="templatemo_menu_right" rel="nofollow" target="_blank"></a>
</ul>
</div>-->
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Accueil</span></a></li>
<li class='has-sub'><a href='#'><span>Nos services</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Logiciels</span></a>
<ul>
<li><a href='#'><span>GPAO</span></a></li>
<li><a href='#'><span>GMAO gestion SAV</span></a></li>
<li><a href='#'><span>Outil d'ordonnancement</span></a></li>
<li class='last'><a href='#'><span>Suivit de fabrication</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='pages/Management industriel.html'><span>Management industriel</span></a>
<ul>
<li><a href='pages/diagnostic_de_maintenance.html'><span>Diagnostic de maintenance</span></a></li>
<li class='last'><a href='pages/programme_prevaction.html'><span>Programme prev'action</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Formation technique</span></a>
<ul>
<li><a href='pages/Mgmnt_de_la_Maintenance.html'><span>Mgmt de maintenance</span></a></li>
<li><a href='pages/Mgmnt_de_la_Production.html'><span>Mgmt de production</span></a></li>
<li class='last'><a href='pages/Technique industrielle.html'><span>technique industriel</span></a></li>
</ul>
</li>
<li><a href='#'><span>Realisations</span></a></li>
<li class='has-sub'><a href='#'><span>Documentation</span></a>
<ul>
<li><a href='pages/Technotrucs.html'><span>Technotrucs</span></a></li>
<li class='last'><a href='pages/Management industriel.html'><span>Management industriel</span></a></li>
</ul>
</li>
<li><a href='#'><span>Galerie</span></a></li>
<li class='last'><a href='pages/contact.html'><span>Contact</span></a></li>
</ul>
</div>
<!-- end of menu -->
</div> <!-- end of menu wrapper -->
<div id="templatemo_content_wrapper">
<div id="templatemo_content">
<div class="section_w620 fl margin_right_50">
<div class="header_01">
Qui sommes nous ?</div>
<p class="em_text">Nous sommes cabinet de conseil spécialisé en gestion de maintenance sur le plan technique, organisationnel et du système d'information. Notre objectif est d'apporter des solutions pratiques aux divers problémes opérationnels qui destabilisent les entreprises afin de les faire parvenir "au zéro panne"</p>
<p><strong>Dans le but de vous aider à améliorer votre système d'information, le cabinet HOUDATECH CONSULTING vous propose la solution adoptée par les professionnels : la G.M.A.O(Gestion de Maintenance Assistée par Ordinateur).</strong></p>
<div class="margin_bottom_40"></div>
<div class="section_320 fl margin_right_40">
<div class="header_01">
<div>FIABILISEZ VOS EQUIPEMENTS</div>
</div>
<p class="em_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis eros eu mauris sollicitudin luctus. </p>
<p>Pellentesque condimentum, urna a luctus porta, lacus lacus pretium ante, sed vehicula leo dolor a nisi. Aliquam erat volutpat. Etiam dictum pellentesque elit eu viverra. Vestibulum egestas, purus ac cursus porttitor, sem metus fringilla purus.</p>
<ul class="list_01">
<li>
<div><a href="#">Zéro-panne avec le programme TPM</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Programme d'Efficacité énergétique
</a></li>
</ul>
</div>
<div class="section_w250_without_padding fl">
<div class="header_01">
<div>PILOTEZ VOS OPERATIONS</div>
</div>
<div class="image_wrapper_01">
<a href="#" target="_parent"><img src="images/templatemo_image_01.jpg" alt="image" width="240" height="120" /></a> </div>
<p>
<ul class="list_01">
<li>
<div><a href="#">Logiciels industriels (GMAO, GPAO, APS)
</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Programme d'Efficacité énergétique
</a></li>
</ul>
</p>
</div>
<div class="margin_bottom_40"></div>
<div class="section_320 fl margin_right_40">
<div class="header_01">
<div>
<div>FORMEZ VOS HOMMES
</div>
</div>
</div>
<div class="image_wrapper_01">
<a href="#" target="_parent"><img src="images/Sans titre-1.png" alt="image" width="240" height="120" /></a> </div>
<ul class="list_01">
<li>
<div><a href="#">Séminaires de formation
</a></div>
<a href="#" target="_parent"></a></li>
<li><a href="#">Formation professionnelle
</a></li>
</ul>
</div>
<div class="cleaner"></div>
</div>
<div class="section_w250 fr">
<div class="section_w250_title news_title">
Nos clients
</div>
<div id='marqueeBox1' class='marqueeBoxV drag'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
</div>
</div>
<div class="margin_bottom_20"></div>
<div class="section_w250_title testimonial_title">
Management</div>
<div class="w250_content">
<div class="header_02"><a href="pages/Management industriel.html#whatpanne">Qu'appelez vous une panne?</a></div>
<p>Voila une question simple, mais qui ...</p>
<div class="header_02"><a href="pages/Management industriel.html#riskmag">Les risques du magasin</a></div>
<p>Votre plus grande hantise avec le</p>
<div class="header_02"><a href="pages/Management industriel.html#whymaint">Pourquoi le plan de maintenance?</a></div>
<p>Pendant que les financiers font leur...</p>
<div class="header_02"><a href="pages/Management industriel.html#whatpanne">Etes vous condamné au 5S...?</a></div>
<p>Le 5S est beaucoup plus qu'une opération set-setal</p>
<div class="header_02"><a href="pages/Management industriel.html#whymaint">Atteindre le zero panne</a></div>
<p>Voila un titre bien provocateur pour bon nombre</p>
</div>
<div class="margin_bottom_20"></div>
</div>
<div class="margin_bottom_20"></div>
</div> <!-- end of content -->
</div> <!-- end of content wrapper -->
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer">
Copyright © 2013 <a href="#">HOUDATECH CONSULTING</a> |
<a href="#/page/1" target="_parent"></a>
<div class="margin_bottom_20"></div>
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a>
</div> <!-- end of footer -->
</div> <!-- end of footer wrapper -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'></script>
<script src='js/logging.js'></script>
<!--<div id='marqueeBox1' class='marqueeBoxV drag'>
<div id='contentBox1'>
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
du blabla en HTML oui oui !! <img src='marquee/ressource/image.gif' /> <br />
</div>
</div>
<br />-->
</body>
11 sept. 2011 à 16:11
Ce script permet donc de se passer de 'marquee' et offre d'autres effets intéressants.
11 sept. 2011 à 02:30
this.coefOverSpeed=coefOverSpeed || 0;
J'ai alors l'effet que je voulais vraiment pour un scroll vertical classique avec arrêt par onmouseover.
C'est super !
Reste à voir si la page qui contiendra ce script sera validée en XHTML 1.0 Transitional (je n'ai pas encore vérifié).
Bravo et merci !
29 nov. 2010 à 16:59
j'aime beaucoup ton script que j'utilise sur un de mes sites. L'intégration s'est passé sans (trop) de problèmes.
Par contre, je ne mets pas 10 car tu as restreint le fonctionnement du passage de la souris à la seule accélération et abitrairement en te basant sur la zone du milieu. Par exemple, j'avais besoin que le marquee s'arrete et non pas qu'il accélère. Il serait interessant que tu rajoute un paramètre qui permette de définir comment on veut que celà fonctionne
Autre modif que j'ai du faire, c'est que le marquee est déjà rempli lorsqu'il commence ( this.startStep=0; )
Et pour un défilement en continu, j'ai rajouté un clonage de div, parceque sinon, il faut attendre que tout le message ait disparu pour le voir réapparaitre à nouveau.
Je mets ici mes modifs pour le cas ou celà inspirerait qqu'un:
function Marquee(box,content,speed,dirc,coefOverSpeed){
//ini les variables
this.box=$(box);
this.content=$(content);
this.speed=speed || 1;
this.dirc=dirc || 'top';
this.coefDirc=1;
this.coefOverSpeed=coefOverSpeed || 3;
this.inverseDirc=(this.dirc=='bottom' || this.dirc=='right');
var horizontalDirc=(this.dirc=='bottom' || this.dirc=='top');
//on repositionne les élements + cache les scrolls
this.box.style.overflow='hidden';
this.box.style.position='relative';//ie7 bug
this.content.style.position='relative';
//on clone le content pour avoir un affichage continu
this.content_double = this.content.cloneNode(this.content);
this.box.appendChild(this.content_double);
//calcule la dimension du conteneur + la dimention du contenue
var boxDim=this.box['client'+(horizontalDirc?'Height':'Width')];
var contentDim=this.content['offset'+(horizontalDirc?'Height':'Width')];
//on definit las position max et de départ
this.maxDim=this.inverseDirc?-boxDim:-contentDim;
this.startStep=0;
this.currentStep=this.startStep;
//ajoutes les evenemnts
this.eventOver=this.onMouseover.bindAsEventListener(this);
Event.observe(this.box,'mouseover',this.eventOver);
this.eventOut=this.onMouseout.bindAsEventListener(this);
Event.observe(this.box,'mouseout',this.eventOut);
this.interval=setInterval(this.interval.bind(this),35);
this.eventUnload=this.unload.bindAsEventListener(this);
Event.observe(window,'unload',this.eventUnload.bind(this));
}
Marquee.prototype={
onMouseout : function(e){
Event.stopObserving(this.box,'mousemove',this.eventMouseMove);
this.coefDirc=1;
},
onMouseover : function(e){
var dim=Element.viewportOffset(this.box);
if(this.dirc=='top' || this.dirc=='bottom'){
this.coor=[dim[1],dim[1]+this.box.clientHeight];
}else this.coor=[dim[0],dim[0]+this.box.clientWidth];
this.mouseMove(e);
this.eventMouseMove=this.mouseMove.bindAsEventListener(this);
Event.observe(this.box,'mousemove',this.eventMouseMove);
},
interval : function(){
var acc=this.speed*this.coefDirc;
$(this.content).style[this.dirc]=this.currentStep-acc+'px';
$(this.content_double).style[this.dirc]=this.currentStep-acc+'px';
this.currentStep-=acc;
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;
}
},
mouseMove:function(e){
this.coefDirc = 0; // on bloque le défilement
},
unload : function(){
clearInterval(this.interval);
Event.stopObserving(this.box,'mouseover',this.eventOver);
Event.stopObserving(this.box,'mouseout',this.eventOut);
Event.stopObserving(window,'unload',this.eventUnload.bind(this));
}
}
Event.observe(window, 'load', init_carousel);
function init_carousel(){
/*
liste des arguments possibles :
- id ou element conteneur
- id ou element contenue
- vitesse initiale
- direction du déplacement
- vitesse du scrolling , lors d'un mouse mouve au dessus de l 'élement
*/
new Marquee('carousel_conteneur','carousel',1,'top',0);
}
//////////////////
Merci pour ton script
31 août 2010 à 16:48
Le tien contient quelques petites erreurs :fermeture </html> par exemple et d'autres que n'importe qui peut corriger facilement.
Il est facile a parametrer et donc a utiliser.
Bravo, continue.
PatrickBangkok (neophyte de la construction de site)
7 juin 2010 à 12:41
http://www.javascriptfr.com/codes/MARQUEE-VERSION2-COMPATIBLE-MOOTOOLS-JQUERY-PROTOTYPE-SANS-LIBRAIRIE_51524.aspx
7 juin 2010 à 12:39
Pour l'exemple tu peux allé ici -> http://psallette.fr/
7 juin 2010 à 10:07
ou peut-on voir des exemples ?
3 févr. 2010 à 03:31
20 mai 2009 à 17:10
Pour le coup faute de temps j'ai mis en place un malheureux <marquee> mais à l'occasion je me re-pencherais sur ton jolie script.
je repasserais poster le résultat de mes pérégrination au besoin.
13 mai 2009 à 17:11
13 mai 2009 à 17:05
Quelqu'un d'autre a t-il observé quelque chose de similaire ?
21 avril 2009 à 20:36
17 avril 2009 à 12:57
concernant la direction , c'est tout à fait possible , par défaut cette option vaut 3 , pour faire simple faut juste remplacé cette ligne .
this.coefOverSpeed=coefOverSpeed || 3;
par
this.coefOverSpeed=coefOverSpeed || 0;
voià, je reposte pas pour si peu...
merci pour la note crazygogo , j'espère que ça te servira !!
a++
17 avril 2009 à 09:47
16 avril 2009 à 23:56
Pour le white-space, pourquoi ne l'ajoute tu pas dynamiquement ? Sinon, bonne source, je n'ai pas vu la version modifié mais serais-ce possible que lorsque l'on aille d'un bord, cela ne change pas de direction ?
JDMCreator
16 avril 2009 à 18:07
!!! si vous voulais faire marquee horizontale, placé toujours le contenue dans un span , et aussi avec un style white-space : nowrap;
bye
15 avril 2009 à 15:14
concernant la compatibilité sur chrome , j'avais éssayé y a 1 an de ça avec un doctype transitional , et ça ne marchait pas, oui je sais 1 an c'est énorme :) , après c'est sur respecté les normes à fond c'est une chose , mais est-ce vraiment utile si aux final c'est 100% compatible?? .... perso , je suis pas un acharné des normes, mais ais créer ce script pour kil soit aussi plus évolutif que la simple balise marquee , y'a déjà un système de défilement au passage de la sourie en plus , j'ai pas le temps d'en faire plus , vous peux être :) ,par exemple un systeme de scroll à barre et bouton plus classique , ou scroller directement le contenue avec un mouse down , intégrer des items au contenue pour un défilement discontinue ect... En faite je lais fais surtout pour bien comprendre la méthode pour le développement ma librairie, dont je reprendrais le développement après le taff qui m'a été confié ...
Pour info , une règle css comme marque devrait voire le jour en css3 , donc dans 10 ans , çà fait 10 de moins :)
Concernant ie7, je règle ce beug de suite, et élargie mes testes de compatibilité.
a++
15 avril 2009 à 13:57
Cependant, il est tout à fait possible de l'utiliser dans un document purement Html et dénué de doctype.
A partir du moment où on précise la compatibilité du document (html/xhtml => doctype), il faut bien-entendu oublier cette balise.
Tout dépend du développeur.
15 avril 2009 à 09:59
http://i87.servimg.com/u/f87/13/27/85/89/2009-010.png
15 avril 2009 à 09:54
avec Chrome compris...
exemple avec des liens et des images :
<marquee OnMouseOver="this.stop();"
OnMouseOut="this.start();">
[url1 ]
[url2 ]
[url3 ]
[url4 ]
</marquee>
l'organisme dont on parle reconnaitra
sûrement cette balise dans 20 ans...
@+
15 avril 2009 à 09:34
14 avril 2009 à 23:46
bye
14 avril 2009 à 23:35