Forums

plipli

The problem is that it's not working.. I just copied the code to my files and its stopped working for some reason. I made the nessesery changes so the HTML document would see where the js is.

The Lavalamp menu in working form is here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

The folder looks like this if it helps.
http://www.upload.ee/image/123698/kaust_src.jpg

And the codes are the following :

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
  <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
  <title>Sinilind | tantsuklubi</title>
  <link rel=\"stylesheet\" type=\"text/css\" href=\"css/stiil.css\" />
  <!--[if lt IE 7]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/ie.css\">
  <![endif]-->
  <!--[if lt IE 6]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"css/ie.css\">
  <![endif]-->
  <script type=\"text/javascript\" src=\".../js/jquery-123min.js\"></script>
  <script type=\"text/javascript\" src=\".../js/jqueryeasingmin.js\"></script>
  <script type=\"text/javascript\" src=\".../js/jquerylavalampmin.js\"></script>
  <script type=\"text/javascript\" src=\".../js/jquerylavalamp.js\"></script>
  <script type=\"text/javascript\">
        $(function() {
            $(\"#1, #2, #3\").lavaLamp({
                fx: \"backout\",
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
  </script>
</head>
<body>
<div id=\"konteiner\">
  <div id=\"p2is\">
    <div id=\"logo\"></div>
    <div id=\"menuu\">
      <ul class=\"lavaLampWithImage\" id=\"1\">
        <li class=\"current\"><a href=\"#\">Avaleht</a></li>
        <li><a href=\"#\">Üldinfo</a></li>
        <li><a href=\"#\">Treeningajad</a></li>
        <li><a href=\"#\">Kroonika</a></li>
        <li><a href=\"#\">Pildigalerii</a></li>
        <li><a href=\"#\">Partneriotsing</a></li>
        <li><a href=\"#\">Viited</a></li>
        <li><a href=\"#\">Kontakt</a></li>
        <li class=\"back\"><div class=\"left\"></div></li>
      </ul>
    </div>
    <div id=\"clear\"></div>
    <div id=\"p2is_2\">
      <div id=\"p2is_2_nupud\">
        <a href=\"#\"><img src=\"pildid/ansambel_gert_nupp.jpg\" class=\"ansambel_gert_nupp\" alt=\"Ansmambel Gert\" /></a>
        <a href=\"#\"><img src=\"pildid/tantsutuur_nupp.jpg\" class=\"tantsutuur_nupp\" alt=\"Tantsutuur\" /></a>
      </div>
    </div>
  <div id=\"sisu\">
      <div id=\"sisu_vasak\">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis fringilla leo tempor elementum. Morbi dui est, bibendum vitae ornare a, facilisis eu quam. Phasellus quis mauris vel massa porta faucibus. In at leo lectus, a auctor magna. Duis quis tortor felis, et mollis nisl. Fusce laoreet libero at elit interdum molestie. Nunc venenatis pharetra justo et ullamcorper. Pellentesque vitae lectus nisi, non interdum leo. Morbi aliquet hendrerit sollicitudin. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam pretium viverra tellus in facilisis.</p>
      </div>
      <div id=\"sisu_parem\">
        <div class=\"umarkast\">
          <div class=\"nurk uv\"></div>
          <div class=\"nurk up\"></div>
          <div class=\"nurk av\"></div>
          <div class=\"nurk ap\"></div>
          <div class=\"umarkastsisu\">
            <p class=\"umarkastsisu_pealkiri\">Teated</p>
            <ul class=\"umarkastsisu_sisu\">
              <li>Lorem ipsum dolom sit amet elit Nulla</li>
              <li>Lorem ipsum dolom sit amet elit Nulla</li>
              <li>Lorem ipsum dolom sit amet elit Nulla</li>
              <li>Lorem ipsum dolom sit amet elit Nulla</li>
              <li>Lorem ipsum dolom sit amet elit Nulla</li>
            </ul>
          </div>
        </div>
      </div>
      <div id=\"clear\"></div>
    </div>
  </div>
  <div id=\"jalus\"></div>
</div>

</body>
</html>

@charset \"utf-8\";
/* 
CSS Dokument 
Koostanud: Henri Jeret

Märkmed:

Punane: #d13b3c
Hall: #e1e1e1
Must(kast): #2f2f2f
Must(taust): #161616
Sinine(kast): #3a87d7
Sinine(menüü): #2a76d8
Hall(menüü): #e9e9e9
*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;

}
body { 
  background: #161616 url('../pildid/bg.jpg') repeat-x;
}
p {
  color: #161616;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 22px;
}

/*
Suuremad elemendid
*/

#konteiner {
  background: url('../pildid/p2is_bg.jpg') no-repeat;
  width: 950px;
  margin: auto;
}
#p2is {
  width: 950px;
}
#p2is_2 {
  width: 950px;
  height: 190px;
}
#sisu {
  width: 950px;
  background: #fff url('../pildid/sisubg.jpg') no-repeat;
}
#clear {
  clear: both;
}

/*
Logo ja menüü
*/

#logo {
  background: url('../pildid/logo.jpg') no-repeat;
  height: 90px; 
  width: 191px;
  margin-left: 40px;
  float: left;
  display: inline;
}
#menuu {
  height: 60px;
  width: 640px;
  margin: 20px 40px 0 20px;
  float: right;
  display: inline;
}
    /* Force the list to flow horizontally */
        .lavaLampWithImage {
            position: relative;
            height: 29px;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url(\"../pildid/lava.gif\") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url(\"../pildid/lava.gif\") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: normal 11px Verdana, Geneva, sans-serif;
                        text-decoration: none;
                        color: #161616;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;   
						display: inline;
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

/*
Teine päis
*/

#p2is_2_nupud {
  float: right;
  width: 306px;
  margin: 5px 0 0 0;
}
img.tantsutuur_nupp {
  margin-top: 4px;
  width: 306px;
  height: 87px;
}
img.ansambel_gert_nupp {
  width: 306px;
  height: 87px;
}

/*
Sisu
*/

#sisu_parem {
  float: right;
}
.umarkast { 
  position: relative; 
  background: #2f2f2f; 
  width: 230px; 
  margin: 30px 40px 30px 0;
}
.nurk { 
  position: absolute; 
  width: 7px; 
  height: 7px; 
  background: url('../pildid/kasti_nurgad_must.jpg') no-repeat; 
  font-size: 0%; 
}
.umarkastsisu { 
  padding: 0 10px 0 10px; 
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.umarkastsisu_pealkiri {
  padding: 15px 0 15px 0;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
ul.umarkastsisu_sisu {
  list-style: none;
  padding-bottom: 15px;
  
}
ul.umarkastsisu_sisu li {
  margin-top: 10px;
  font-family: Tahoma, Geneva, sans-serif;
}
.uv { 
  top: 0; 
  left: 0; 
  background-position: 0 0; 
}
.up { 
  top: 0; 
  right: 0; 
  background-position: -7px 0; 
}
.av { 
  bottom: 0; 
  left: 0; 
  background-position: 0 -7px; 
}
.ap { 
  bottom: 0; 
  right: 0; 
  background-position: -7px -7px; 
}

#sisu_vasak {
  float: left;
  width: 600px;
  margin: 30px 0 30px 40px;
  display: inline;
}
#sisu_vasak p {
  text-align: justify;
}

/*
Jalus
*/

#jalus {
  background: url(../pildid/jalus.jpg);
  height: 56px;
  width: 950px;
}

I have a IE stylesheet too but it doesn't affect the result of the menu. I didn't know what to put in here si I just did inserted the whole package :D

Also the js folder looks like this:
http://www.upload.ee/image/123710/js_src.jpg

I hope someone can help me with this. I'm very new in js so I didn't make any modifications in the js files.

apostrophe

It would be much easier with a link, but it looks to me like the paths to your js files are wrong.
Should look like this:

  <script type=\"text/javascript\" src=\"js/jquery-123min.js\"></script>
  <script type=\"text/javascript\" src=\"js/jqueryeasingmin.js\"></script>
  <script type=\"text/javascript\" src=\"js/jquerylavalampmin.js\"></script>
  <script type=\"text/javascript\" src=\"js/jquerylavalamp.js\"></script>

You should also be using the latest version of jQuery http://jquery.com/

plipli

Well... that was easy :D :D

Dont know why i wanted to put the .../ there...

Thanks a lot :D

treehouse : what would you like to learn today?

Forums

Problem with Lavalamp menu