Antworten auf deine Fragen:
Neues Thema erstellen

jQuery Lavalamp PlugIn Fragen

markus_lanz

Noch nicht viel geschrieben

hallo, ich melde mich seit längerer zeit mal wiedern hier.
und zwar bin ich grad dabei ihc in jquery einzuarbeiten. die wichtigsten grundlagen hab ich mir bei w3schools angeeignet. für eine navigation möchte ich nun das lavalampplugin http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ benutzen. auf der seite ist ja auch erklärt wie man es einsetzt. ich habe versucht es nachzubauen aber bei dem schritt
In the markup above, “ul” represents the menu, and each “li” represents a menu-item. At this point it is crucial to understand that we will be adding another artificial “li” to represent the background of the currently highlighted menu-item. Since the background itself is cosmetic and doesn’t represent a menu-item, we will be adding it from javascript. Just to make sure we are in sync, “you need not add this li”, the LavaLamp plugin will take care of it. Once added, the “li” representing the background will look like this.
<li class="back"><div class="left"></div></li> Step 2: The CSS


komme ich nicht mehr zurecht. dieser code kommt auch in der demo gar nicht vor?! kann mir das vielleicht jemand etwas genauer erklären?
in meinem versuch hat es auch nicht funktioniert.

ich wär dankbar :)
 

fexx

Aktives Mitglied

AW: jQuery Lavalamp PlugIn Fragen

- du erstellst eine normale Listennavigation und wendest darauf das Plugin an
- das Plugin erstellt automatisch ein weiteres List-Item, welches nur für den "fahrenden" Hintergrund da ist
 

markus_lanz

Noch nicht viel geschrieben

AW: jQuery Lavalamp PlugIn Fragen

hmm. okey, dann habe ich das verstanden. trotzdem funktioniert es bei mir noch nicht. Mein Code sieht im Prinzip genauso aus, wie der auf der Demoseite. (ich habe die dritte version verwendet)

HTML:
<!DOCTYPE html>
<html>

<head>
    <title>Home</title>

    <meta charset="UTF-8">

    <link href="styles/style.css" type="text/css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans&v2' rel='stylesheet' type='text/css'>

    <script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="scripts/jqueryui.js"></script>
    <script type="text/javascript" src="jquery.easing.min.js"></script>
    <script type="text/javascript" src="jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>
</head>

<body>
            <ul class="lavaLampBottomStyle" id="3">
                <li><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Verweis</a></li>
                <li><a href="#">Sonstiges</a></li>
            </ul>
</body>
</html>


CSS
HTML:
body{
    margin: 0px;
    padding: 0px;
    background-image: url(../images/bg.jpg);
}



.lavaLampBottomStyle {
            position: relative;
            height: 29px;
            width: 421px;
            background-color: white;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
            border: 1px solid gray;
        }
                .lavaLampBottomStyle li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampBottomStyle li.back {
                        border-bottom: 5px solid blue;
                        width: 9px;
                        height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                    .lavaLampBottomStyle li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #000;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;
                    }
                        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
                            border: none;
                        }

findet jemand meinen Fehler? Ich habe ihn noch nicht gefunden...
 

simonpicos

Mod | Forum

AW: jQuery Lavalamp PlugIn Fragen

Kann es evtl sein, dass die Verlinkung deiner Scripts nicht stimmt? Deine anderen zwei jQuery-Plugins sind nämlich in einem anderen Ordner, soweit ich das lesen kann ;)
 

RUDO

٠•●☆●•٠

AW: jQuery Lavalamp PlugIn Fragen

Hallo, was genau funktioniert nicht? - entferne einmal das "return false;" und teste nochmals, somit müssten die Navi-Links nun abrufbar sein...
 

markus_lanz

Noch nicht viel geschrieben

AW: jQuery Lavalamp PlugIn Fragen

Ohoh.. peinlich:rolleyes: simonpicos hatte recht. meine links waren falsch.

ich habe aber nun noch ein anderes Problem, und möchte nicht gleich nen neuen Thread aufmachen.

ich versuche einen button zu animiern. ich möchte ihn um 100 px nach links verschieben. das mache ich so:
HTML:
<button class="bt">Hallo</button>

PHP:
$(".bt").click(function(){
  $(this).animate({marginLeft:"100px"});
  });

Doch es will nicht funktionieren... Wo liegt der Fehler?
 

markus_lanz

Noch nicht viel geschrieben

AW: jQuery Lavalamp PlugIn Fragen

Ja will ich. (Wieso denn nicht?)
Ich poste nochmal, was ich davor in meinem code steht. vielleicht habe ich ja da einen fehler gemachgt. danke euch schonmal für de hilfe

PHP:
<script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="scripts/jqueryui.js"></script>
    <script type="text/javascript" src="scripts/jquery.easing.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.lavalamp.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#navigation").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });

            $(".bt").hover(function(){
                $(this).animate({marginLeft:"100px"});
            });
        });
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.481
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben