Menu
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>
313
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); });
Your problem is way down near the bottom with this line.
$(document).ready(drawmenu(6));
What your need is this.
$(document).ready(function() {
drawmenu(6);
});
Basically instead of passing a function to .ready you're passing whatever returns from the drawmenu function.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
