PaddingTop statt PaddingLeft funktioniert nicht [jQ]

[Quabbe]

Hey Leute,

ich habe mir aus verschiedenen Scripten für jQ die hübschesten rausgepickt und irgendwie miteinander verwurschtelt. Bis auf einige kleine Unstimmigkeiten klappte bisher alles prima. Jetzt weiß ich allerdings nicht weiter. Meine Testseite ist diese hier: www.vermittelmich.de

Das Menü am oberen Rand kommt hereingeschwebt wie es soll. Wenn man dann mit der Maus drüber fährt, fahren die einzelnen Links allerdings nach rechts aus. Sie sollen aber nach unten ausfahren.

Der dazugehörige js Code sieht so aus:

$(document).ready(function()
{
	slide("#menu", 25, 15, 150, .9);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creates the target paths
	var list_elements = navigation_id + " li.sliding-element";
	var link_elements = list_elements + " a";
	
	// initiates the timer used for the sliding animation
	var timer = 0;
	
	// creates the slide animation for all list elements 
	$(list_elements).each(function(i)
	{
		// margin left = - ([width of element] + [total vertical padding of element])
		$(this).css("margin-top","-120px");
		// updates timer
		timer = (timer*multiplier + time);
		$(this).animate({ marginTop: "0" }, timer);
		$(this).animate({ marginTop: "15px" }, timer);
		$(this).animate({ marginTop: "0" }, timer);
	});

	// creates the hover-slide effect for all link elements 		
	$(link_elements).each(function(i)
	{
		$(this).hover(
		function()
		{
			$(this).animate({ paddingLeft: pad_out }, 200);
		},		
		function()
		{
			$(this).animate({ paddingLeft: pad_in }, 200);
		});
	});
}

Wenn ich paddingLeft in der unteren Spalte in paddingTop oder paddingBottom ändere, tut sich gar nichts mehr.

HTML sieht so aus:

    <ul id="menu">
        <li value="1" class="sliding-element"><a href="#">Home</a></li>
        <li class="sliding-element"><a href="#">Portfolio</a></li>
        <li class="sliding-element"><a href="#">Contact</a></li>
        <li class="sliding-element"><a href="#">Impressum</a></li>
    </ul>
    <div id="slide"><!-- --></div>

Hat jemand eine Idee, wo der Fehler liegen könnte?

 

[mindraper]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

hi

<a>-elemente sind inline-, keine block-elemente. setz' sie mal auf 'display:block'. dann sollte es auch mit paddingTop klappen.

gruß

 

[Quabbe]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Super, klappt wunderbar! Tausend Dank

 

[Myhar]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Warum machst du so etwas mit JS und nicht mit CSS? Bietest du überhaupt eine Alternative zur JS Lösung an?

 

[Quabbe]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Wie soll das denn mit CSS gehen? Damit sind meines Wissens nach keine Animationen und Effekte möglich. Und wie sähe eine Alternative aus? Kann mir darunter nichts vorstellen. Wenn jemand kein js mag und deaktiviert hat, wird er auch kaum hereinschwebende Buttons und dergleichen zu sehen bekommen.

 

[Myhar]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Das geht mit CSS3 Transitions.
Eine kleine Auswahl was damit möglich ist (alle Demos funktionieren auch ohne JS)
Sliding etc. ist natürlich auch möglich.

Was ich meinte: Bekommt man auf deiner Seite überhaupt ein Untermenü zu sehen, wenn JS deaktiviert ist?

 

[Quabbe]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Aha. Davon habe ich ja noch nie gehört. Dabei brech ich mir in den letzten Tagen einen ab, um meine Seite so gut es geht mit Animationen aufzuhübschen. Alles was ich dabei gefunden habe, waren mootools und jQuery Scripte.

Ich werd mich mal mit diesen Transitions beschäftigen. Die Demo-Seite sieht ja wirklich vielversprechend aus. Also besten Dank für den Tipp!

Zu JS: ich hab grade mal in Chrome, FF und IE nach der Option gesucht, js zu deaktiveren. Konnte sie aber nirgendwo finden. Vor einigen Jahren gab es die Option noch in jedem Browser ... doofer Schlankheitswahn.

Das Akkordeon, auf das Deine Frage vermutlich abzielt (sonst hab ich ja keine Untermenüs), ist aber eh noch Baustelle. Eigentlich sollen die einzelnen Spalten aufswitchen, wenn ich mit der Maus über eines der fünf Symbole drumherum fahre. Leider finde ich keinerlei Infos dazu, wie ich den Auslöser auf einen DIV außerhalb des Akkordeons legen kann. Vielleicht hast Du ja eine Idee...

 

[simonpicos]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Doch, du kannst in jedem modernen Browser js deaktivieren..

 

[Myhar]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Bei Chrome: chrome://settings/content
Bei Firefox: Extras -> Einstellungen -> Tab "Inhalt" -> Js deaktivieren
Ie ist am kompliziertesten (oh Wunder): In den Internetoptionen auf den Reiter Sicherheit wechseln -> Stufe anpassen klicken und dann die Liste durchsuchen, da sollte es irgendwo zu finden sein.
Bei Opera: Einstellungen -> Reiter "Erweitert" -> "Inhalte" -> JS aktivieren/deaktivieren

Bezüglich der Frage: (In Kurzform) Definiere einen eventhandler für deine gewünschten Elemente und rufe dann die benötigten Funktionen auf die du brauchst.

 

[Quabbe]

AW: PaddingTop statt PaddingLeft funktioniert nicht [jQ]

Besser hätten sie es nicht verstecken können. Früher waren die einzelnen Optionen noch vom Browser aus erreichbar. Na wie dem auch sei, das Akkordeon gibt seinen Inhalt wie vermutet noch nicht preis. Und wie es ausschaut, funktioniert von dem js-Zeugs so gut wie gar nichts im IE9.

Aber dafür ist CSS3 der absolute Oberhammer. Nochmal Danke für den Tipp! Damit lässt sich sogar das Akkordeon relativ einfach umsetzen. Also sieht das doch stark danach aus, dass ich über kurz oder lang das js-Gedöhns gegen CSS3 austausche. Mal schauen, ob ich für die Slideshow auch eine hübsche Lösung finde.

Ich bin einfach nur begeistert.