jgreep jgreep - 5 months ago 8
jQuery Question

this.call is not a function

For the life of me, I can't see what I'm missing. I had hard-coded the value for selectedIcon in the drawmenu function. It was working perfectly until I changed it to a parameter. I'm getting the following error:


Error: this.call is not a function

Source File:
http://localhost:9090/tests/jquery-1.3.2.min.js

Line: 19


The routine is drawing a menu, while dynamically adjusting spacing between images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
Test image overlay
</title>
<script type="text/javascript" src="jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
//<![CDATA[

function drawmenu (selectedIcon) {

var offset = 0;
for (x in icons) {
// Add the gap at the top of the image
if (selectedIcon-1 == x) {
offset += icons[x].topBig;
$("#"+icons[x].divid).toggleClass("active");
$("#"+icons[x].imgid).toggleClass("rollit");
} else {
offset += icons[x].topSmall;
}

// Set the location of the image
$("#"+icons[x].divid).css("top",-offset);

// Add the gap at the bottom of the image
if (selectedIcon-1 == x) {
offset += icons[x].bottomBig;
} else {
offset += icons[x].bottomSmall;
}
$("#"+icons[x].imgid).attr("src",icons[x].image);
}
}

var icons = [
{
"divid" : 'icon1', // Home
"imgid" : 'imgicon1',
"image" : 'home.png',
"topSmall" : 5,
"topBig" : 5,
"bottomSmall" : 5,
"bottomBig" : 7
},{
"divid" : 'icon2', // Alert
"imgid" : 'imgicon2',
"image" : 'alert.png',
"topSmall" : 7,
"topBig" : 13,
"bottomSmall" : 0,
"bottomBig" : 0
},{
"divid" : 'icon3', // Question
"imgid" : 'imgicon3',
"image" : 'question.png',
"topSmall" : 4,
"topBig" : 8,
"bottomSmall" : 5,
"bottomBig" : 7
},{
"divid" : 'icon4', // Lightbulb
"imgid" : 'imgicon4',
"image" : 'lightbulb.png',
"topSmall" : 3,
"topBig" : 7,
"bottomSmall" : 5,
"bottomBig" : 7
},{
"divid" : 'icon5', // Blog
"imgid" : 'imgicon5',
"image" : 'blog.png',
"topSmall" : 3,
"topBig" : 6,
"bottomSmall" : 1,
"bottomBig" : 4
},{
"divid" : 'icon6', // Defect
"imgid" : 'imgicon6',
"image" : 'defect.png',
"topSmall" : 7,
"topBig" : 10,
"bottomSmall" : 0,
"bottomBig" : 0
}]

$(document).ready(drawmenu(6));
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
#iconstack {
position: absolute;
top:30px;left:100px;
}
.icondiv { z-index:1; position: relative;}

.active { height:80px; }

.rollit {
height:50px;
}

.rollit:hover {
background-image:url('highlight.png');
background-color:red;

}

/*]]>*/
</style>
</head>
<body>
<div id="iconstack">
<div id="icon1" class="icondiv">
<img id="imgicon1" class="rollit" src="" alt="" />
</div>
<div id="icon2" class="icondiv">
<img id="imgicon2" class="rollit" src="" alt="" />
</div>
<div id="icon3" class="icondiv">
<img id="imgicon3" class="rollit" src="" alt="" />
</div>
<div id="icon4" class="icondiv">
<img id="imgicon4" class="rollit" src="" alt="" />
</div>
<div id="icon5" class="icondiv">
<img id="imgicon5" class="rollit" src="" alt="" />
</div>
<div id="icon6" class="icondiv">
<img id="imgicon6" class="rollit" src="" alt="" />
</div>
</div>
</body>
</html>

Answer

It's actually a minor issue. What you were previously doing was this:

$(document).ready(drawmenu);

which passed a function. What you're now doing is this:

$(document).ready(drawmenu(6));

The 2nd way is passing the RESULT of the function instead of the function itself, and is equivalent to:

var item = drawmenu(6);
$(document).ready(item);

Try instead:

$(document).ready(function(){ drawmenu(6); });