jQuery Lavalamp PlugIn Fragen

markus_lanz · 20.07.2011

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 · 20.07.2011

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 · 20.07.2011

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 · 20.07.2011

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 · 20.07.2011

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...

fexx · 20.07.2011

AW: jQuery Lavalamp PlugIn Fragen

lad doch mal eine testseite hoch

markus_lanz · 20.07.2011

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?

fexx · 20.07.2011

AW: jQuery Lavalamp PlugIn Fragen

Willst du ihn wirklich "onClick" animieren?

ansonsten schau mal hier: http://jsfiddle.net/RpWb5/

markus_lanz · 20.07.2011

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"});
            });
        });