Grüß Gott!
Ich habe eine Frage zu mootools und diesem Fx.Slide-Effekt.
http://demos.mootools.net/Fx.Slide
Gibt es eine Möglichkeit, dass der Effekt das, was darunter liegt, überlabbt? Ich meine das so: Wenn ich jetzt "toggle" anklicke, geht "wandert" ja die Anzeige mit horizontal etc. einige Pixel nach unten. Bei meiner "Wunschvorstellung" sollte davon nichts mehr zu sehen sein, weil das darüber liegt. Das ist aber auch blöd zu erklären :-)
In der Hoffnung, dass mich jemand verstanden hat: Vielen Dank!
LG
CSS:
h3.section {
margin-top: 1em;
}
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
}
div.marginbottom {
/* Since the Fx.Slide element resets margins, we set a margin on the above element */
margin-bottom: 10px;
}
window.addEvent('domready', function() {
var status = {
'true': 'open',
'false': 'close'
};
//-vertical
var myVerticalSlide = new Fx.Slide('vertical_slide');
$('v_slidein').addEvent('click', function(e){
e.stop();
myVerticalSlide.slideIn();
});
$('v_slideout').addEvent('click', function(e){
e.stop();
myVerticalSlide.slideOut();
});
$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});
$('v_hide').addEvent('click', function(e){
e.stop();
myVerticalSlide.hide();
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
$('v_show').addEvent('click', function(e){
e.stop();
myVerticalSlide.show();
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
// When Vertical Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
//--horizontal
var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'});
$('h_slidein').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideIn();
});
$('h_slideout').addEvent('click', function(e){
e.stop();
myHorizontalSlide.slideOut();
});
$('h_toggle').addEvent('click', function(e){
e.stop();
myHorizontalSlide.toggle();
});
$('h_hide').addEvent('click', function(e){
e.stop();
myHorizontalSlide.hide();
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
$('h_show').addEvent('click', function(e){
e.stop();
myHorizontalSlide.show();
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
// When Horizontal Slide ends its transition, we check for its status
// note that complete will not affect 'hide' and 'show' methods
myHorizontalSlide.addEvent('complete', function() {
$('horizontal_status').set('html', status[myHorizontalSlide.open]);
});
});