Discussion :

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Changes quand même les ID.

[westernz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 />

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<a href="#">Montrer/cacher</a><br />
<a href="#">Agrandir</a><br />
<a href="#">Restorer</a><br />
<br /><br />

[NoSmoking]

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

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

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function restore( param){
  var obj = $('#' +param);
  obj.hide();
  obj.html( chose);
  obj.css({'height': ''});
}

[SpaceFrog]

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

[westernz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 />

[SpaceFrog]

y'a juste cette ligne qui vient tout pourrir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[westernz]

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

[westernz]

(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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('a')

retourne toutes les balises a de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('a:eq(0)')

retourne la première balise a de la page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('body').append(elt)

insère donc elt à la fin du body

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

[westernz]

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

Je vais travailler dessus.
Merci