implementation de jquery

Version imprimable

10/07/2012, 15h53
westernz

implementation de jquery

Bonjour,

Si possible sans Jquery auquel je ne comprend rien, déjà essayé, déjà raté.

Le tout lancé depuis une function.
Je veux passer le display d'une div de 'none' à 'inline' de manière progressive.
Puis que la fenêtre se centre sur cette div, progressivement.

Les deux action doivent être séparée car par moment je n'aurai que besoin de l'une sans l'autre.

Auriez-vous quelque chose à me proposer ?

Bonne journée
10/07/2012, 16h07
Darkyl

Salut,

heu, oui, passez par jquery...(en plus, rien de plus simple)

Citation:

$('#nom_div').animate();
avec opacity et left/top

Sinon, en vanilla javascript, tu as essayé de faire un code?
Tu montres?

Bonjour,

Je tente d'installer et utilise jquery.
Je n'arrive à rien.

J'ai téléchargé et installé la dernière version stable 1.7.2 dans le dossier ./js/

J'ai utiliser ce contenu de page dans un fichier test.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>                                                            
 <head>
 <title>Ma première page HTML - jQuery</title>                                        
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">                               
$(document).ready(function(){
   alert("Le JavaScript et jQuery c'est vraiment génial !! ");
 });        
  </script>                                                      
 </head>                                                           
 <body>                                                                  
   <!-- notre code HTML sera ajouté ici -->                               
 </body>                                                                 
 </html>

Que dois-je faire comment test simple selon vous ?

MErci, bonne journée

10/07/2012, 19h28
SpaceFrog

mettre le bon src pour la balise script qui doit charger jquery ...

Code:

src="js/jquery.js"
10/07/2012, 21h18
westernz

Effectivement, Ca sent la saturation de fin de journée.
Merci

J'ai un premier truc qu marche.
Je vais tenter de continuer.

Par contre, le client va devoir down le fichier jquery à chaque page chargée ?

Bonne journée
10/07/2012, 21h56
SpaceFrog

le fichier se met dans le cache et en sera pas téléchargé à chaque page...
11/07/2012, 11h41
Darkyl

Si jamais, pour faire ce que tu voulais faire au dépars de la discussion:
animate - JQUERY

J'ai déjà essayer de faire avec cet exemple (et d'autres) mais d'autres paramètres entre en compte comme certainement l'état de la div avant application d'une action jquery.

Je pense avoir un peu saisie jquery qui semble très simple.

Pour que vous puissiez mieux m'aide voici mes 2 codes principaux nécessitant JQuery. Le problème à traiter et assez simple (autant commencer simple). Je veux éviter l'effet d'apparition soudaine des div lors d'un display:inline.

Il me faut donc un principe d'agrandissement (en hauteur) progressif.
Dois-je au préalable annoncer que mes div sont de 1px de haut ? avec un overflow hidden ?

Mes codes JS actuels :
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 function restore_view(source,num,dest) { // source = event_id // lieu = lieu_id // date : si 1 => affichage des dates pour ce lieu document.getElementById('div_liste').innerHTML = full; insert_lieu(); document.getElementById(source).style.display = 'inline'; if (date==1) { show_date(source,lieu); } } function show_div(i,action) { // i = la div à afficher ou fermer // si action 1 => restore dest = ''; if (document.getElementById(i).style.display == 'none') {result = 'inline';} else {result = 'none';} if (action == 1) {restore_view(i);} document.getElementById(i).style.display = result; }
Merci de tenter de m'aider sur un code perso :)
Je comprend mieux quand c'est un code à moi.
Et pour le moment... rien. Mais je vais ré-essayer à zéro.

Bonne journée

11/07/2012, 14h20
Dabius
Un truc du genre ?
Code:

1 2 3 4 5 function show_div(i) { $(i).animate({height:'toggle'}); }
Le 'toogle' te permet de switcher ton div (en l'animant sur la hauteur) entre visible et invisible.
Et si ton div ne doit pas être visible à l'initialisation de la page tu ajoute du css avec un display : none

Ca ne marche pas :(
Mon alert passe mais rien ne bouge.

Voila mon code (fichier de test ne contenant que le code)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" src="./js/jquery.js"></script>
 
<script type="text/javascript">                               
function show_div(i)
{
    $(i).animate({height:'toggle'});
 	alert('r');
}
</script>                                                      
 
<div id='toto' style='border:solid 1px #aaa;display:none'>
début
<br><br><br><br><br><br><br><br><br>
fin
</div>
 
<a id="monLien" href="javascript:show_div('toto')">Lien</a>

11/07/2012, 16h21
SpaceFrog

id => #

Code:

$('#'+i)
11/07/2012, 17h17
westernz

Ok, ca semble logique. et ca marche.
Merci,

Je poursuit l'aventure :)

J'ai trouvé le problème mais je ne suis pas certain de la solution.

Le contenu général (var full) annonce display:none, au chargement et au restore.

Si je fais une alerte après un toogle ca me dit soit 'non' soit 'inline-block'
Mais je veux tester le display je suis obligé de le faire avec 'none' ou ''
Le inline-block est comme égal à rien.
J'ai testé dans tout les sens et je comprend pas.

Ca marche mais je pense que j'ai un truc qui n'est pas bon.

Code ci-après
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 function show_div(source,lieu,date) { // source : event_id // lieu : lieu_id si date = 1 // date : si date = 1 => affichage de la liste des date pour le lieu // etat actuel de la div source info = ''; info = document.getElementById(source).style.display; if ((info == 'inline') || (info == '')) {info = 'inline-block';} else if (info == 'none') {info = 'none';} // remise à zéro du contenu restore_view(); // la div reprend son affichage inital alert(document.getElementById(source).style.display+' ; '+info); document.getElementById(source).style.display = info; alert(document.getElementById(source).style.display+' ; '+info); // mouvement fermer/ouvrir open_close(source); info = ''; } function restore_view() { document.getElementById('div_liste').innerHTML = full; insert_lieu(); } function open_close(i) { $('#'+i).animate({height:'toggle'}); }
Question supplémentaire :
Je change du texte (noms adresses etc.) en input pour modification.
Que me conseillez-vous de joli pour un changement de contenu d'une div ?
Sachant qu'une fois changé la div est plus grande qu'a l'initial.

12/07/2012, 14h12
westernz

Je site un exemple concret pour mon changement de contenu :

J'ai une div dont je connais la taille via

Code:

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

Elle fait 300px de haut
Quand je clic sur le lien [modifier] le contenu change via un innerHTML.
Le contenu étant plus grand, la div d'agrandie en hauteur.

J'aimerai place un fadeIn ou autre sur proposition de votre part.
Le fadeIn devra s'effectuer sur un innerhtml. Ou function similaire Jquery.

La div devra passer de 300px à xxxpx comme un toogle, mais devra impérativement débuter à 300px.

Je cherche moi même mais débutant sur Jquery, je ne comprend pas encore toutes les formules proposées et ne peut donc pas les adapter.

Merci.
bonne journée
12/07/2012, 17h22
SpaceFrog

.css({"height":"300px"}).animate({"height":"+="+$(this).css('scrollHeight;')})
12/07/2012, 18h08
westernz
merci

Pour commencer je n'y arrive pas comme je veux, je me suis soit mal exprimé, siot planté quelque part.
Je ceux que l'agrandissement doit progressif, pour le moment il est sec.
Code:

1 2 document.getElementById(i+"_info").innerHTML = result; $('#'+i+'_info').css({"height":"200px"}).animate({"height":"+="+$(this).css('scrollHeight;')})
Puis

Mais maintenant je n'arrive pas a attraper la taille de la div pour la lui transmettre. 300 était un exemple. la taille je ne la connais pas à l'avance.

ca me répond undéfined
et si j'essaye en Jquery ca ferme la div (car je ne sais pas trop que je fais).

i = mon N° de div. ma div s'appel donc : 8_info
Code:

1 2 info = document.getElementById(i+'_info').height; alert(info);
Comment récuprer la taille de ma div après un animat { height:toogle ?

Bonne soirée
12/07/2012, 19h10
SpaceFrog

Pour le coté progressif, ajoute un duration à ton div

Code:

$('#'+i+'_info').css({"height":"200px"}).animate({"height":"+="+$(this).css('scrollHeight;')},'slow')

pour recuperer la hauteur

Code:

$('#'+i+'_info').offset().height

Je n'y arrive toujours pas :(
J'ai placé mes bout de code dans une page test pour te montrer.

http://www.an16test.org/test.html
Dans le code on constate que l'alert '1' ne passe pas.

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
 
<script type="text/javascript" src="./js/jquery.js"></script>
 
 
<script>
var info = '';
var truc ='<br /><br /><br /><br /><br /><br /><br /><br />ABSCHEGR';
 
function start(i)
{
    $('#'+i).animate({height:'toggle'});
}
 
function more()
{
	info = $('#'+i).offset().height;
alert('1');
	info = info+'px';
	document.getElementById(i).innerHTML = result;
	$('#'+i+'_info').css({"height":info}).animate({"height":"+="+$(this).css('scrollHeight;')}) 
 
}
 
</script>
 
<div id='8' style='display:none'>
132456
<br /><br /><br /><br /><br /><br /><br /><br />
789123
</div>
 
<a href='javascript:start(8)'>clic</a>
<a href='javascript:more(8)'>agrandir</a>

12/07/2012, 22h45
NoSmoking
Bonsoir,
tu utilises dans la fonction more() un paramètre, i, que tu ne définies pas dans la définition de la fonction
Code:

1 2 3 function more(i){ // manque parametre i ... }

Effectivement erreur idiote.
Elle est corrigé, et les erreur sont toujours là.

Je note un nouveau code de test, j'ai ajouter une function restore()

Sans oublier l'alert 1 qui ne passe pas (en fin de function agrandir.

Merci de votre aide
Codes ci-dessous

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
37
 
<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+'_info').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='8' style='display:none'>"+chose+"</div>");
</script>
 
 
<a href='javascript:start(8)'>Montrer/cacher</a><br />
<a href='javascript:more(8)'>Agrandir</a><br />
<a href='javascript:restore(8)'>Restorer</a><br />
<br /><br />

12/07/2012, 23h31
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:

<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': ''}); }

13/07/2012, 13h12
SpaceFrog

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

14/07/2012, 18h51
SpaceFrog

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))
14/07/2012, 19h57
westernz

En fait c'est bon, il ne me reste plus qu'a comprendre.
Il y avais juste une erreur d'ordre des functions.
14/07/2012, 21h56
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:

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

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()
15/07/2012, 10h56
westernz

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

Je vais travailler dessus.
Merci

Fuseau horaire GMT +2. Il est actuellement 14h52.