Slide-Down-Effekt

**Schrubberx** · 31.12.2011 00:21

Hallo,

Ich habe folgenden Code:

HTML-Code:

<div>
<img src="templates/carligian/images/toggle.png" onClick="javascript:toggleFoot();" onmouseover="this.src='templates/carligian/images/toggle_hover.png';" onmouseout="this.src='templates/carligian/images/toggle.png';">
</div>
<div id="footy" style="display: none;">
Text
</div>

Dieses bindet mein Footer ein, der nach dem Drücken des Buttons (toggle.png) runterfahren soll. Dies ist nun so, dass es von 0 auf 100 abrupt runterfährt. Also einfach ohne Effekt. Dies soll sich änder.

Dazu habe ich im Internet gelesen, dass dies mit mootools gemacht werden kann.
http://lab.erich-holzbauer.at/tut/moo_fx.htm

Hierbei habe ich die beiden .js Dateien geladen & in den js Ordner geschoben. Ebenfalls hab ich diese in der index.php im Header eingebunden.

Mein Problem liegt hierbei:

Code:

window.onload = function()
{
myeffectHeight = new fx.Height('container', {duration: 400, onComplete: function()
{
alert('the effect is completed');
}
});
}

Die Div von mir heißt 'container'. Ebenfalls habe ich dem Button beim onClick

Code:

onclick="myeffectHeight.toggle();"

hinzugefügt.

Jedoch bekomme ich von FF keine Rückgabe. Vom IE aber eine Fehlermeldung, dass er myeffectHeight nicht kennt.

Ich weiß nicht, woran es liegt. Ich habe alles 1:1 eingebunden. Alles müsste gehen.

Falls ihr weitere Informationen braucht, sagt Bescheid.
Hoffe, ihr könnt mir helfen.

Grüße,
Schrubberx

**bembelimen** · 31.12.2011 03:34

Wenn du ein Template oder eine Komponente oder ähnliches baust, solltest du eher die Joomla! eigene Slidingfunktion nutzen. (JHTML::_('sliders.start/end/panel...), da brauchst du kein Javascript können, musst nur nacheinander die Methoden aufrufen.

PHP-Code:


<?php

$params = array();

$params['startTransition'] = true;

$params['startOffset'] = -1;

$params['allowAllClose'] = true;



JHtml::_('sliders.start', 'footer', );

JHtml::_('sliders.panel', 'Überschrift', 'eindeutigeID');

?>

Lorem Ipsum...

<?php

JHtml::_('sliders.end');

?>

Bilder können dann (mit entsprechendem width/height) so geändert werden:

Code:

#footer h3.pane-toggler a { background-image: url('foobar.png'); }
#footer h3.pane-toggler a:hover { background-image: url('hover_foobar.png'); }

Text entfernen:

Code:

#footer h3.pane-toggler span { display: absolute; left: -999em; }

Naja, all die CSS Spielereien halt...

Thema: Slide-Down-Effekt

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Slide-Down-Effekt

Lesezeichen

Lesezeichen

Berechtigungen