this.call is not a function
css, javascript, jquery
Solution
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); });
Problem
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> ```