http://www.redaxo.de/165-Moduldetails.h ... ule_id=183
mootools kann man hier (http://moofx.mad4milk.net/mootools.js) downloaden - man braucht nur eine Datei nicht wie bei moo.fx, wo es 3 JS Dateien waren.
Hier gibts ist das Modul im Einsatz (ohne template, ganz clean nur zum Test) http://pixelworks.info/index.php?article_id=81
1. Man nehme "mootools.js" und lade es hoch, dann binde man es im <head></head> seiner Seite ein, mit diesem
Code: Alles auswählen
<?php
$eingang = $_SERVER['HTTP_USER_AGENT'];
if (strpos($eingang, "Mozilla/5.0")) {
$script = 'ne';
}
if (strpos($eingang, "Mozilla/4")) {
$script = 'ne';
}
if (strpos($eingang, "Mozilla/3")) {
$script = 'ne';
}
if (strpos($eingang, "Firefox") || strpos($HTTP_USER_AGENT, "Firebird")) {
$script = 'mootools';
}
if (strpos($eingang, "MSIE")) {
$script = 'mootools';
}
if (strpos($eingang, "Netscape")) {
$script = 'ne';
}
if (strpos($eingang, "Camino")) {
$script = 'mootools';
}
if (strpos($eingang, "Galeon")) {
$script = 'mootools';
}
if (strpos($eingang, "Konqueror")) {
$script = 'mootools';
}
if (strpos($eingang, "Safari")) {
$script = 'mootools';
}
if (strpos($eingang, "OmniWeb")) {
$script = 'mootools';
}
if (strpos($eingang, "Opera")) {
$script = 'mootools';
}
echo '<script type="text/javascript" src="meinverzeichnis/' . $script . '.js"></script>';
// echo '<link rel="stylesheet" type="text/css" href="meinverzeichnis/' . $script . '.css" media="screen" />';
?>2. Man nehme noch einen sehr wichtigen JS Code und binde ihn unterhalb des <div id="content"> </div> Containers (in welchem der Content herein kommt, also auch die Layer, auf welche der moof-Effekt angewendet werden soll) ein und passe diese seinen Bedürfnissen an. Hier der JS
Code: Alles auswählen
<script type="text/javascript">
var stretchers = $$('div.accordion');
stretchers.each(function(item){
item.setStyles({'height': '0', 'overflow': 'hidden'});
});
window.onload = function(){ //safari cannot get style if window isnt fully loaded
var togglers = $$('h3.toggler');
var bgFx = [];
togglers.each(function(toggler, i){
toggler.defaultColor = toggler.getStyle('background-color');
//fx creation
bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
});
var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,
onActive: function(toggler, i){
bgFx[i].toColor('#e0542f');
toggler.getFirst().setStyle('color', '#fff');
},
onBackground: function(toggler, i){
bgFx[i].clearTimer();
toggler.setStyle('background-color', toggler.defaultColor);
toggler.getFirst().setStyle('color', '#222');
}
});
//anchors
function checkHash(){
var found = false;
$$('h3.toggler a').each(function(link, i){
if (window.location.hash.test(link.hash)){
myAccordion.showThisHideOpen(i);
found = true;
}
});
return found;
}
if (!checkHash()) myAccordion.showThisHideOpen(0);
//ball!
var ball = $E('#header h1');
var ballStyles = new Fx.Styles(ball, {duration: 800, transition: Fx.Transitions.elasticOut});
new Drag.Move(ball, {
onComplete: function(){
ballStyles.custom({'top': [this.element.getStyle('top').toInt(), 13], 'left': [this.element.getStyle('left').toInt(), 358]});
}
});
};
try {
Window.disableImageCache();
}catch(e){}
</script>Code: Alles auswählen
<style type="text/css" media="screen">
html, body {
height: 100%;
}
body {
font: 11px/1.6 Arial, sans-serif;
color: #000;
overflow: -moz-scrollbars-vertical;
}
body, h1, h3, p {
padding: 0;
margin: 0;
}
a:link, a:visited {
color: #000;
font-weight: bold;
outline: none;
}
a:hover, a:active {
color: #666;
}
#content, #ads {
width: 361px;
padding-left: 41px;
}
h3 {
padding: 4px 10px;
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
color: #222;
background: #98bc48;
cursor: pointer;
}
h3 a:link, h3 a:visited {
font-weight: normal;
letter-spacing: 2px;
display: block;
text-decoration: none;
color: #000;
}
h3 a:hover, h3 a:active {
color: #000;
}
p {
padding: 5px 10px;
color: #000;
background: #fff;
}
/*#ads h3 {
background-color: #eee;
}
#ads h3 a {
text-decoration: none;
color: #5275b4;
}
div.ads {
width: 370px;
padding: 10px;
}*/
</style>lg
Joachim
*autsch*
kann mir jemand helfen?
