Script conteneur corpus spécial

**templari** · 06/04/2011, 18h06

Bonjour, je recherche une ébauche de script pour un conteneur de corpus.

C'est pas très clair ? C'est normal ! Je ne sais pas comment appeler ça !

En fait, je souhaiterai que lorsque j'appuie sur un des boutons de mon menu, le corpus qui se charge ait un effet en javascript.

Effet souhaité :

Une "fenêtre" si j'puis dire, enfin, un contenant quoi (là où sera situé le texte et les images du corpus), qui s'ouvre "depuis le milieu et s'expand (le mot n'est pas français mais on se comprend

) aux 4 extrémités avec un effet de "zoom", qui grossit en l'espace de 0.3 / 0.5 secondes environ. Le tout avec des bordures en état "solid" de 0.5% de couleur bleues, et avec des bords arrondis. Le fond de cette "fenêtre", de ce contenant plutôt, est quant à lui blanc avec un effet d'opacité à 75 ou 80% (mon background étant noir). La largeur et hauteur du "contenant" doit être en %, disons 90% de large et la hauteur environ 60%. Il doit y avoir un ascenseur léger sur la droite, curseur vertical blanc qui s'adapte en fonction du contenu. Le padding est d'environ 3% sur les 4 côtés.

Si vous avez une ébauche de script... ou tout du moins un "nom" ! Pour que je puisse faire quelques recherches, parce-que je ne vois pas vraiment comment appeler cela donc il est difficile de trouver une ébauche de script sur google !

En vous remerciant.

**nadox** · 06/04/2011, 19h51

Bonjour,
Ça ressemble à un LIGHTBOX.

**templari** · 06/04/2011, 21h11

Non. Lightbox c'est un "pop-up" si j'puis dire, avec un bouton "close" ET surtout la fenêtre est affichée en premier plan ce qui fait que l'on ne peut pas cliquer ailleurs sur la page ! Ce que je ne veux absolument pas !

Non en fait, ce que je veux, c'est un corpus avant tout ! C'est juste un corpus qui se génère d'une façon spéciale.

**RomainVALERI** · 06/04/2011, 21h55

Alors plutot une sorte de ToolTip avec un effet graphique à l'ouverture, en somme...

**templari** · 06/04/2011, 22h43

Voilà, c'est ça ! Enfin, c'est plus proche de la réalité quoi

Parce-que sur la démo, le petit carré gris, bon...

C'est quoi tool tip ?

Et sachant donc qu'à l'intérieur il doit y avoir du texte (et des images), scrollable...

Faisable ?

("Les laveurs de carreaux chopent le nouveau-né."

)

**nadox** · 06/04/2011, 23h02

Oui faisable, on peut mettre ce qu'on veut dans la div.

Petit exemple testable en ligne :
http://www.tutorialspoint.com/cgi-bi...riptaculous_42

avec ce code

Code html :

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
 
<html>
<head>
<title>script.aculo.us examples</title>
 
   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects"></script>
   <script type="text/javascript">
 
   function GrowEffect(element){
       new Effect.Grow(element, {duration:3,from:1.0,to:1.0});
   }
 
   </script>
</head>
<body>
<div style="width:500px; height:250px;border:1px solid red;">
<div id="grow_demo" style="display:none; width:500px; height:250px; background:#ccc;">
<div>une div</div>
<div>une autre div</div>
<table><tr><td>un</td></tr><tr><td>tableau</td></tr></table>
<img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>
</div>
<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
</body>
</html>

ça commence un peu plus à ressembler à ce que tu cherche ?

**templari** · 07/04/2011, 01h30

ça commence un peu, oui. mais quand je mets ton code à gauche, ça donne rien comme effet... normal ? mais le premier exemple pré-fourni commence à ressembler un peu à la forme souhaitée certes

on voit que ça charge ces fichiers :

Code html :

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

1
2
3
4
<script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects">

mais je ne les ai évidemment pas donc je ne peux pas retoucher le code !

**nadox** · 07/04/2011, 09h06

Il y a un bouton 'show result' pour rafraichir la partie droite avec le code de gauche.

**RomainVALERI** · 07/04/2011, 09h26

Envoyé par templari

on voit que ça charge ces fichiers :

Code html :

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

1
2
3
4
<script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects">

mais je ne les ai évidemment pas donc je ne peux pas retoucher le code !

Ne me dis pas des choses pareilles

**templari** · 07/04/2011, 12h32

Mille excuses, je ne connaissais vraiment pas ces libraries... autant pour moi.

Je vais donc réessayer tout cela.

Je reviens vers vous.

Merci.

**templari** · 08/04/2011, 10h53

Salut,

alors, j'ai essayé mais malheureusement cela ne marche 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>script.aculo.us examples</title>
   <style type="text/css">
   <script type="text/javascript" src="/javascripts/prototype.js"></script>
   <script type="text/javascript" src="/javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}
 
 
   	</style>
 
   <script type="text/javascript">
 
    function GrowEffect(element)
    {
       new Effect.Grow(element, {duration:3,from:1.0,to:1.0});
    }
 
   </script>
 
</head>
 
<body>
 
<div style="width:500px; height:250px;border:2px solid red;">
<div id="grow_demo" style="display:none; width:500px; height:250px; background:#ccc;">
<div>une div</div>
<div>une autre div</div>
<table><tr><td>un</td></tr><tr><td>tableau</td></tr></table>
<img src="/images/test_image.png" alt="test_image" />
</div>
</div>
<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
 
</body>
 
</html>

Ca ne fais strictement rien (quand on click sur "click me for a demo).

(de plus, je met le background en noir, et il ne veut pas... je ne sais pas pourquoi...)

**nadox** · 08/04/2011, 11h12

C'est un essai en local sur ta machine ? Vérifie donc les chemins des deux scripts...
[edit]
Il y a une balise style non fermée qui traine au dessus des deux script !
[\edit]

**templari** · 08/04/2011, 11h22

J'ai test via MAMP, ça ne fonctionne pas non plus.

Oui, effectivement, ça me donnais un message d'erreur (enfin, 2) car ça ne chargeait pas les .js au bon endroit, j'arrivais pas à modifier ce foutu path, je ne sais pas pourquoi.

Mais j'te dis, là, j'ai re-testé via MAMP (je suis sur Mac) et... y'a y'a plus d'erreur dans le chargement de la page, et cela ne fonctionne toujours pas...

Arrghhhhh....!!!

**nadox** · 08/04/2011, 11h48

Il y a une balise style non fermée qui traine au dessus des deux script !

**nadox** · 08/04/2011, 11h53

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>script.aculo.us examples</title>
   <script type="text/javascript" src="/javascripts/prototype.js"></script>
   <script type="text/javascript" src="/javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}
   	</style>
</head>
 
<body>
 
<div style="width:500px; height:250px;border:2px solid red;">
<div id="grow_demo" style="display:none; width:500px; height:250px; background:#ccc;">
<div>une div</div>
<div>une autre div</div>
<table><tr><td>un</td></tr><tr><td>tableau</td></tr></table>
<img src="/images/test_image.png" alt="test_image" />
</div>
</div>
<ul>
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
</ul>
 
</body>
 
</html>

**templari** · 08/04/2011, 15h43

....j'ai honte^^

Ce sont des choses qui arrivent

De plus, j'avais fait une autre boulette, j'appelais les fichiers avec un / avant.

ex: /javascripts/prototype.js

alors qu'il fallait mettre tout simplement :

javascripts/prototype.js

... ce sont des vieux réflexes de bash^^

Donc ! je viens ENFIN de voir ce que tu as fait, et effectivement, c'est bien ce que je recherche !!!

Je te remercies beaucoup nadox.

Je vais travailler un peu tout cela pour voir comment améliorer la chose, puis je reviens vers toi en cas de souci

Une fois bon, je posterai mon code en entier et validerai ce thread

Merci encore.

A bientôt.

**templari** · 08/04/2011, 18h07

Salut,

alors, tout d'abord merci beaucoup

j'ai modifié un peu le code à ma convenance, mais, ce n'est pas fini, je souhaite donc lui appliqué les styles que j'avais mentionnés au début.

Mais avant cela, souci Numéro 1 :

- L'image (le fond) arrive de droite ! Et pas du centre ! Et alors là... inutile d'essayer de le modifier (j'ai essayé un peu mais, ... non ^^ faut pas

). Donc, si vous avez une idée pour que ça arrive DU CENTRE, ça serait parfait.

Souci Numéro 2 :

- Je ne peux pas modifier le CSS de l'image dans le code ! Etrange non ? Je peux le faire dans la div, mais ce qu'il y a dans la div, je ne peux pas l'enlever et le mettre dans le CSS en haut entre les balises style... Etrange non ? Du coup j'peux faire aucun effet sur cette fenêtre... Etrange.

Je vous renvoie le code modifié à ma convenance, les liens "Démo" et "Reset" et les margin-top/bottom sont ainsi établis de sorte à ce que cela ressemble le + à mon site, en fait. Là c'est très réaliste niveau distance.

A noter que je ne travaille qu'avec des valeur en %, jamais en px (tout du moins le moins possible, car je souhaite que mon sit s'adapte à la dimension/résolution de l'écran du visiteur, qu'il soit sur un 13" ou un 32".

Bien, si vous avez des idées pour le souci N°1 et le souci N°2...

A vous les studios !

Re-voici 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
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
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
   <script type="text/javascript" src="javascripts/prototype.js"></script>
   <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}   	
 
#test_demo
{
	text-align: center;
	margin-bottom: 3%;
	margin-top: 3%;
}
   	</style>
 
   <script type="text/javascript">
 
    function GrowEffect(element)
    {
       new Effect.Grow(element, {duration:3,from:1.0,to:1.0});
    }
 
   </script>
</head>
<body>
<div id="test_demo">
 
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
<br />
</div>
<div id="grow_demo" style="display:none; margin:auto; width:85%; height:70%; background:#ccc;">
</div>
<br />
</body>
</html>

Merci !

**templari** · 08/04/2011, 18h57

Nan, j'essaie, mais, ça veut pas...

Code :

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

1
2
3
4
function GrowEffect(grow_demo)
    {
       new Effect.Grow(grow_demo,{'grow_demo',duration:3,fps:25,direction:center,from:0.0,to:1.0});
    }

C'est pourtant ce qu'indique les paramètres de la fonction ici :

http://scriptaculous.le-developpeur-...ect.Grow().php

**nadox** · 08/04/2011, 20h43

Il y avait une coquille dans mon premier code. La fonction n'était pas utilisée puisqu'on appelait l'effet directement dans le onclick.
il faut modifier le lien comme ça pour utiliser GrowEffect :

Code :

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

1
2
 
<li><a href="#" onclick="GrowEffect(this); return false;">Demo</a></li><br />

EDIT : je suis fatigué je crois : ce code n'est pas bon non plus

**templari** · 08/04/2011, 21h29

Oui nan mais ça ça ne change rien.

C'est cette ligne qui, je suppose, doit être modifiée :

Code :

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

new Effect.Grow(grow_demo,{'grow_demo',duration:3,fps:25,direction:center,from:0.0,to:1.0});

(sinon j'ai modifié la ligne, mais ça n'y change rien)

New 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
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
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
   <script type="text/javascript" src="javascripts/prototype.js"></script>
   <script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>
 
   <style type="text/css">
 
   	body, html 
{
    margin: 0;
	width:100%;
	height:100%;
   	background:#000;
    color:#fff;
    font:0.9em "Trebuchet MS";
}   	
 
#test_demo
{
	text-align: center;
	margin-bottom: 3%;
	margin-top: 3%;
}
   	</style>
 
   <script type="text/javascript">
 
    function GrowEffect(grow_demo)
    {
       new Effect.Grow(grow_demo,{'grow_demo',duration:3,fps:25,direction:center,from:0.0,to:1.0});
    }
 
   </script>
</head>
<body>
<div id="test_demo">
 
  <li><a href="#" onclick="Effect.Grow('grow_demo'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('grow_demo').hide(); return false;">Reset</a></li>
<br />
</div>
<div id="grow_demo" style="display:none; margin:auto; width:85%; height:70%; background:#ccc;">
</div>
<br />
</body>
</html>

Script conteneur corpus spécial

JavaScript

Discussions similaires

Partager

Partager