Microsoft JScript runtime error: Object doesn't support property or method 'lavaLamp'

Question

0.00/5 (No votes)

See more:

This is my web form

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MenuExample.WebForm1" %>

<!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 runat="server">
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="~/Scripts/jquery-1.2.3.min.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">
        $(function () {
            $("#1, #2, #3").lavaLamp({
                fx: "backout",
                speed: 700,
                click: function (event, menuItem) {
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h3>With Image</h3>
<ul class="lavaLampWithImage" id="1">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>



<h3>No Image</h3>
<ul class="lavaLampNoImage" id="2">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>



<h3>Bottom Style</h3>
<ul class="lavaLampBottomStyle" id="3">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

    </div>
    </form>
</body>
</html>

CSS file

CSS

.lavaLampWithImage {
    position: relative;
    height: 29px;
    width: 421px;
    background: url("bg.gif") no-repeat top;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
}
        .lavaLampWithImage li {
            float: left;
            list-style: none;
        }
            .lavaLampWithImage li.back {
                background: url("lava.gif") no-repeat right -30px;
                width: 9px; height: 30px;
                z-index: 8;
                position: absolute;
            }
                .lavaLampWithImage li.back .left {
                    background: url("lava.gif") no-repeat top left;
                    height: 30px;
                    margin-right: 9px; /* 7px is the width of the rounded shape */
                }
            .lavaLampWithImage li a {
                font: bold 14px arial;
                text-decoration: none;
                color: #fff;
                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;
            }
                .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                    border: none;
                }

.lavaLampNoImage {
    position: relative;
    height: 29px;
    width: 421px;
    background-color: white;
    padding: 15px;
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid gray;
}
        .lavaLampNoImage li {
            float: left;
            list-style: none;
        }
            .lavaLampNoImage li.back {
                border: 1px solid #000;
                background-color: #e6e8ea;
                width: 9px;
                height: 30px;
                z-index: 8;
                position: absolute;
            }
            .lavaLampNoImage 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;
            }
                .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
                    border: none;
                }

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

Posted 29-May-12 23:39pm

Member 8932104

Updated 30-May-12 0:35am

v2

Add a Solution

Comments

Dylan Morley 30-May-12 7:02am

OK that looks correct. Are you *positive* that the scripts are being found correctly, the error you have mentioned suggests that it's not finding it. Use Firebug to see if you're getting any 404 errors for the .js files, I think you are.

It could be the way you are using the Tilde character (~) to resolve your js files. Have a look at this thread to see why it could be causing an issue.
http://forums.asp.net/t/1152842.aspx

Dylan Morley 30-May-12 7:25am

Update your scripts like so...

<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery.lavalamp.min.js") %>"></script>

That's probably why you got the original error about the $ character, and why it was fixed by referencing the google CDN. If you update all your scripts like above, you can remove the google script reference (otherwise you will be referencing jQuery twice)

Dylan Morley 30-May-12 7:32am

Update your scripts like I said

<script type="text/javascript" src="<%# ResolveUrl("~/Scripts/jquery.lavalamp.min.js") %>"></script>

Dylan Morley 30-May-12 7:48am

1) Look in the source of your page in the browser (right click - view source, or whatever web debugger you are using). The <script> references should be rendering out correctly in your page. Confirm this is the right location

2) Are the scripts you are referencing definitely in the /Scripts Directory?

3) Use a debugger, such as Firebug. If you don't have it installed, it's an invaluable tool. It the 'Net' tab, look for 404 errors (it can't find the scripts you are referencing)

Member 8932104 30-May-12 8:26am

it don't find bg.gif which is use for first demo and it's css file.what u think i should be proceed more

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dylan Morley · Answer 1 · 2012-05-29T23:51:00

Solution 1

In your page, add a reference to jquery - $ is shorthand for jQuery. You can reference directly from googles CDN

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Make sure this is referenced *before* any code that tries to use the $ symbol

Posted 29-May-12 23:51pm

Dylan Morley

Comments

Member 8932104 30-May-12 6:16am

i tried but now give me new error
Microsoft JScript runtime error: Object doesn't support property or method 'lavaLamp'

Dylan Morley 30-May-12 6:20am

So you probably haven't included references to the lavalamp file? Look at step 3

Step 3: The Javascript
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>

<script type="text/javascript" src="path/to/jquery.easing.js"></script>

Obviously, replace "path/to/" with the path where you have put the javascript files

If this doesn't solve it - use the 'improve question' link and edit your original question, post your HTML to show us your script \ css includes

Microsoft JScript runtime error: Object doesn't support property or method 'lavaLamp'

1 solution

Solution 1

Add your solution here

Preview 0

Microsoft JScript runtime error: Object doesn't support property or method 'lavaLamp'

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us