(I was trying to implement jQuery Collision based on http://www.stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery, but perhaps I should go ahead and try to use the first suggestion there, with the bounding box calculations? I have not tried that yet.)
I seem to be getting the error (in Chrome) "undefined is not a function" when trying to use the ".collision()" function that is supplied with jQuery Collision, http://sourceforge.net/projects/jquerycollision/?source=navbar .
I'm not sure what all code to post, so please let me know if more info is needed. Trying to understand all that is going on within jquery-collision.js is way out of my current level of understanding.
jquery-1.8.3.min pastebin(dot)com/tJmM97EQ
jquery-collision pastebin(dot)com/7JS2WNVr
HTML:
<head>
<!--js-collisions-->
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>
<!--js-general-->
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<!--css-->
<link href="css/hover/css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="home">
<div class="container">
<p>Website content here</p>
</div>
<div class="footer">
<!--css-tricks.com/fighting-the-space-between-inline-block-elements/-->
<div class="link" id="portfolio">
</div>
<div class="link" id="hamumu">
</div>
<div class="link" id="beep">
</div>
<div class="link" id="jk">
</div>
<span class="stretch"></span>
</div>
</body>
CSS:
* {
margin: 0;
}
body#home {
background-color: green;
}
html, body {
height: 100%;
}
.container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -125px;
}
.footer{
margin-left: auto;
margin-right: auto;
height: 125px;
width: 70%;
background-color: red;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.link {
position: relative;
width: 40px;
height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
top: -300px;
zoom: 1;
}
.smoke{
position: relative;
top: 20px;
left: -20px;
width: 80px;
height: 80px;
background-color: gray;
}
/*link specs*/
#portfolio {
background-color: yellow;
}
#hamumu {
background-color: pink;
}
#beep {
background-color: orange;
}
#jk {
background-color: purple;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}
#port1 {
position: relative;
top: 0px;
margin-left: auto;
margin-right: auto;
width: 40px;
height: 40px;
background-color: blue;
}
JS:
var links = ["#portfolio", "#hamumu", "#beep", "#jk"];
var linkCollision = null;
$(document).ready(function() {
//if on home page
if ($("body#home").length > 0) {
homePage();
}
});
//home page function
function homePage() {
for (var i=0; i<links.length; i++) {
linkCollision = $(links[i]);
collisionCheck();
$(links[i]).animate({
top: '0'
}, 1000*(Math.random()*(1.5-1)+1), 'easeOutBounce', function(){
});
}
}
function collisionCheck() {
var link = "#portfolio";
var footer = ".footer";
var hits = $(footer).collision(link);
for (var i=0; i<hits.length; i++) {
alert("dld");
}
}
You're overwriting the jquery calling another version of it.
// Here you call jquery
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
// Here you call a jquery plugin that extends the jquery object
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>
<!--js-general-->
// Here you call jquery again, wiping out the existing and extended jquery you had
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
// BOOM, you got a error...
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>