Background-position animation conflict with other Jquery script
Hi,
I'm an absolutely Jquery Newbie!
I've included in my project website a Jquery Script called LittleBoxes following this online tutorial :
http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery/
It works fine!
the problem is that now I've tried unsuccessfully to add an hover effect to the little boxes with the jquery.bgpos.js, when I use this script alone as in this test webpage : http://www.dirtyballet.com/TESTING/hover.html
the background-image position is correctly animated by the script
When I try this same script in the page where the LittleBoxes script is active, there's something wrong, the background-animation doesn't occurs anymore! There's an abrupt transition with no slide effect at all.
Here's the page where I've got the problem :
http://www.dirtyballet.com/TESTING/index-home.html
It's been hours that I've tried to figure it out without success...
Could somebody help me to achieve those two effects simultaneously or tell me what's wrong?
Here's the code :
- <!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dirty Ballet 2011 Official Website - Dance Event of The Year - Finest Belgian Dance Meeting & Workshops</title>
<META NAME="description" CONTENT="Dirty Ballet is the Dance Event of The Year in Belgium, the finest Belgian Dance Meeting & Workshops. Dirty Ballet Awards Ceremony will take place on the 1st of May 2011 in the Cirque Royal, Brussels">
<META NAME="keywords" CONTENT="Dirty Ballet, Ballet, Dance Event, Belgian Dance, Cirque Royal, Dance Meeting, Dance Workshop, Dance Schools">
<link rel="stylesheet" type="text/css" href="css/normal.css"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="Scripts/reveal/reveal.css">
<script type="text/javascript" src="Scripts/reveal/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Scripts/reveal/jquery.reveal.js"></script>
<script type="text/javascript" src="Scripts/jquery.bgpos.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-764092-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
$(document).ready(function(){
// Menu
$('#test').css({backgroundPosition: '0px 0px'}).hover(function() {
$(this).stop().animate({backgroundPosition:"0px -81px"}, {duration:1500});
},function() {
$(this).stop().animate({backgroundPosition :"0px 0px"}, {duration:1500});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="frame-top"><img src="images/frame-top.png" alt="dirty ballet" width="1024" height="40" /></div>
<div id="frame-bottom"><img src="images/frame-bottom.png" alt="dirty ballet" width="1024" height="40" /></div>
<div id="littleBoxes" class="littleBoxes">
<div class="boxlink bg1" style="top:0px;left:0px;">
<a id="test" href="#">PHOTOS/VIDEOS</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg2" style="top:0px;left:146px;">
<a href="">WINNERS</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg3" style="top:0px;left:292px;">
<a href="">WORKSHOPS</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg4" style="top:81px;left:0px;">
<a href="">TICKETTING</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg5" style="top:81px;left:146px;">
<a href="">TRAILER</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg6" style="top:81px;left:292px;">
<a href="">PARTY</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg7" style="top:162px;left:0px;">
<a href="">UAC</a>
<div class="boxcontent">
<p>Urban Art Creation a pour objectif :<br /><br />
<ol>
<li>Faire découvrir la danse sous toutes ses formes à un public le plus varié possible.</li>
<li>Dynamiser la danse en Belgique.</li>
<li>Assurer un suivi et un soutien aux participants de notre évènement et plus particulièrement au lauréat en leur proposant des stages pour les faire connaître.</li>
<li>Encourager la pratique de la danse et transmettre ses valeurs fortes aux jeunes générations.</li>
<li>Assurer la formation la plus moderne possible de nos jeunes danseurs semi ou professionnels.</li>
<li>Favoriser l'échange : de la danse de rue au ballet, du tango au classique et mélanger les styles, les horizons et les milieux sociaux.
</li>
<li>Renforcer la cohésion et l'émancipation sociale.
</li>
</ol>
</p>
</div>
</div>
<div class="boxlink bg8" style="top:162px;left:146px;">
<a href="">FASHION</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="boxlink bg9" style="top:162px;left:292px;z-index:999px;">
<a href="">BIG UP!</a>
<div class="boxcontent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<a href="#" data-reveal-id="myModal" class="subscribe-btn"><span class="hide">Subscribe Now!</span></a>
<div id="myModal" class="reveal-modal">
<img src="images/logo-db-reducedsize.png" alt="logo dirty ballet" width="259" height="221" />
<img src="images/downloadhere-txt.png" alt="logo dirty ballet" width="211" height="135" />
<div id="download-section">
<p><img src="images/choose-your-language.png" alt="Choose your language" width="253" height="89" /></p>
<a href="pdf/DirtyBallet-Dossier-FR-2011.pdf" title="Download Franç" class="subscribe-btn-left"><span class="hide">Français</span></a> <a href="pdf/DirtyBallet-Dossier-NL-2011.pdf" title="Download Nederlands" class="subscribe-btn-right"><span class="hide">Nederlands</span></a>
</div>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal2" class="reveal-modal2">
</div>
<div id="footer">
<a href="http://www.facebook.com/#!/profile.php?id=1576077307" class="fb" title="Facebook Dirty Ballet"><span class="hide">Join us on Facebook</span></a>
<a href="http://twitter.com/#!/dirtyballet" class="twitter" title="Twitter Dirty Ballet"><span class="hide">Follow us on Twitter</span></a>
<a href="mailto:dirtyballetawards@gmail.com?subject= Dirty Ballet Info :" class="mail" title="Email Dirty Ballet"><span class="hide">Send us an email</span></a>
<p id="copyright">© Copyright Dirty Ballet 2005-2011 - Website designed and powered by <a href="http://www.web-4u.be" title="web-4u">Web-4U</a> and <a href="http://www.fealcreation.com" title="Fealcreation">Fealcreation</a></p>
<br style="clear:both;" />
</div>
</div>
</div><!-- fin Div Wrapper -->
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/* object to save the initial positions of each box */
var divinfo = {"initial": []};
/* index of the selected / clicked box */
var current = -1;
/* we save the index,top and left of each one of the boxes */
$('#littleBoxes > div').each(function(){
var $this = $(this);
var initial = {
'index' : $this.index(),
'top' : $this.css('top'),
'left' : $this.css('left'),
'z-index' : $this.css('z-index')
};
divinfo.initial.push(initial);
});
// Vertical
/* clcik event for the anchors inside of the boxes */
$('#littleBoxes a').bind('click',function(e){
var $this = $(this);
var $currentBox = $this.parent();
/* set a z-index lower than all the other boxes,
to see the other boxes animation on the top*/
$currentBox.css('z-index','1');
/* $('.reveal-modal-bg2').css('z-index','0');
$('.reveal-modal-bg2').css('background','rgba(0,0,0,.8)');
*/ $('#frame-bottom').css('z-index','0');
$('#frame-top').css('z-index','0');
/* if we are clicking on a expanded box : */
if(current == $currentBox.index()){
/* put it back (decrease width,height, and set the top and left like it was before).
the previous positions are saved in the divinfo obj*/
$currentBox.stop().animate({
'top' : divinfo.initial[$currentBox.index()].top,
'left' : divinfo.initial[$currentBox.index()].left,
'width' : '146px',
'height' : '81px'
},800,'easeOutBack').find('.boxcontent').fadeOut();
/* $('.reveal-modal-bg2').css('z-index','0');
$('.reveal-modal-bg2').css('background','rgba(0,0,0,0)');
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
var elemTop = divinfo.initial[$ele.index()].top;
var elemLeft = divinfo.initial[$ele.index()].left;
/* var elemZindex = divinfo.initial[$ele.index()].z-index;
*/ $ele.stop().show().animate({
'top' : elemTop,
'left' : elemLeft,
/* 'z-index' : elemZindex,
*/ 'opacity' : 1
},800);
});
$('#frame-bottom').css('z-index','1999');
$('#frame-top').css('z-index','1999');
current = -1;
}
/* if we are clicking on a small box : */
else{
/* randomly animate all the other boxes.
Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.
This range is considering the initial lefts/tops of the elements. It's not the exact right
range, since we would have to calculate the range based on each one of the boxes. Anyway, it
fits our needs...
*/
$('#littleBoxes > div').not($currentBox).each(function(){
var $ele = $(this);
$ele.stop().animate({
'top' : (Math.floor(Math.random()*601) - 150) +'px',
'left': (Math.floor(Math.random()*601) - 150) +'px',
/* 'z-index' : 999,
*/ 'opacity':0
},800,function(){
$(this).hide();
});
});
/* expand the clicked one. Also, fadeIn the content (boxcontent)
if you want it to fill the space of the littleBoxes container,
then these are the right values */
var newwidth = 679;
var newheight = 479;
var newZindex = 999;
$currentBox.stop().animate({
'top' : '-100px',
'left' : '-120px',
'z-index' : newZindex,
'width' : newwidth +'px',
'height': newheight+'px'
},800,'easeOutBack',function(){
current = $currentBox.index();
$(this).find('.boxcontent').fadeIn();
});
}
e.preventDefault();
});
});
</script>
</body>
</html>
Thanks in advance,
David