B
ByeBye 281348
Guten Abend alle miteinander,
Ich möchte im vorhinein sagen, dass ich die Forumsuche und Googlesuche benutzt habe, aber keine bzw. nur teilweise zufriedenstellende Ergebnisse heraus gekommen sind.
Dass man eine DIV-Box super einfach mit jQuery auf- und zuklappen kann, dass ist mir schon klar, allerdings will ich für mein aktuelles Projekt aufgrund einiger Nachteile von jQuery reines JavaScript verwenden.
Ich möchte eine DIV-Box per Klick auf- und zuklappen lassen. Soweit so gut.
1. Allerdings ist beim auf- und zufahren der Box der Padding von <article> nicht drin. Die Schrift in der <ul> grenzt direkt an der Unterkante des <article>. Kennt jemand eine Lösung, dass der Padding auch beim auf- und zuklappen verhindert, dass die Schrift an die Unterkante grenzt.
2. Ist die Box geöffnet und man macht einen Doppelklick auf die Überschrift, dann flackert/springt die Box kurz und schließt sich dann.
Ist die Box geschlossen und man macht einen Doppelklick auf die Überschrift, dann geht die Box auf, schließt sich aber sofort im nächsten Augenblick wieder ohne lästiges Flackern. Mir geht es primär gar nicht ums Flackern, sondern darum, dass die Box bei einem Doppelklick auf beide Klicks entsprechend reagieren soll: Erster Klick = eine Richtung, zweiter Klick = andere Richtung.
3. Gibt es eine bessere Lösung als CSS-transition, um die Box sliden zu lassen? Also ich ahne schon, aber ich kann sie mit meinem aktuellen Wissen nicht umsetzen.
Ich möchte im vorhinein sagen, dass ich die Forumsuche und Googlesuche benutzt habe, aber keine bzw. nur teilweise zufriedenstellende Ergebnisse heraus gekommen sind.
Dass man eine DIV-Box super einfach mit jQuery auf- und zuklappen kann, dass ist mir schon klar, allerdings will ich für mein aktuelles Projekt aufgrund einiger Nachteile von jQuery reines JavaScript verwenden.
Ich möchte eine DIV-Box per Klick auf- und zuklappen lassen. Soweit so gut.
1. Allerdings ist beim auf- und zufahren der Box der Padding von <article> nicht drin. Die Schrift in der <ul> grenzt direkt an der Unterkante des <article>. Kennt jemand eine Lösung, dass der Padding auch beim auf- und zuklappen verhindert, dass die Schrift an die Unterkante grenzt.
2. Ist die Box geöffnet und man macht einen Doppelklick auf die Überschrift, dann flackert/springt die Box kurz und schließt sich dann.
Ist die Box geschlossen und man macht einen Doppelklick auf die Überschrift, dann geht die Box auf, schließt sich aber sofort im nächsten Augenblick wieder ohne lästiges Flackern. Mir geht es primär gar nicht ums Flackern, sondern darum, dass die Box bei einem Doppelklick auf beide Klicks entsprechend reagieren soll: Erster Klick = eine Richtung, zweiter Klick = andere Richtung.
3. Gibt es eine bessere Lösung als CSS-transition, um die Box sliden zu lassen? Also ich ahne schon, aber ich kann sie mit meinem aktuellen Wissen nicht umsetzen.
HTML:
<body>
<article>
<a href="javascript:toggleBox()"><h2>Ueberschrift</h2></a>
<a href="javascript:toggleBox()"><h3>Ueberschrift Zeile</h3></a>
<div id="js_togglebox_1">
<ul id="js_togglebox_2">
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li>
<li><a href="#">Listenpunkt</a></li></ul></div></article>
</body>
CSS:
<style>
*{
font-weight:300;
margin:0em;
text-align:center;
text-decoration:none;
}
body{
background:#CCC;
}
article{
background:#FFF;
border:1px solid #000;
margin:auto;
overflow-y:hidden;
padding:3em;
width:75%;
}
h2{
color:#C85A46;
font-family:"Quicksand";
font-size:2.5em;
font-weight:700;
}
h2:hover{
color:#E87A66;
}
h3{
color:#5A82C8;
font-size:2em;
}
h3:hover{
color:#404040;
}
div{
line-height:1.5;
}
ul{
padding:1em 0 0 0;
}
li{
list-style:none;
}
</style>
Javascript:
<script>
function toggleBox(step, direction){
if(direction != 1 && direction != -1){/* create variables */
if(document.getElementById("js_togglebox_1").style.visibility == "hidden" || document.getElementById("js_togglebox_1").style.height == "0px"){
direction = 1;/* =positive counter; */
step = 1;
}else{
direction = -1;/* =negative counter; */
step = 10;
}
}
var maxHeight = document.getElementById("js_togglebox_2").offsetHeight;/* works only by box_2-in-box_1 */
var currentHeight = maxHeight*(step*10)/100;
document.getElementById("js_togglebox_1").style.height = currentHeight+"px";/* smooth toggle box_1 */
if((step < 10 && direction == 1) || (step > 0 && direction == -1)){
toggleBoxTimer = setTimeout("toggleBox(" + (step + direction) + "," + direction + ")", 25);
document.getElementById("js_togglebox_1").style.transition = "2s";
document.getElementById("js_togglebox_1").style.visibility = "";
}
if(direction < 0 && step <= 0){
document.getElementById("js_togglebox_1").style.visibility = "hidden";
}
}
</script>