Gönner-Abo

Ab CHF 5.– im Monat

👉🏼 Wir benötigen deine Unterstützung! Unterstütze macprime mit einem freiwilligen Gönner-Abo und mache die Zukunft unseres unabhängigen Apple-Mediums aus der Schweiz mit möglich.

macprime unterstützen

Javascript/jQuery mit Mouseover-Aktion. Programmierfrage

Profilfoto von Robin

VonAntwort von Robin

Ich habe via JavaScript und jQuery ein “interaktiven” Button auf meine Seite eingebunden. Jener springt hervor, wenn der Cursor der Maus über den Button wandert. Die Lösung für die Umsetzung habe ich hier gefunden: http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/

Für die linke Seite funktioniert die Animation nun sehr gut, jedoch bereitet mir die Umsetzung auf die rechten Seite Kopfschmerzen. Ein Freund hat mir zwar etwas unter die Arme gegriffen und konnte das ganze schon einmal recht platzieren, jedoch zerstört dies in gewisser Form das Layout bez. macht es auf der rechten Seite größer.

Schaut euch am besten mal die Bilder an, um es besser zu verstehen. Achtet dabei vor allem auf die Scrolleiste unten.

Hat jemand eine Idee was ich machen kann? PS: Bitte habt Verständnis das ich derzeit nicht direkt zur Seite verlinken möchte, da sich das Layout noch in Entwicklung befindet und weitestgehend geheim gehalten wird.

Hier noch das JS:

$(function() {
                $('#navigation a').stop().animate({'marginLeft':'-110px'},1000);

                $('#navigationre a').stop().animate({'marginLeft':'110px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},300);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-110px'},300);
                    }
    );

    $('#navigationre > li').hover(
     function () {
      $('a',$(this)).stop().animate({'marginLeft':'2px'},300);
     },
     function () {
      $('a',$(this)).stop().animate({'marginLeft':'110px'},300);
     }
    );
            });

Der Eintrag im HTML:

<div class="prev">
            <ul id="navigation">
                <li><a href="http://index.html"><img src="images/layout/prev.jpg" alt=""  /></a></li>
            </ul>
            </div>

            <div class="next">
            <ul id="navigationre">
                <li><a href="http://index.html"><img src="images/layout/next.jpg" alt=""  /></a></li>
            </ul>
            </div>[/code]

Und das CSS
[code].next {
 /*padding-right:10px;*/
 margin-top:220px;
 float: right;
 width: 150px;
 height: 60px;
 border: 1px solid green;
 /*background: url(../images/layout/next.png) no-repeat;*/
}

.next li {
 list-style-type: none;
}

.prev {
 /*padding-left:10px;*/
 margin-top:220px;
 float: left;
 width: 150px;
 height: 60px;
 /*border: 1px solid blue;*/
 /*background: url(../images/layout/arrow.png) no-repeat;*/
}

.prev li {
 list-style-type: none;
}

(Bearbeitet am 07. November 2011 um 15:42 Uhr von Robin)

Profilfoto von Christian

Christian

Von Robin • Montag, 07. November 2011, 15:40 UhrPS: Bitte habt Verständnis das ich derzeit nicht direkt zur Seite verlinken möchte, da sich das Layout noch in Entwicklung befindet und weitestgehend geheim gehalten wird.

Nein, dafür haben wir kein Verständnis. Sollen wir jetzt tatsächlich all den Code in eine eigene Datei kopieren und selbst eine Testseite erstellen? Welche dann doch nicht deinem Layout entspricht und eventuell den Fehler gar nicht aufweist?

Bei aller Hilfsbereitschaft, das ist doch etwas viel verlangt.

Profilfoto von Robin

Robin

Mir erschließt sich deine Wut gerade nicht so ganz. Ich habe niemanden gebeten den Aufwand zu betreiben eine Seite neu zu programmieren um meine Idee oder Wunsch um zu setzen. Es gibt Leute, die kennen sich mit sowas gut aus und sehen den Fehler sofort anhand des gegeben Codes. Wenn am Ende mehr gebraucht wird, habe ich kein Problem ein Kompromiss ein zu gehen und nach einer Lösung zu suchen.

Wenn dir das gegeben ausreicht, währe eine angemessene Antwort in einer Community gewesen: Sorry aber mit der gegebenen Information kann ich so leider nicht helfen. Kannst du etwas mehr geben?

Des weiteren habe ich auf die Quelle verwiesen. Dort kann man ein Download tätigen der eine programmierte Seite liefert. Dort ist das Menü linkslastig ausgerichtet. Damit kann man sicher besser arbeiten als wenn ich nun meine gesamte Programmierung offen lege.

Deine Haltung darüber hinaus als globale Meinung (wir) zu betiteln, ist sicher nicht passender als du nun meine Frage ersiehst.

Also tief Luft holen und wenn du mir wirklich helfen magst und eine Idee hast, dann sag es mir auch so.

Profilfoto von Christian

Christian

Ich verstehe dein Unverständnis nicht: Auf der Originalseite funktioniert der Code, auf deiner nicht. Also liegt es wahrscheinlich an deinem Layout.

Anstelle der nicht-funktioniellen Codewurst oben, würdest du uns/mir lieber eine rudimentäre Testseite zeigen: Alle möglicherweise störenden Elemente entfernt (Andere Divs, Floats, Umbrüche…), HTML, CSS und JavaScript bereits integriert, das Problem konzentriert auf den einfachsten Fall. Dann könnte dir vielleicht jemand wirklich innert kürzester Zeit helfen. Oder du würdest in diesem Prozess den Fehler sogar selber finden. (Ich hoffe du kennst die Web Developer Tools von Firefox oder die eingebaute Developer Konsole bei Chrome.)

Ich bin nicht wütend, nur zu faul, dir deine Arbeit abzunehmen.

Als weitere Lektüre: http://www.tty1.net/smart-questions_de.html#code

Profilfoto von Robin

Robin

Bei mir funktioniert es ja auch so wie es dort auf der Seite der Quelle zu sehen ist. Meine Frage bezog sich darauf, wie ich die Aktion oder das Event parallel auch auf die rechte Seite bekomme.

Ich habe gestern noch viel rumexperimentiert, jedoch weiterhin keine Lösung gefunden.

Das einzige was ich erreichen konnte war, dass sobald ich im CSS die Maße für die Box via CSS ausgeklammert / entfernt habe, dass dann die Animation auch auf der rechten Seite funktioniert. Sobald ich aber die Maße wieder frei gebe, läuft es nicht mehr korrekt ab. Die Animation beschränkt sich dabei jedoch auch nur auf den grünen Rahmen den ich gelegt habe für meine Orientierung (border…). Die Grafik bleibt dann an selber Stelle liegen.

Ich vermute das irgendwas im JS fehlt als konkrete Anweisung bei den Maßangaben oder das ich im CSS etwas falsch definiert habe mit der Bemessung.

Anmelden um neue Antworten zu verfassen

Allegra Leser! Nur angemeldete Nutzer können bei diesem Beitrag Antworten hinterlassen. Jetzt kostenlos registrieren oder mit bestehendem Benutzerprofil anmelden.