Script conteneur corpus spécial

**nadox** · 08/04/2011, 22h37

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
<!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_id)
    {
var elem = document.getElementById(element_id);
       Effect.Grow(elem,{,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>

**templari** · 09/04/2011, 14h58

Quelqu'un a une idée ... ?

Malheureusement, cela ne fonctionne toujours pas, ça arrive toujours de la droite !!!

(Nadox, je reste perplexe moi aussi, les paramètres de la fonction sont bien là, cela devrait fonctionner, mais... non...

)

**nadox** · 09/04/2011, 17h05

Le

Code :

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

margin:auto;

de la div fausse le positionnement.
Il vaut surement mieux utiliser un conteneur pour positionner l'élément(comme dans mon premier exemple).

**nadox** · 09/04/2011, 17h50

Voilà :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!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="prototype.js"></script>
   <script type="text/javascript" src="scriptaculous/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%;}
#corpus_container{ position: relative; width:85%; height:60%; margin: 0 auto;}
#corpus{ position: absolute; width:100%; height:100%; background:#FFF; border: 3px solid #0AF;}
#corpus_content { margin: 10px; color: #000; }
</style>
 
   <script type="text/javascript">
    function GrowEffect(elem)
    {
        var oElem = document.getElementById(elem) || elem; // permet de passer un id OU une reference directe en parametre
        Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
    }
   </script>
</head>
<body onload="Effect.Grow($('corpus'));">
<div id="test_demo">
  <li><a href="#" onclick="Effect.Grow('corpus'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('corpus').hide(); return false;">Reset</a></li>
</div>
<div id="corpus_container">
    <div id="corpus" style="display:none;">
        <div id="corpus_content">
        <a href="#" onclick="$('corpus').hide(); return false;" style="display: block;float:right;"><img alt="X" src="close.png"/></a>
        <table width="100%">
            <tr>
                <th>entete 1</th>
                <th>entete 2</th>
            </tr>
            <tr>
                <td>colonne 1- ligne 1</td>
                <td>colonne 2- ligne 1</td>
            </tr>
            <tr>
                <td>colonne 1- ligne 2</td>
                <td>colonne 2- ligne 2</td>
            </tr>
        </table>
        </div>
    </div>
</div>
</body>
</html>

Il te reste à adapter le CSS (ne joue pas trop avec les positions et marges si tu ne maîtrise pas bien la chose), et faire en sorte d'utiliser plusieurs contenus...

**templari** · 09/04/2011, 23h15

Miséricorde, ça ne fonctionne toujours pas... ça ne fais rien, rien ne se passe... j'ai essayé sous différents web browser, ça fait rien du tout...

Je t'assures que ça ne fonctionne pas, pourtant t'as vachement retravaillé tout le script là, merci beaucoup (de plus je ne vois aucune erreur dans ton code, il devrait fonctionner...).

Mais test le, ça ne fais rien.

**nadox** · 10/04/2011, 12h53

J'ai modifié le chemin du premier script pour mes tests..

**templari** · 10/04/2011, 16h21

Pourrais-tu être plus explicite ?

Bon là j'ai l'impression d'être un magnifique boulet, certes, mais qu'importe, j'arrive pas à le faire marcher.

Comment ça tu as modifié le chemin du premier script ????

Tu parles de cette ligne ?

Code :

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

        var oElem = document.getElementById(elem) || elem; // permet de passer un id OU une reference directe en parametre

Enfin bref, dans tous les cas, je capte pas...

**nadox** · 11/04/2011, 07h09

Je parle du lien vers prototype.

**templari** · 11/04/2011, 12h16

Ah oui je n'avais pas vu.

Yes ! Ca fonctionne, là t'as géré Nadox ! Je sais pas comment on peut te donner un +1 mais je le ferai bien volontiers ! (ah si j'ai trouvé

c'est fait

).

Par contre, sais-tu pourquoi il y a un "soubresaut" du "contener" vers la fin ? (l fenêtre sursaute un peu sur la fin).

**templari** · 12/04/2011, 14h13

Sauriez-vous comment arrondir les bords de l'ascenseur ? pour ne pas qu'il empiète sur là "border" ?

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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"></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%;
}
 
#corpus_container{ 
	position: relative; 
	width:85%; 
	height:60%; 
	margin: 0 auto;
}
 
#corpus{ 
	position: absolute; 
	width:100%; 
	height:100%; 
	background:#FFF; 
	border: 4px solid;
	border-color: #00CCFF;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	-khtml-border-radius: 13px;
	border-radius: 13px;
	behavior: url("border-radius.htc");	
	overflow: auto;
}
 
#corpus_content { 
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left: 2%;
	margin-right: 2%; 
	color: #000; 
}
 
</style>
 
   <script type="text/javascript">
    function GrowEffect(elem)
    {
        var oElem = document.getElementById(elem) || elem; // permet de passer un id OU une reference directe en parametre
        Effect.Grow(oElem,{duration:0.4,fps:25,direction:center,from:0.0,to:1.0});
    }
   </script>
</head>
<body onload="Effect.Grow($('corpus'));">
<div id="test_demo">
  <li><a href="#" onclick="Effect.Grow('corpus'); return false;">Demo</a></li><br />
  <li><a href="#" onclick="$('corpus').hide(); return false;">Reset</a></li>
</div>
<div id="corpus_container">
    <div id="corpus" style="display:none;">
        <div id="corpus_content">
        <a href="http://www.casimages.com/img.php?i=110412021409181346.jpg" target="_blank" title="upload image"><img src="http://nsa26.casimages.com/img/2011/04/12/mini_110412021409181346.jpg" border="0" alt="Hebergement gratuit d'image et photo"/></a></a>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.</p>         
 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.
			</p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.</p>         
 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet mauris eros. Fusce aliquet molestie nisl, ac vehicula massa mattis vitae. Donec adipiscing arcu tortor, varius porta eros. Nunc quis dolor tortor, eu euismod orci. Proin tincidunt, nunc vel ullamcorper dignissim, justo ligula molestie purus, at pellentesque leo nisl et dui. Integer ut ante faucibus enim gravida hendrerit. Fusce aliquam erat at leo tincidunt volutpat hendrerit sem aliquet. Aliquam erat volutpat. Sed vitae dui elit, id egestas dolor. Curabitur tincidunt vulputate tincidunt.</p>
 
			<p>Integer consectetur magna sit amet urna pellentesque id auctor risus gravida. Ut eu orci nisi, eu dictum lectus. Donec lorem augue, porta malesuada condimentum suscipit, hendrerit ac purus. Proin posuere volutpat est ac sodales. Vestibulum at mauris at lacus cursus euismod. Sed nec odio ipsum. Curabitur lectus risus, feugiat in dapibus id, congue nec sem. Aliquam in felis in turpis consequat adipiscing. Sed elementum egestas interdum. Curabitur ultricies eros nec odio sollicitudin sit amet dignissim magna venenatis. Phasellus molestie consequat ante, a suscipit neque commodo quis. Donec placerat malesuada mauris, sit amet pharetra nunc auctor dapibus. Maecenas ultrices, nisi eu aliquam pharetra, sem diam accumsan nunc, pellentesque tincidunt sapien lacus eu elit. Integer mollis pulvinar sapien non pretium.</p>
 
			<p>Nam varius urna augue. Nulla hendrerit hendrerit massa a lobortis. Quisque sem quam, elementum at tempus vel, porttitor eu justo. In ornare purus eget neque faucibus eu luctus orci semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur tincidunt ultricies tristique. Quisque bibendum rutrum auctor. Aliquam at volutpat velit. Vestibulum nulla sem, lacinia eget adipiscing at, malesuada in ante. Sed est augue, luctus at mattis vitae, laoreet eget nunc. Donec sed condimentum nunc. Sed feugiat condimentum fermentum.
			</p>			
 
        </div>
    </div>
</div>
</body>
</html>

un "z-index" ne suffirait pas ? (en positionnant la "border" toujours en FRONT par rapport à la scrollbar)

Script conteneur corpus spécial

JavaScript

Discussions similaires

Partager

Partager