Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1944 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [résolu]Problème DHTML, liaison entre js et CSS

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[résolu]Problème DHTML, liaison entre js et CSS

n°2076645
Launster
Posté le 17-05-2011 à 17:07:02  profilanswer
 

Bonjour,
 
j'essaye actuellement d'écrire un petit script qui agisse comme un slide avec des images. Je met mon code, puis décrit mon problème :
 
Voici le php (pour ceux qui ne connaisse pas le php, prenez en compte uniquement le html, ici le php ne fais rien de particulier dessus) :
        echo '<div id="slides">'; //la boite où vont défiler les images
 echo '<div id="slides_defil">';    //l'ensemble des images
 echo '<img class="slide" src="img/call_of_duty_4_modern_warfare_2.jpg" id="test1" alt="1"/>
         <img class="slide" src="img/02168120-photo-brink.jpg" id="test2" alt="2"/>
         <img class="slide" src="img/images.jpg" id="test3" alt="3"/>
';
 echo '</div>';
 echo '</div>';
        echo '<script type="text/javascript">slide2();</script>';
 
Voici le js :
function slide2()
{
 var img = document.getElementById("slides_defil" );   //img correspond à l'ensemble des images
 if(img.style.marginLeft == "-1200px" )
 {
  img.style.marginLeft = "-0px";
 }
 else
 {
  img.style.marginLeft = (parseInt(img.style.marginLeft) -600) + "px";
 }
 window.setTimeout("slide2()", 1000);
}
 
 
le CSS :
#slides
{
 height:400px;
 width:600px;
 overflow:hidden;
}
.slide
{
 height:400px;
 width:600px;
}
#slides_defil     //c'est ici que le js agit
{
 width:6000px;
 color:black;
 margin-left:-0px;
}

 
 
Actuellement, le problème c'est lorsque le js veut interagir avec le CSS, j'ai fais des tests et le js ne m'affiche rien quand je met alert(img.style.marginLeft)
J'utilise Firebug, et après des tests, je peux dire que le problème survient lors du if, il m'affiche ceci (firebug) "Erreur d'analyse de la valeur pour « margin-left ». Déclaration abandonnée."
Il semble que le js n'est pas "accès" au CSS...
J'ai essayé avec doctype et sans, mais sans succès...
 
Quelqu'un a une idée ?


Message édité par Launster le 18-05-2011 à 12:50:30
mood
Publicité
Posté le 17-05-2011 à 17:07:02  profilanswer
 

n°2076652
rufo
Pas me confondre avec Lycos!
Posté le 17-05-2011 à 17:49:48  profilanswer
 

Tu devrais utiliser ,une lib javascript cross-browser, style Prototype.
 
Ex : http://www.prototypejs.org/api/element/getStyle
 
Comme ça, plus de bugs dus à ton code et ça passera sur tous les navigateurs (Firefox colle le 'px' à certaines propriétés, pas IE, il me semble)...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2076655
Launster
Posté le 17-05-2011 à 17:53:34  profilanswer
 

J'ai oublié de préciser que je test sous Firefox, mais je viens d'essayer sous IE et chrome, ça ne fonctionne toujours pas.  
J'essayerai la lib, mais je doute que ce soit ça le problème étant donné qu'il n'arrive même pas à lire la propriété

n°2076660
rufo
Pas me confondre avec Lycos!
Posté le 17-05-2011 à 18:00:54  profilanswer
 

Tu attends bien que le document (page) soit chargée au moins?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2076725
vanish
Ce qui brûle, brûle !
Posté le 18-05-2011 à 01:19:03  profilanswer
 

Salut,

 

non ce n'est pas "ici" que le js agit, le js agit directement sur l'element, c'est a dire qu'il te fout un attribut style sur l'element html même si celui-ci est déjà régi apr des d'autres regles css.

 

Bref,  -0px ça ne te choque pas ?
En tout cas lui il ne connait pas ;)
(indice ;) : en faisant alert(img.style.marginLeft) après avoir fait  img.style.marginLeft = "-0px"; , tu obitens quoi ?)

 

Si tu veux sauter les problemes suis le premier conseil de rufo, une lib comme jquery te permet de faire ce genre de calculs / comparaisons directement avec des nombres, et non pas avec des comparaisons de string.
Mais on peut effectivement le faire soi meme.

 

ps :IE aussi rufo

Message cité 1 fois
Message édité par vanish le 18-05-2011 à 01:24:25
n°2076765
rufo
Pas me confondre avec Lycos!
Posté le 18-05-2011 à 10:18:27  profilanswer
 

vanish a écrit :

Salut,
 
[...]
 
ps :IE aussi rufo


 
Il me semblait que c'était que les navigateurs de la ligné de Mozilla (y compris Netscape) qui accolaient "px" dans la propriété? A mois qu'à partir d'une version de IE, ça ait changé (sous IE6, je suis presque sûr que y'a pas le px)...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
n°2076788
Launster
Posté le 18-05-2011 à 11:26:32  profilanswer
 

Je vais test avec la lib, et je vous dis si ça marche.

Citation :

-0px ça ne te choque pas ?


le "-0px" est resté suite à des tests car j'utilisais un parseInt() et apparemment si la chaine commence par 0 il comprend qu'il doit renvoyer ça en octal.
Mais j'ai testé avec 0px, 600px et ça ne m'affichais toujours rien ^^'
 

Citation :

(indice ;) : en faisant alert(img.style.marginLeft) après avoir fait  img.style.marginLeft = "-0px"; , tu obitens quoi ?)


Effectivement, là il m'affiche "0px" et ne râle pas à propos d'une erreur d'analyse... Il effectue même le script comme il faut ensuite... (mis à part que évidemment, du coup il revient à 0px à chaque fois au début du script ^^' )
Du coup, j'imagine que si j'initialisais d'une manière ou d'une autre, ça fonctionnerait...
 

Citation :

Tu attends bien que le document (page) soit chargée au moins?


Oui oui, quand même  ^^

n°2076802
Launster
Posté le 18-05-2011 à 12:08:10  profilanswer
 

Au final je n'ai pas utilisé prototype (notamment car je n'ai jamais utilisé de lib encore, et que je n'ai pas le temps actuellement d'y regarder de plus près, bien que ça ne tardera pas !), mais ça fonctionne.
 
Voici le js :
 
function slide()
{
 var img = document.getElementById("slides_defil" );
 img.style.marginLeft = 0;
 slide2();
}
 
function slide2()
{
 var img = document.getElementById("slides_defil" );
 if(parseInt(img.style.marginLeft) == -1200)
 {
  img.style.marginLeft = 0;
 }
 else
 {
  img.style.marginLeft = (parseInt(img.style.marginLeft) -600) + "px" ;  //aussi étrange que ça puisse paraitre, si j'enlève le px, et/ou le parseint, ça ne fonctionne plus...
 }
 window.setTimeout("slide2()", 1000);
}
 
et le code php légèrement changé à cause des marges créer par l'echo sur plusieurs lignes :
 
        echo '<div class="commun">';
 echo '<div id="slides">';
 echo '<div id="slides_defil">';
 echo '<img class="slide" src="img/call_of_duty_4_modern_warfare_2.jpg" id="test1" alt="1"/>';
 echo '<img class="slide" src="img/02168120-photo-brink.jpg" id="test2" alt="2"/>';
 echo '<img class="slide" src="img/images.jpg" id="test3" alt="3"/>';
 echo '</div>';
 echo '</div>';
 echo '</div>';
 echo '<script type="text/javascript">slide();</script>';
 
 
Et ho ! Miracle, ça fonctionne sous Chrome, IE, et FF
 
Merci pour votre aide !

n°2076807
Launster
Posté le 18-05-2011 à 12:48:43  profilanswer
 

J'ai amélioré mon slide (maintenant ça bouge pour de vrai :D ) et je me suis rendu compte de certaines "règles" enfin de comment ça fonctionne quoi, histoire que d'autres puissent s'en servir si besoin :
 
Pour donner une valeur, il faut ajouter le "px" à la fin.
ex : img.style.marginLeft = (parseInt(img.style.marginLeft) + 100) + "px";
 
Vous remarquez aussi qu'il faut utiliser un parseInt pour reprendre la valeur contenu par la propriété.
 
Donc pour un if par exemple, vous pouvez faire comme ceci :
if(parseInt(img.style.marginLeft) == -1200)
 
Ou bien :
if(img.style.marginLeft != 0 + "px" )
 
Je précise que testé sous IE 9, Chrome (v. 11.0.696.68), et FF (v. 4.0.1), tout fonctionne !


Message édité par Launster le 18-05-2011 à 12:49:09
n°2076827
rufo
Pas me confondre avec Lycos!
Posté le 18-05-2011 à 14:29:52  profilanswer
 

On utilise des libs justement pour s'éviter ce genre de prise de tête :/...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
mood
Publicité
Posté le 18-05-2011 à 14:29:52  profilanswer
 

n°2076828
Launster
Posté le 18-05-2011 à 14:31:27  profilanswer
 

Je sais bien, c'est juste que j'ai pas encore eu le temps de regarder, mais j'y compte bien d'ici peu !


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [résolu]Problème DHTML, liaison entre js et CSS

 

Sujets relatifs
Problème de compilationProbleme fsolve MATLAB : résolution système de 4 équations
Problème avec menu sous Asp.Net2005erreur de syntaxe, probleme langage C
Problème affichage Visual StudioProblème internet explorer + site web
Problème vectorImportant problème boutons d'executions
Problème avec un alphabeta en C pour othelloProblème de récupération de données
Plus de sujets relatifs à : [résolu]Problème DHTML, liaison entre js et CSS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR