moo.fx Sidebar

Welche moo.fx Sidebar meinst Du denn?

Auf der moo.fx-Site findest du eine Doku:

http://moofx.mad4milk.net/documentation/

Im Web gibt`s zudem auch ein paar Tutorials...

kstenqnen: moo.fx ist eine Javascript-Bibliothek: http://moofx.mad4milk.net/

Wo: in die header.php und sidebar.php des Themes.
Wie: steht in der Doku.

Zitat von PrivateMiller

Hi, [COLOR=Red]wo[/COLOR] und wie müsste ich das im Titel erwähnte Script in meine Blogdateien einfügen um einen solchen Kategorien Scrolleffekt zu erzielen?
Ich würde nämlich gerne alles an Sachen in meinem rechten Menü mit diesem Script bearbeiten.

Kann mir da jemand helfen?

Eine zweite Frage, aber unabhängig vom Thema: Ich wollte meine Seiten per Menüzahl ordnen, wie mache ich das in meiner Konfiguration? Denn simples "eine Zeile in der normalen sidebar.php"-Ersetzen bringt keinen Erfolg.

Danke schonmal für die Antworten.

Wenn die Frage noch aktuell ist: Schau mal auf meiner Seite (Link im Profil :-). Das Theme "Web 2 lies" verwendet die von dir beschriebenen Menüs. Ich habe die Klasse dahingehend erweitert, daß sich ein Icon mit einbinen lässt, über das die Menüs ein- bzw. ausgeklappt werden. Installation und Konfiguration ist recht einfach. Das wirklich kniffelige ist die Positionierung via CSS.

Wenn du das Script gebrauchen kannst, sag einfach Bescheid.

Hallo tboley,
also das Script und wie ich es in meine Sidebar bekomme, würde mich auch interessieren.
Danke und Gruss

Als Anlage die JavaScripte und hier die Erklärung dazu:

Den Ordner jss in den Ordner deines Themes packen.

Dann die Sidebar deines Themes anpassen. Ein Ausschnitt aus meiner sidbar.php

<div class="navigationbox-handle"><div><img class="navigationtoogle" id="linksbutton" src="<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png" alt="" onclick="linkswitcher.myswitcher();" /></div><h5>Links</h5></div>
    <div class="navigationboxouter" id="linksbox">
    <ul class="navigationbox" >
    <?php wp_get_links(1);*?>
    </ul>
    </div>

Wichtig ist der das Bild mit dem Pfeil und die ID (die sollte natürlich einmalig sein für jeden Pfeil, der einen Sidebar-Bereich aus- oder einklappt.

Zusätzlich sollte der Bereich, er dann ein- bzw. ausgeklappt wird, sich in einem Container-Element befinden und auch eine eigene ID haben.

Im Ausschnitt oben hat das Bild die ID "linksbutton". Zusätzlich ist ihm das Event onClick zugewiesen worden: onclick="linkswitcher.myswitcher();

Das Cantainer Element, welches verwaltet werden soll, trägt die ID "linksbox".

Als nächstes folgt jetzt die Anpassung der CSS-Datei. Nützlich dabei ist es, den Elementen noch Klassen zusätzlich zu ihrer ID zu zuweisen, da einige Einstellungen für alle Navigationselemente gelten sollen:

.navigationtoogle {
    float: left;
    cursor: pointer;    
    position: relative;
}

Bei der genauen Platzierung der Elemente muss etwas getüftelt werden, bis es passt.

Jetzt kommt der Teil, wo im Header die Skripte aufgerufen und die Navigationsobjekte erzeugt werden:

Dazu in der Datei header.php folgendes nach den Meta-Tags einfügen:

<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/prototype.lite.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/moo.fx.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/moo.fx.pack.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('stylesheet_directory') ?>/jss/devel.js"></script>

Jetzt fehlt nur noch die Instanzierung der Navigationsobjekte, die direkt im Anschluss folgt:

<script type="text/javascript">
var linkswitcher;
var navigationbuttonon = "<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png";
var navigationbuttonoff = "<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_off.png";
window.onload = function() {
    if ($('linksbox')) {
        linkswitcher = new weblies("linksbox", "linksbutton",navigationbuttonon,navigationbuttonoff);
        linkswitcher.mystartup();
}
}
</script>

Edit: Fehlende Klammer im letzten Script-Teil ergänzt.

Zitat von PrivateMiller

Vielen Dank für diesen sehr ausführlichen Post.
Ich werde es sobald mehr Zeit da ist sofort ausprobieren.

Schonmal vielen Dank. :)

Ich hoffe nur, daß ich mich einigermaßen verständlich ausgedrückt habe - wenn nicht, einfach noch mal nachfragen.

Hallo tboley,
vielen Dank für die ausführliche Bechreibung. Aber ich bekomme es noch nicht ans laufen. Vielleicht habe ich was vergessen?
Das hier steht in meiner Sidebar:

<div class="naviunten">
<div class="navibox-handle"><div><img class="navitoogle" id="linksbutton" src="<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png" alt="" onclick="linkswitcher.myswitcher();" /></div><h2>Links</h2></div>
    <div class="naviboxout" id="linksbox">
    <ul class="navibox" >
    <?php wp_get_links(1); ?>
    </ul>
    </div></div>

Zitat von kstenqnen

Hallo tboley,
vielen Dank für die ausführliche Bechreibung. Aber ich bekomme es noch nicht ans laufen. Vielleicht habe ich was vergessen?
Das hier steht in meiner Sidebar:

PHP

<div class="naviunten">
<div class="navibox-handle"><div><img class="navitoogle" id="linksbutton" src="<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png" alt="" onclick="linkswitcher.myswitcher();" /></div><h2>Links</h2></div>
    <div class="naviboxout" id="linksbox">
    <ul class="navibox" >
    <?php wp_get_links(1); ?>
    </ul>
    </div></div>

Ich schau mir das mal gerade an. Irgendwo scheint schon an früher ein JavaScript-Fehler aufzutreten, der die weitere Ausführung anderer JS verhindert.

Ok, scheint so, als ob ich den Fehler gefunden habe:

In der Zeile:

linkswitcher.mystartup(); } </script>

fehlt am Ende die schließende 2. Klammer, also so:

linkswitcher.mystartup(); } }</script>

Ich korigiere das entsprechend in meinem Post weiter oben.

Btw.: Du soltest bei Gelegenheit auch die Validationsfehler angehen:

http://validator.w3.org/check?uri=http…werkstatt.de%2F

Zitat von tboley

Ok, scheint so, als ob ich den Fehler gefunden habe:

In der Zeile:

HTML

linkswitcher.mystartup(); } </script>

fehlt am Ende die schließende 2. Klammer, also so:

Jau, das war es.
Jetzt funktioniert das Aus- und Einklapppen wunderbar!
Jetzt will ich mal im CSS rumfummeln, damit ich es besser positioniert bekomme.

Zitat von tboley

Btw.: Du soltest bei Gelegenheit auch die Validationsfehler angehen:

http://validator.w3.org/check?uri=http…werkstatt.de%2F

Da hast Du recht. Nur ich kann die Fehlermeldungen nicht immer nachvollziehen. Wenn ich in meinen Quelltext schauen, steht genau das drin, was angeprangert wird.
Zudem benutze ich die FF Erweiterung "HTML Validator" und ich achte eigentlich immer darauf, das der kleine grüne Button mit dem Haken unten recht erscheint. Na, schaun wer mal.

Auf jeden Fall nochmal vielen, vielen Dank für das moo.fx Script und die Unterstützung bein Einbau. Das war genau das, was ich immer gesucht habe.

Na, das moo.fx Script ist ja nicht von mir ...

Nur die Einbauanleitung und die zusätzliche Klasse für die Buttons :-)

Ja, aber Du bist einer von denen, der so Sachen versteht und das auch noch anderen vermitteln kann.

Für mich ist das Raketenwissenschaft.

Wenn es so Leute wie Dich und andere hier im Forum nicht gäbe, würde ich meine Seite immer noch mit Tabellen zusammenbasteln. Dabei ist PHP u.a. viel flexibler. Muss mich nur nach und nach rantasten.

Bei mir läuft es jetzt in der Sidebar und habe den Style angepasst bekommen.

Also keine falsche Bescheidenheit.

Btw.: Ich muss mir mal die Rezepte näher ansehen - sieht sehr lecker aus ...

Zitat von PrivateMiller

So hatte grade bisschen Zeit.. ist ja nicht so, dass es grade was wichtiges zu tun gäb..;)

Ich habe ja dieses Widgets PlugIn installiert.. könnte mir das einen Strich durch den Kassenbon machen?
Ich habe in meinem PlugIn jetzt sowas eingefügt:

PHP

<div class="navigationbox-handle"><div><img class="navigationtoogle" id="archivebutton" src="<?php echo get_bloginfo('stylesheet_directory') ?>/images/toogle_on.png" alt="" onclick="linkswitcher.myswitcher();" /></div><h2>Archives</h2></div>
                <div class="navigationboxouter" id="archivebox">
                <ul class="navigationbox" >
                <?php wp_get_archives('type=monthly'); ?>
                </ul>
                </div>

Das toogle_on/off.png habe ich erstellt.. in den Header des Themes die Javascript Launch Zeilen geschrieben.. direkt nach dem letzten meta Tag.. danach habe ich die Instanzierung eingestellt.. gegen Ende der style.css deine Zeilen eigefügt..
Natürlich habe ich die Änderungen die ich an oben gepasteten Code vorgenommen habe, auch in der Instanzierung gemacht.

Funktioniert aber einfach nicht.. hmm :( ..und ja, ich habs hochgeladen.. :p;)

Mhm, auf der unten stehenden Blog ist nix davon zu finden. Wäe hilfreich, das Ganze mal nichtfunktionierend in freier Wildbahn zu sehen, um den Fehler zu finden. Oft gibt sind es Folgefehler ander Scripte, eine vergessene Klamemr (*schau ganz unschuldig*) oder ähnliches.