J'aimerais modifier ce script en Class

Bonjour,

Voilà j'ai trouvé ce script très facile à modifier enfin pour le UP height...ou Left Width....

Mais pour le reste jy arrive pas. J'ai aussi simplifier le CSS.

In CSS:
.conteneur_defile{position:relative;width:100px;height:600px;margin:0 auto;overflow:hidden;padding:10px;}
.conteneur_defile2{position:relative;width:100px;height:200px;margin:0 auto;overflow:hidden;padding:10px;}
.defile{position:absolute;width:100px;text-align:center;}


<script type="text/javascript">
<!--
var defile;// l'element a deplacer
var psinit = 400; // position Verticale de depart fonction du Height de la Div.
var pscrnt = psinit;

function texteDefile() {
   if (!defile) defile = document.getElementById('defile');
   if (defile)
   {
      if(pscrnt < ( - defile.offsetHeight))
	  	{
         pscrnt = psinit;
        } else
		{
         pscrnt+= -1; // pixel par deplacement
      	}
      defile.style.top = pscrnt+"px";
   }
}
var timer = setInterval("texteDefile()",30); // delai de deplacement
-->
</script>
<div class="conteneur_defile">
<span id="defile" onmouseover="clearInterval(timer)" onmouseout='timer=setInterval("texteDefile()",30)'>
<?php include_once("partenaires/logos.htm"); ?></span>
</div>

Le problème c que je peux pas le réutiliser étant donner que defile est en ID pour quil fonctionne avec le script.

Donc ceci:

<div class="conteneur_defile2">
<span class="defile" onmouseover="clearInterval(timer)" onmouseout='timer=setInterval("texteDefile()",30)'>
Lorem ipsum dolor sit amet
</span>
</div>

ne marche pas!

Alors comment faire pour que le script soit réactif à la class defile ?

merci

salut,
je ne sais pas si ça résoult ton problème mais tu as le droit d'avoir un id et une class pour une même élément ! en revanche, c'est sûr que si tu dois appliquer le script à plusieurs fois le même id, forbidden alors, tu trouveras facilement ton bonheur en cherchant getelementbyclassname sur le g(scr)oogle

have swing

salut,

ben j'ai trouvé ça:

a écrit :

getElementBy* :

Dans les spécifications de javascript, il existe 2 fonctions natives pour récupérer des éléments dans les tags (x)HTML : getElementById() et getelementByTagName(). La première fonction permet de récupérer le contenu d'un tag possédant un attribut id (exemple : getElementById('dcTorrent')) [5] et la seconde permet de récupérer le contenu d'un tag par son type (exemple : getElementByTagName('a')).

Le soucis actuel est qu'on ne peut pas récupérer dans Mozilla[6] de contenu provenant de tags identifiés par un attribut class (exemple : <span class="une_classe">contenu</span>). Pour pallier à ce manque, il est possible d'utiliser deux autres fonctions externes qui permettent d'étendre les possibilités de ces deux fonctions : getElementByClassName()[7] et getElementsBySelector()[8].

Alors jai pas tout pigé! ya que 2 fonction en native qui existent en javascript.
Donc getElementByClassName()[7] et getElementsBySelector()[8] n'existe pas.
Après je comprends pas la notion de fonctions externes.

Je vais essayé de remplacer le GetElementsById par les autres mais je suis pas certaine que cela fonctionne

Ben c bien ce que je disais ça marche pas:

if (!defile) defile = document.getElementsBySelector('defile');

ou

if (!defile) defile = document.getElementsByClassName('defile');

il manque un truc .
Modifié par Diana (03 Apr 2007 - 17:32)

Bonjour.

Cette étrange fonction getElementsByClassName, ça n'existe pas en javascript.

Par contre, il existe "getElementsByName" qui ferait parfaitement l'affaire, dans la mesure où l'on rajouterais un attribut "name" aux balises que l'on souhaite distinguer.

// javascript :
nodes = document.getElementsByName("conteneur_defile");
// On y accède par l'indice :
n = nodes[0]... 

<div name="conteneur_defile" ...</div>

Modifié par GeorgesM (03 Apr 2007 - 18:36)

salut
quelques pistes pour getelementbyclassname (à part une petite recherche dans google oeuf corse
piste1
piste2
et, perso, j'utilise les fonctionnalités dom et elements de mootools pour ce genre de truc qui avec un simple

$$('.maclass')

accède à tous les éléments portant la class maclass, top isn't it ?

have swing

GeorgesM a écrit :
Par contre, il existe "getElementsByName" qui ferait parfaitement l'affaire, dans la mesure où l'on rajouterais un attribut "name" aux balises que l'on souhaite distinguer.

Attention, l'attribut name n'est pas valide pour l'élément div.

Mouai, ben ça me dit rien du tout et ça me parle pas du tout
Autant en php j'arrrive a me débrouillée, mais le javascript j'ai mes grosses lacunes

Mais même $".tralala" c pas possible, ça remplace le getElementsByID en plus amélioré.
Et si en plus il faut que je créer une function Class machin chose,

je suis pas au bout de mes peines
Je dit pas quil faut me macher le boulot, mais j'ai plus de connaissances en php quand javascript qui me donne d'enormes migraines
Modifié par Diana (03 Apr 2007 - 22:29)

Si tu ne veux pas te prendre la tête avec getElementsByClassName, tu peux tout simplement rajouter des id differentes a tes element défilant par exemple defile1, defile2 etc...
et ensuite tu appele ta fonction pour chaque id:

texteDefile('defile1');
texteDefile('defile2');

function texteDefile(elDefile) {
   if (!defile) defile = document.getElementById(elDefile);
   if (defile) {
      if(pscrnt < ( - defile.offsetHeight)){
         pscrnt = psinit;
        } else{
            pscrnt+= -1; // pixel par deplacement
        }
        defile.style.top = pscrnt+"px";
   }
}

Ceci dit déja que mettre un elément défilant, 9 fois sur 10 c'est pas une bonne idée, alors en mettre 2 ou 3 c'est encore moins une bonne idée, en plus une animation qui tourne ça ralentie la machine du visteur, mais deux ou trois en même temps il vaut mieux avoir une machine récente...

Bonsoir,

Oui ça ma l'air intéressant Matmat. Je sais pas encore comment je vais tourner le code mais ça ma l'air plus facile.

J'ai juste 2 scrollers a mettre et ça prend pas beaucoup d'UC donc ça va.

Merci

Par contre c'est quoi le eldefile (le défilement en espagnol) ?
Modifié par Diana (03 Apr 2007 - 22:39)

Bonsoir,

Soit dit en passant, j'ai proposé une fonction getElementsByClassName.

a écrit :
Par contre c'est quoi le eldefile (le défilement en espagnol) ?

C'est le nom de la variable, tu peux l'appeler comme que tu veux il faut juste que ce soit le même nom dans l'appel de la fonction et dans le getElementById de la fonction (c'est la variable qui transmet le nom de l'id). En fait la seule chose qui change c'est que tu appel ta fonction en lui disant "fait défiler cette id".

Si tu en as que deux je pense que getElementsByClassName (qui est par ailleur trés interressant) n'est pas forcément utile, en effet celui ci vat parcourir l'ensemble de tes balises pour trouver celle qui on la classe en question, ce qui est un opération qui ne me semble pas necessaire pour selectionner deux balises.
Modifié par matmat (03 Apr 2007 - 23:01)

oui d'accord,

Mais je suis un peu perdue là :

var defile;// l'element a deplacer
var psinit = 400; // position Verticale de depart fonction du Height de la Div.
var pscrnt = psinit;
texteDefile('defile1');
texteDefile('defile2');

function texteDefile(elDefile) {
   if (!defile) defile = document.getElementById(elDefile);
   if (defile)
   {
      if(pscrnt < ( - defile.offsetHeight))
	  	{
         pscrnt = psinit;
        } else
		{
         pscrnt+= -1; // pixel par deplacement
      	}
      defile.style.top = pscrnt+"px";
   }
}

Je laisse la variable defile ? ou ça en var texteDefile('defile1');

et mon css doit être alors en double ?

.conteneur_defile{position:relative;width:100px;height:600px;margin:0 auto;overflow:hidden;padding:10px;}
.conteneur_defile2{position:relative;width:100px;height:200px;margin:0 auto;overflow:hidden;padding:10px;}
#defile{position:absolute;width:100px;text-align:center;}
#defile2{position:absolute;width:100px;text-align:center;}

Je suis larguée...
Modifié par Diana (03 Apr 2007 - 23:09)

tu as une div avec id="defile1" et une autre avec id="defile2". La position de ces 2 là vat être modifier par le script.

Au niveau des css, tu as plusieurs choix soit tu laisse la même classe pour les deux div et tu leur assignent les propriété souhaitée avec celle-ci sinon tu peux aussi le faire avec les id : #defile1, #defile2{}

par exemple:

.conteneur_defile, .conteneur_defile2{position:relative;width:100px;margin:0 auto;overflow:hidden;padding:10px;}
.conteneur_defile2{height:600px;}
.conteneur_defile2{height:200px;}

#defile, #defile2{position:absolute;width:100px;text-align:center;}

Modifié par matmat (03 Apr 2007 - 23:36)

Bonjour,

Zut zut...

je crois que mon code est bon là, mais ça ne marche toujours pas

var defile;// l'element a deplacer
var psinit = 400; // position Verticale de depart fonction du Height de la Div.
var pscrnt = psinit;
 texteDefile('defile_logos');
 texteDefile('defile_who');

function texteDefile(defile) {
   if (!defile) defile = document.getElementById(texteDefile);
   if (defile)
   {
      if(pscrnt < ( - defile.offsetHeight))
	  	{
         pscrnt = psinit;
        } else
		{
         pscrnt+= -1; // pixel par deplacement
      	}
      defile.style.top = pscrnt+"px";
   }
}
var timer = setInterval("texteDefile()",30); // delai de deplacement
-->
</script>
<div id="conteneur_logos">
<span id="defile_logos" onmouseover="clearInterval(timer)" onmouseout='timer=setInterval("texteDefile()",30)'>
<?php include_once("partenaires/logos.htm"); ?></span>
</div>
<div id="conteneur_who">
<span id="defile_who" onmouseover="clearInterval(timer)" onmouseout='timer=setInterval("texteDefile()",30)'>
<?php include_once('php/external.php'); ?>Lorem ipsum dolor sit amet
Consectetuer et vel id condimentum
</span>
</div>

#conteneur_logos{position:relative;width:100px;height:600px;margin:0 auto;overflow:hidden;padding:10px;}
#conteneur_who{position:relative;width:150px;height:200px;margin:0 auto;overflow:hidden;padding:10px;}
#defile_logos{position:absolute;width:100px;text-align:center;}
#defile_who{position:absolute;width:150px;text-align:center;}

Ya un truc qui m'échappe, mais je vois pas ou

et j'ai même essayé comme ça :

var defile;// l'element a deplacer
var psinit = 400; // position Verticale de depart fonction du Height de la Div.
var pscrnt = psinit;
var texteDefile1('defile_logos');
var texteDefile2('defile_who');

function defile(texteDefile1,textDefile2) {
   if (!defile) defile = document.getElementById(defile);
   if (defile)
   {
      if(pscrnt < ( - defile.offsetHeight))
	  	{
         pscrnt = psinit;
        } else
		{
         pscrnt+= -1; // pixel par deplacement
      	}
      defile.style.top = pscrnt+"px";
   }
}
var timer = setInterval("texteDefile()",30); // delai de deplacement

ça marche pas aussi
Modifié par Diana (04 Apr 2007 - 14:31)

là ça marche :

var defile = null;
var psinit = 400; // position Verticale de depart fonction du Height de la Div.
var pscrnt = psinit;
texteDefile1 = 'defile_logos';
texteDefile2 = 'defile_who';

function Tdefile(texteDefile1,texteDefile2) {
   if (defile==null)
       defile = document.getElementById("defile_logos");
     defile = document.getElementById("defile_who");

   if (defile!=null)
   {
      if(pscrnt < ( - defile.offsetHeight))
	  	{
         pscrnt = psinit;
        } else
		{
         pscrnt+= -1; // pixel par deplacement
      	}
      defile.style.top = pscrnt+"px";
   }
}
var timer = setInterval("Tdefile()",30);

Sauf que defile = document.getElementById("defile_who");
ne défile pas