implementation de jquery

**westernz** · 10/07/2012, 15h53

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

**Darkyl** · 10/07/2012, 16h07

Salut,

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

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

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

**westernz** · 10/07/2012, 19h16

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 :

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

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

**SpaceFrog** · 10/07/2012, 19h28

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

Code :

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

src="js/jquery.js"

**westernz** · 10/07/2012, 21h18

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

**SpaceFrog** · 10/07/2012, 21h56

le fichier se met dans le cache et en sera pas téléchargé à chaque page...

**Darkyl** · 11/07/2012, 11h41

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

**westernz** · 11/07/2012, 13h52

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 :

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

**Dabius** · 11/07/2012, 14h20

Un truc du genre ?

Code :

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

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

**westernz** · 11/07/2012, 16h11

Ca ne marche pas

Mon alert passe mais rien ne bouge.

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

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

**SpaceFrog** · 11/07/2012, 16h21

id => #

Code :

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

$('#'+i)

**westernz** · 11/07/2012, 17h17

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

Je poursuit l'aventure

**westernz** · 11/07/2012, 21h10

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 :

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

**westernz** · 12/07/2012, 14h12

Je site un exemple concret pour mon changement de contenu :

J'ai une div dont je connais la taille via

Code :

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

$('#'+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

**SpaceFrog** · 12/07/2012, 17h22

.css({"height":"300px"}).animate({"height":"+="+$(this).css('scrollHeight;')})

**westernz** · 12/07/2012, 18h08

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 :

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

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 :

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

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

**SpaceFrog** · 12/07/2012, 19h10

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

Code :

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

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

pour recuperer la hauteur

Code :

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

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

**westernz** · 12/07/2012, 20h44

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 :

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

**NoSmoking** · 12/07/2012, 22h45

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 :

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

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

**westernz** · 12/07/2012, 23h04

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 :

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

implementation de jquery

jQuery

Discussions similaires

Partager

Partager