moo.fx Sidebar

Zitat von kstenqnen

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

Karsten, wenn die AJAX-Listen wirklich effektiv sein sollen, würde ich sie standardmäßig "eingefahren" lassen. Nur so wird ja die Sidebar übersichtlicher.

Als ich eben nachgeschaut hab, hab ich erst mal alles zugeklappt. ;-)

jowra,
danke für den Hinweis!
Das ist mir auch vorhin aufgefallen, als ich mal an einem anderen Rechner nach meiner Seite geschaut habe.

Ich weiss natürlich wieder nicht, wo ich das einstellen kann, das standardmäßig die Punkte eingklappt sind, beim Aufruf der Seite.

Ich wollte tboley schon deswegen anfunken.
Oder hast Du einen Tipp für mich?

Danke und Gruss

Zitat von kstenqnen

jowra,
danke für den Hinweis!
Das ist mir auch vorhin aufgefallen, als ich mal an einem anderen Rechner nach meiner Seite geschaut habe.

Ich weiss natürlich wieder nicht, wo ich das einstellen kann, das standardmäßig die Punkte eingklappt sind, beim Aufruf der Seite.

Ich wollte tboley schon deswegen anfunken.
Oder hast Du einen Tipp für mich?

Danke und Gruss

Ist etwas kniffeliger, aber nicht unmöglich. Für den Header meiner Seite habe ich das umgesetzt, damit der im Ursprungszustand eingeklappt ist.

Übertragen auf die Navigation bei dir müsste es wie folgt klappen (Einstellung in der CSS-Datei):

. naviboxout {
height: 0px;
overflow: hidden;
}

Die Größe des äußeren Elementes wird damit auf den Startwert Null gesetzt. Durch das Umschalten springt sie auf die Größe, die der Inhalt des untergeordneten Elementes vorgibt.

Jau, scheint zu funktioniert. Nochmals vielen Dank!!
Ich dachte erst nicht. Habe dann aber mal alles augeklappt, dann Cache und Cookies gelöscht. Beim neuen Aufruf der Seite war dann alles eingeklappt. Ich denke die Cookies sind im Spiel.

Dann müßte bei den Besuchern beim ersten Besuch ja auch alles eingeklappt sein.

Jetzt muss ich nur in der CSS rumschrauben.
Im Internet Explorer sieht es noch ein bißchen verschoben aus. Da wird einiges ja anders interpretiert.
Habe nur noch keine konktrete Idee. Ein bisschen CSS verstehe ich ja, aber manchmal dauert doch länger

Zitat von kstenqnen

Jau, scheint zu funktioniert. Nochmals vielen Dank!!
Ich dachte erst nicht. Habe dann aber mal alles augeklappt, dann Cache und Cookies gelöscht. Beim neuen Aufruf der Seite war dann alles eingeklappt. Ich denke die Cookies sind im Spiel.

Dann müßte bei den Besuchern beim ersten Besuch ja auch alles eingeklappt sein.

Jetzt muss ich nur in der CSS rumschrauben.
Im Internet Explorer sieht es noch ein bißchen verschoben aus. Da wird einiges ja anders interpretiert.
Habe nur noch keine konktrete Idee. Ein bisschen CSS verstehe ich ja, aber manchmal dauert doch länger

Kleiner CSS-Tipp (und Hack). Der Internet-Explorer lässt sich überlisten. Wenn es an bestimmten Stellen notwendig ist, extra für ihn Angaben zu vergeben, die andere Browser ignorieren, kann man den Unterstrich verwenden:

.meinetolleklasse {
width: 280px;
_width: 270px;
}

Alle Browser setzten die Weite auf 280 Pixel, der IE nimmt die danach folgende Weite von 270 Pixel.

Ja, auch das klappt.
Das kannte ich noch nicht. Ich dachte immer, man müsste damit leben.
Gut, das es nicht so ist.
Den Internet Explorer zu überlisten finde ich ja generell gut. Ich habe ihn bisher dadurch überlistet, das ich den Firefox benutze. :-))

tboley: Ich kann Dir gar nicht genug danken für deine Mühen!

Zitat von tboley

Ist etwas kniffeliger, aber nicht unmöglich. Für den Header meiner Seite habe ich das umgesetzt, damit der im Ursprungszustand eingeklappt ist.

Übertragen auf die Navigation bei dir müsste es wie folgt klappen (Einstellung in der CSS-Datei):

HTML

. naviboxout {
height: 0px;
overflow: hidden;
}

Bei meinem bisherigen Test (eingeklappte Archiv-Liste) nutze ich lediglich die moofx-Library ohne weitere Zusätze. Das Ein und Ausklappen erfolgt dabei mit der moofx-Standardfunktion ".hide()". Mein eigener Teil in JavaScript sieht so aus:

http://jowra.com/journal/wp-con…s/relaxation.js

das ist alles. CSS oder ähnliches brauchte ich dafür nicht. Mit den Buttons sollte es eigentlich ähnlich funktionieren.

Trotzdem klasse was ihr so austüftelt. =)

Zitat von jowra

Bei meinem bisherigen Test (eingeklappte Archiv-Liste) nutze ich lediglich die moofx-Library ohne weitere Zusätze. Das Ein und Ausklappen erfolgt dabei mit der moofx-Standardfunktion ".hide()". Mein eigener Teil in JavaScript sieht so aus:

http://jowra.com/journal/wp-con…s/relaxation.js

das ist alles. CSS oder ähnliches brauchte ich dafür nicht. Mit den Buttons sollte es eigentlich ähnlich funktionieren.

Trotzdem klasse was ihr so austüftelt. =)

Nein, mit den Buttons geht das leider nicht so. Die sollen ja ebenfalls ihre Position behalten. Ohne zusätzliches JavaScript kommt man an der Stelle nicht weiter (wenn dur eine andere Lösungs hast, her damit :-).

Zitat von tboley

Nein, mit den Buttons geht das leider nicht so. Die sollen ja ebenfalls ihre Position behalten.

Schau mal, die betreffende Stelle sieht bei mir momentan so aus:

<h2 onmouseover="archive.toggle()">Archiv [∨]</h2>
<div id="archive">
<ul>
<li><a href='http://jowra.com/journal/2006/04/' title='April 2006'>April 2006</a></li>
<li><a href='http://jowra.com/journal/2006/03/' title='M&auml;rz 2006'>M&auml;rz 2006</a></li>
<li><a href='http://jowra.com/journal/2006/02/' title='Februar 2006'>Februar 2006</a></li>
<li><a href='http://jowra.com/journal/2006/01/' title='Januar 2006'>Januar 2006</a></li>
<li><a href='http://jowra.com/journal/2005/12/' title='Dezember 2005'>Dezember 2005</a></li>


<li><a href='http://jowra.com/journal/2005/11/' title='November 2005'>November 2005</a></li>
<li><a href='http://jowra.com/journal/2005/10/' title='Oktober 2005'>Oktober 2005</a></li>
<li><a href='http://jowra.com/journal/2005/09/' title='September 2005'>September 2005</a></li>
<li><a href='http://jowra.com/journal/2005/08/' title='August 2005'>August 2005</a></li>
<li><a href='http://jowra.com/journal/2005/07/' title='Juli 2005'>Juli 2005</a></li>
<li><a href='http://jowra.com/journal/2005/06/' title='Juni 2005'>Juni 2005</a></li>
<li><a href='http://jowra.com/journal/2005/05/' title='Mai 2005'>Mai 2005</a></li>
<li><a href='http://jowra.com/journal/2005/04/' title='April 2005'>April 2005</a></li>
<li><a href='http://jowra.com/journal/2005/03/' title='M&auml;rz 2005'>M&auml;rz 2005</a></li>
<li><a href='http://jowra.com/journal/2005/02/' title='Februar 2005'>Februar 2005</a></li>
<li><a href='http://jowra.com/journal/2005/01/' title='Januar 2005'>Januar 2005</a></li>
<li><a href='http://jowra.com/journal/2004/12/' title='Dezember 2004'>Dezember 2004</a></li>
</ul>
</div>

Man braucht doch nur aus dem "onmouseover" ein "onclick" zu machen und schon funktioniert das Ganze auf Klick. Genauso würde es auch mit dem Button funktionieren oder selbst mit Blogheader. ;-) Hauptsache es ist die Eigenschaft onclick="archive.toggle()" enthalten.

Das mit den Schaltflächen sind zwei paar Schuhe. Es sollen ja nicht nur die Elemente eingeklappt bzw. ausgeklappt werden, sondern gleichzeitig auch die Buttons selber (schau dir das einfach mal an auf meiner Seite).

Dazu habe ich folgende Klasse geschrieben, die iauf moo.fx aufsetzt:

weblies = Class.create();
weblies.prototype = {
	initialize: function(boxname,switchname,switchimageon,switchimageoff) {
		this.panelbox = boxname;
		this.paneltoogle = new fx.RememberHeight(boxname, {duration: 400});
		this.panelboxswitch =switchname;
		this.panelimageon=switchimageon;
		this.panelimageoff=switchimageoff;
	},
	myswitcher: function () {
		if ($(this.panelboxswitch).alt=='on') 
		{
			$(this.panelboxswitch).setAttribute('src',this.panelimageoff); // position off
			$(this.panelboxswitch).alt='off';
		}
		else {
			$(this.panelboxswitch).setAttribute('src',this.panelimageon); //position on
			$(this.panelboxswitch).alt='on';
		}
		this.paneltoogle.toggle();
	},
	mystartup: function () {
		
		if (this.paneltoogle.el.offsetHeight == 0)
		{
			$(this.panelboxswitch).setAttribute('src',this.panelimageoff); // position off
			$(this.panelboxswitch).alt='off';
		}
		
		else {
			$(this.panelboxswitch).setAttribute('src',this.panelimageon); //position on
			$(this.panelboxswitch).alt='on';
		}
	}
}

Schließlich will ich mit einem Klick zwei Aktionen ausführen ...

Du meinst das sich drehende Dreieck? Ja, dann ist es klar.

Ich weiß noch nicht ob und wie ich es in meinem neuen Theme einbaue (dazu ist es eigentlich schon zu weit weg vom klassischen Bloglayout), aber ich dacht eher an einen Klick auf die Überschrift, auch wenn das weniger intuitiv ist. Hm... mal gucken. ;-)

Zitat von jowra

Du meinst das sich drehende Dreieck? Ja, dann ist es klar.

Ich weiß noch nicht ob und wie ich es in meinem neuen Theme einbaue (dazu ist es eigentlich schon zu weit weg vom klassischen Bloglayout), aber ich dacht eher an einen Klick auf die Überschrift, auch wenn das weniger intuitiv ist. Hm... mal gucken. ;-)

Genau die meinte ich. Weg vom Blog 1.0 zu Web 2.0 halt ;-)

PrivateMiller: Ich mach das manchmal so zu Testzwecken, daß ich die Blogseite mit den Fehlern im Browser als statische Seite abspeichere, die Links aus Scripte und CSS entsprechend ändere und dann in Unterordner auf meiner Domain ablege - so können dann auch Dienste wie http://browsershots.org/ dran, ohne das das meinen Blog beeinträchtigt.

Zitat von PrivateMiller

Naja.. ich habe die Dateien jetzt mal hochgeladen.. denke, dass das "nicht funktionieren" an dem Widget liegt..

Funktioniert doch :-) Wobei: Deine Idee finde ich Klasse. Sie geht über die reine Navigation hinaus. Wäre auch eine gute Möglichkeit, den gesamten Post-Meta Kram auszublenden. Kommentare könnten im Prinzip auch via AJAX geladne werden ....

Ich sehe schon, ich werde mich noch mehr mit moo.fx beschäftigen müssen ;-)

Zitat von PrivateMiller

http://www.greenbtn.com/bunny.jpg

Ähm.. kann es sein, dass wir etwas missverstehen?
Ich wollte die Sidebar mit diesem Effekt ausrüsten, was eindeutig nicht der Fall ist, oder ich übersehe da etwas..?
Meinst du das "simpleSpoiler" PlugIn das ich in den Posts verwende? ;)

Äh ja, das wird es dann wohl gewesen sein. Das Plugin kannte ich noch nicht. Aber das Foto ist genial ;-)

Das mit der Navigation schau ich mir mal im Debugger an - mal sehen, woran es liegt.

Mhm, so wie es aussieht, hats du kein Element in der Sidebar, das angesprochen werden kann durch das JavaScript. Wo sind denn "archivebox" und "archivebutton" bei dir?

Zitat von PrivateMiller

Ich habe das ganze halt in die sidebar.php in meinem Theme reingeschrieben.. habe dann dieses Navigationstoggle in die Css eingefügt und im Header die Scripte angemacht.. nunja.. ich glaube halt, dass das nicht ganz so einfach ist, da ich zum Sortieren der Sidebar das Widget eingestellt habe.. wenn ich das jetzt deaktiviere, wird mir auch der notdürftig schnell gemachte Pfeil angezeigt..

Was sortiert das Widget denn genau in der Sidebar?