Div binnen laten schuiven
Weet iemand hoe je zo'n systeem maakt dat je wel eens op een site ziet, dat er zo'n div'je binnenkomt? (Ik denk dat het een div'je is ten minste?) Ik wil dit maken met een enquete, dat die binnenschuift (het liefst van rechts)?
Gewijzigd op 01/01/1970 01:00:00 door Youri van Weegberg
Daar vind je vast een wel iets mee. Het is namelijk niet echt moelijk. Staan ook genoeg voorbeelden in de documentatie van jquery btw. Daar kun je ook wel wat mee.
Edit
Ik heb nu dit, maar ik krijg het schermpje niet in het midden. Als ik position weghaal, dan staat hij wel in het midden, maar schuift hij alle tekst naar beneden als je hem opent. Kan iemand mij hierbij helpen?
Code (php)
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("div").slideToggle("slow");
});
});
</script>
<style>
div { background:#cfd; margin:3px; width:350px; height:480px;
text-align:center; cursor:pointer;
border:2px outset black; font-weight:bolder;position:absolute;float:center;display:none;align:center;}
</style>
</head>
<body>
<button>Open</button>
<center><div>Hee!</div><center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, nibh non vehicula dapibus, mauris nisi pellentesque tellus, eu consectetur tellus purus vehicula nunc. Nullam suscipit suscipit diam, ac viverra sapien consequat ac. Duis eget turpis vel tortor hendrerit eleifend. Morbi id enim nisi. Donec eget erat mi. Mauris nisl ante, vehicula ac pellentesque vitae, faucibus sed orci. Nunc nibh lectus, congue id aliquet eget, iaculis a massa. Nullam in sem at odio venenatis ultrices. Pellentesque ut tellus nulla, ac congue nisi. Proin in mauris sed mi posuere accumsan suscipit sed arcu. Morbi nec accumsan tortor.
Fusce viverra euismod laoreet. Integer eu purus leo. Donec dapibus, augue vel fringilla congue, sapien risus accumsan dolor, id pulvinar justo mauris eget nulla. Aenean ut suscipit est. Cras consequat viverra tellus ut viverra. Curabitur a odio dolor, sed pretium nunc. Morbi luctus tellus nisi, sed laoreet est. Vestibulum elementum, lorem non consequat sollicitudin, urna nunc faucibus erat, sed lobortis neque felis sed justo. Donec vel lorem sit amet magna feugiat convallis. Etiam leo sapien, aliquam quis luctus ac, ullamcorper ut turpis.
Praesent libero neque, vestibulum nec placerat a, placerat non lorem. Proin sem orci, venenatis ornare tempus ut, rutrum a risus. Donec a faucibus leo. Nulla ac erat ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet varius metus, id auctor nibh mattis non. Sed mattis diam sed orci dapibus id gravida sapien lacinia. Curabitur varius nisl eu massa viverra fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vel libero et tortor mollis scelerisque. Donec est arcu, pretium ac bibendum quis, placerat et sapien. Aliquam arcu mi, pulvinar nec tincidunt et, fringilla nec metus. Aenean eget metus in quam placerat condimentum. Pellentesque congue, ante a porttitor lobortis, erat dolor sodales nunc, lobortis venenatis libero massa a ante. Duis laoreet, dolor in malesuada sagittis, massa magna sollicitudin lacus, quis euismod dui risus id lectus. Praesent placerat, est et eleifend ullamcorper, augue tellus hendrerit odio, nec placerat nulla lacus nec augue. Vestibulum arcu urna, accumsan et molestie eget, porta consequat mi.
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
$("div").slideToggle("slow");
});
});
</script>
<style>
div { background:#cfd; margin:3px; width:350px; height:480px;
text-align:center; cursor:pointer;
border:2px outset black; font-weight:bolder;position:absolute;float:center;display:none;align:center;}
</style>
</head>
<body>
<button>Open</button>
<center><div>Hee!</div><center>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, nibh non vehicula dapibus, mauris nisi pellentesque tellus, eu consectetur tellus purus vehicula nunc. Nullam suscipit suscipit diam, ac viverra sapien consequat ac. Duis eget turpis vel tortor hendrerit eleifend. Morbi id enim nisi. Donec eget erat mi. Mauris nisl ante, vehicula ac pellentesque vitae, faucibus sed orci. Nunc nibh lectus, congue id aliquet eget, iaculis a massa. Nullam in sem at odio venenatis ultrices. Pellentesque ut tellus nulla, ac congue nisi. Proin in mauris sed mi posuere accumsan suscipit sed arcu. Morbi nec accumsan tortor.
Fusce viverra euismod laoreet. Integer eu purus leo. Donec dapibus, augue vel fringilla congue, sapien risus accumsan dolor, id pulvinar justo mauris eget nulla. Aenean ut suscipit est. Cras consequat viverra tellus ut viverra. Curabitur a odio dolor, sed pretium nunc. Morbi luctus tellus nisi, sed laoreet est. Vestibulum elementum, lorem non consequat sollicitudin, urna nunc faucibus erat, sed lobortis neque felis sed justo. Donec vel lorem sit amet magna feugiat convallis. Etiam leo sapien, aliquam quis luctus ac, ullamcorper ut turpis.
Praesent libero neque, vestibulum nec placerat a, placerat non lorem. Proin sem orci, venenatis ornare tempus ut, rutrum a risus. Donec a faucibus leo. Nulla ac erat ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet varius metus, id auctor nibh mattis non. Sed mattis diam sed orci dapibus id gravida sapien lacinia. Curabitur varius nisl eu massa viverra fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut vel libero et tortor mollis scelerisque. Donec est arcu, pretium ac bibendum quis, placerat et sapien. Aliquam arcu mi, pulvinar nec tincidunt et, fringilla nec metus. Aenean eget metus in quam placerat condimentum. Pellentesque congue, ante a porttitor lobortis, erat dolor sodales nunc, lobortis venenatis libero massa a ante. Duis laoreet, dolor in malesuada sagittis, massa magna sollicitudin lacus, quis euismod dui risus id lectus. Praesent placerat, est et eleifend ullamcorper, augue tellus hendrerit odio, nec placerat nulla lacus nec augue. Vestibulum arcu urna, accumsan et molestie eget, porta consequat mi.
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Youri van Weegberg