par
Stef » 18 mars 2010, 08:01
Well, j'ai continué à bosser dessus, et ça donne ça:
<html>
<head>
<title>Effet JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#lediv {
margin: 0;
padding: 5px;
white-space: nowrap;
border: 1px solid black;
overflow: hidden;
}
</style>
<script type="text/javascript">
var x = 0;
var y = 0;
function ccw() {
var mydiva = document.getElementById('lediv');
var rep1 = setTimeout('ccw()', 10);
x += 10;
mydiva.style.width = x + 'px';
if (mydiva.offsetWidth >= 300) {
clearTimeout(rep1);
}
}
function cch() {
var mydivb = document.getElementById('lediv');
var rep2 = setTimeout('cch()', 10);
y += 10;
mydivb.style.height = y + 'px';
if (mydivb.offsetHeight >= 150) {
clearTimeout(rep2);
}
}
function progressif() {
var mydiv = document.getElementById('lediv');
mydiv.style.width = '0px';
mydiv.style.height = '0px';
mydiv.style.display = 'block';
setTimeout('ccw()', 10);
setTimeout('cch()', 10);
}
</script>
</head>
<body>
<a href="#gonoway" onclick="progressif()">Ouvrir</a>
<div id="lediv" style="display: none;">
<p>Contenu div contenu div<br />contenu div Contenu div contenu<br />div contenu divContenu<br />div contenu div contenu div</p>
</div>
<div id="testdem"></div>
</body>
</html>
Ca fontionne comme je le voulais. Enfin presque parce que je voudrais pouvoir déclarer les dimensions du div dans le CSS externe au js, mais je ne le peux pas... Sur le div en display:none offsetWidth retourne 0.
Donc j'ai été obligé de faire comme ça.
Si quelqu'un a des idées pour améliorer ce code en général, et pour apporter en particulier une solution à ma question sur le CSS, je suis preneur! : )
Well, j'ai continué à bosser dessus, et ça donne ça:
[html]
<html>
<head>
<title>Effet JS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#lediv {
margin: 0;
padding: 5px;
white-space: nowrap;
border: 1px solid black;
overflow: hidden;
}
</style>
<script type="text/javascript">
var x = 0;
var y = 0;
function ccw() {
var mydiva = document.getElementById('lediv');
var rep1 = setTimeout('ccw()', 10);
x += 10;
mydiva.style.width = x + 'px';
if (mydiva.offsetWidth >= 300) {
clearTimeout(rep1);
}
}
function cch() {
var mydivb = document.getElementById('lediv');
var rep2 = setTimeout('cch()', 10);
y += 10;
mydivb.style.height = y + 'px';
if (mydivb.offsetHeight >= 150) {
clearTimeout(rep2);
}
}
function progressif() {
var mydiv = document.getElementById('lediv');
mydiv.style.width = '0px';
mydiv.style.height = '0px';
mydiv.style.display = 'block';
setTimeout('ccw()', 10);
setTimeout('cch()', 10);
}
</script>
</head>
<body>
<a href="#gonoway" onclick="progressif()">Ouvrir</a>
<div id="lediv" style="display: none;">
<p>Contenu div contenu div<br />contenu div Contenu div contenu<br />div contenu divContenu<br />div contenu div contenu div</p>
</div>
<div id="testdem"></div>
</body>
</html>
[/html]
Ca fontionne comme je le voulais. Enfin presque parce que je voudrais pouvoir déclarer les dimensions du div dans le CSS externe au js, mais je ne le peux pas... Sur le div en display:none offsetWidth retourne 0.
Donc j'ai été obligé de faire comme ça.
Si quelqu'un a des idées pour améliorer ce code en général, et pour apporter en particulier une solution à ma question sur le CSS, je suis preneur! : )
