implementation de jquery

il me semble que cela a été très souvent répété sur ce forum qu'il est préférable que les ID ne soit pas des chiffres ou ne commence pas par des chiffres.

D'autre part tu passes en paramètre un Number essaies de passer une chaine

Code:

---

<a href="javascript:start('8')">Montrer/cacher</a><br />

---

Changes quand même les ID.

J'ai corrigé cela, ainsi qu'une autre erreur idiote.
Mais ca ne marche toujours pas.

Coté id, c'est assez gênant de ne pas pouvoir utilisé du numérique, surtout quand on est à court de guillemet, ca oblige a créer une var de plus. Pour le moment je n'ai jamais eu de souci avec du numérique. Mais dans le doute, ici je prend de l'alpha en chaine.


Voici mon nouveau code
Bonne soirée
(demain je ne serai pas là, je reprendrai samedi)

http://www.an16test.org/test.html

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<script type="text/javascript" src="./js/jquery.js"></script>     <script> var info = ''; var truc ='start 2<br /><br /><br /><br /><br /><br /><br /><br />middle<br /><br /><br /><br /><br /><br /><br /><br />789<br /><br /><br /><br /><br /><br /><br /><br />end 2'; var chose = 'start<br /><br /><br /><br /><br /><br /><br /><br />end'; function start(i) { $('#'+i).animate({height:'toggle'}); }   function more(i) { info = $('#'+i).offset().height; info = info+'px'; document.getElementById(i).innerHTML = truc; $('#'+i).css({"height":info}).animate({"height":"+="+$(this).css('scrollHeight;')}) alert('1');   }   function restore(i) { document.getElementById(i).style.display = 'none'; document.getElementById(i).innerHTML = chose; }   document.write("<div id='div_8' style='display:none'>"+chose+"</div>"); </script>     <a href="javascript:start('div_8');">Montrer/cacher</a><br /> <a href="javascript:more('div_8');">Agrandir</a><br /> <a href="javascript:restore('div_8');">Restorer</a><br /> <br /><br />

---

Code:

---

<a href="javascript:start('div_8');">

---

pourquoi passer par le href et pas par le click ?
et utiliser jquery quand tu le peux ...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>   <script> var info = ''; var truc ='start 2<br /><br /><br /><br /><br /><br /><br /><br />middle<br /><br /><br /><br /><br /><br /><br /><br />789<br /><br /><br /><br /><br /><br /><br /><br />end 2'; var chose = 'start<br /><br /><br /><br /><br /><br /><br /><br />end';   function start(i) { $('#'+i).animate({height:'toggle'}); }   function more(i) { info = $('#'+i).offset().height; info = info+'px'; $('#'+i).html(truc).css({"height":info}).animate({"height":"+="+$(this).css('scrollHeight')}) alert('1');   }   function restore(i) { $("#"+i).css('display','none') .html(chose); }     $(function(){ $('body').append($("<div/>").attr('id','div_8').css({'display':'none'}).html(chose)) $("a:eq(0)").click(function(e){e.preventDefault(); start('div_8')}) $("a:eq(1)").click(function(e){e.preventDefault(); restore('div_8')}) $("a:eq(2)").click(function(e){e.preventDefault(); more('div_8')}) }) </script>

---

Code:

---

1 2 3 4

<a href="#">Montrer/cacher</a><br /> <a href="#">Agrandir</a><br /> <a href="#">Restorer</a><br /> <br /><br />

---

Citation:

---

Envoyé par SpaceFrog

pourquoi passer par le href et pas par le click ?
et utiliser jquery quand tu le peux ...

---

:ccool:

concernant info = $('#'+i).offset().height;

Citation:

---

Envoyé par jQuery .offset()

.offset() returns an object containing the properties top and left.

---

Pour la fonction more(), je voyais un truc plutôt dans ce style

Code:

---

1 2 3 4 5 6 7

function more( param){ var h, obj = $('#' +param); obj.css({'overflow' : 'hidden', 'height': obj.height()}); obj.html( truc); h = obj.prop('scrollHeight'); obj.animate({'height': h}, function(){ alert('hauteur : ' +h)}); }

---

et pour la fonction restore()

Code:

---

1 2 3 4 5 6

function restore( param){ var obj = $('#' +param); obj.hide(); obj.html( chose); obj.css({'height': ''}); }

---

A vrai dire je n'ai pas pris le temps de vérifier ce que faisaient les fonctions :oops: j'ai juste jQuerysé l'existant ...

Me revoila :)

Et je dois avouer que cette fois-ci ca devient nettement plus compliqué (pour moi). Je comprend pas tout, voir pas grand chose.

J'ai refait le code, je vais le lire plusieurs fois dans la journée pour tenter de mieux le comprendre.

Toutefois ca marche encore moins.
Mais j'ai certainement fait une erreur.

Je vous montre où j'en suis, j'ai juste mis vos codes dans ma pages.

Merci de vous occuper d'un nouveau né dans le monde de Jquery :)
Bonne journée

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<script type="text/javascript" src="./js/jquery.js"></script>     <script> var info = ''; var truc ='start 2<br /><br /><br /><br /><br /><br /><br /><br />middle<br /><br /><br /><br /><br /><br /><br /><br />789<br /><br /><br /><br /><br /><br /><br /><br />end 2'; var chose = 'start<br /><br /><br /><br /><br /><br /><br /><br />end'; function start(i) { $('#'+i).animate({height:'toggle'}); }   function more( param){ var h, obj = $('#' +param); obj.css({'overflow' : 'hidden', 'height': obj.height()}); obj.html( truc); h = obj.prop('scrollHeight'); obj.animate({'height': h}, function(){ alert('hauteur : ' +h)}); }     function restore( param){ var obj = $('#' +param); obj.hide(); obj.html( chose); obj.css({'height': ''}); }   $(function(){ $('body').append($("<div/>").attr('id','div_8').css({'display':'none'}).html(chose)) $("a:eq(0)").click(function(e){e.preventDefault(); start('div_8')}) $("a:eq(1)").click(function(e){e.preventDefault(); restore('div_8')}) $("a:eq(2)").click(function(e){e.preventDefault(); more('div_8')}) })   document.write("<div id='div_8' style='display:none'>"+chose+"</div>"); </script>     <a href="#">Montrer/cacher</a><br /> <a href="#">Agrandir</a><br /> <a href="#">Restorer</a><br /> <br /><br />

---

y'a juste cette ligne qui vient tout pourrir

Code:

---

document.write("<div id='div_8' style='display:none'>"+chose+"</div>");

---

Fais une recherche sur ce forum à propos de document.write

dans mon code le div est créé dynamiquement avec cette ligne

Code:

---

$('body').append($("<div/>").attr('id','div_8').css({'display':'none'}).html(chose))

---

En fait c'est bon, il ne me reste plus qu'a comprendre.
Il y avais juste une erreur d'ordre des functions.

(voir message précédent)

Je commence à comprendre et travail dessus.

eq(0) est un code Jquery pour définir le N° de la function à utilisé, cet ordre est celui de l'écriture initial du script dans la page.
juste ?

Ce code est valide pour tous les lien sur ancres via "a:"

J'ai l'impression que le code dit que le 1er lien sera lié à la première function et ainsi de suite, 2eme -> 2eme function.

avec le code suivant, le problème est que je ne parvient pas à placer la div où je veux :(

Code:

---

$('body').append($("<div/>").attr('id','div_8').css({'display':'none'}).html(chose))

---

Citation:

---

eq(0) est un code Jquery pour définir le N° de la function à utilisé, cet ordre est celui de l'écriture initial du script dans la page.
juste ?

---

non eq(0) sert a sélectionner le premier élément de la collection du selecteur le précédent

Code:

---

$('a')

---

retourne toutes les balises a de la page

Code:

---

$('a:eq(0)')

---

retourne la première balise a de la page

Code:

---

$('a:eq(1)')

---

retourne la seconde balise a de la page

dans l'ordre du flux html ...


Pour ce qui est de positionner ton div, append() insère à l'intérieur et à la fin
de l'element sélectionné

Code:

---

$('body').append(elt)

---

insère donc elt à la fin du body

pour insérer ailleurs jQuery possède des methodes comme before() after()

Merci, je comprend nettement mieux, ... que je comprenais à l'envers.

Je vais travailler dessus.
Merci