implementation de jquery

Version imprimable

Voir 40 message(s) de cette discussion en une page

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?

implementation de jquery

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

Voir 40 message(s) de cette discussion en une page