moving balloons jquery problem

Question

Hi, I really want to get into jQuery first of all.

I have a site im making, ove a balloon is clicked on it floats up and then goes to the targeted page. However they seem to bash into each other.

<script type="text/javascript">
$(document).ready(function(){
    $("a.balloon-nav").click(function(event){
     var target = $(this).attr("href");
     var zIndex = $(this).css("z-index");
     $(this).attr("href", "#").css("z-index", "100");
     $(this).animate({ top: "-500px" }, 1000, function() {
        $(this).css("z-index", zIndex);
        window.location=target;
        alert("foo");
       });
    });
});
</script>

http://www.special4you.co.uk/event-organiser-nottingham/events-organser-weddings-parties.php

is the link to the page.

I also would like to know the use of "event" and what "Propagation" means. If anyone could help it would be much appreciated.

Answer 1

When you click on a text shown in an HTML page, the event (which could be interpreted as information about something happened in the page) is propagated (or sent) to the parent element of the element where the event happened, and then to the parent element until the windows object is reached. Each of those elements can react to the event, and have a handler that is executed. That is why the event handlers in jQuery have a target parameter, which says to the event handler which was the element that originated the event.

Answer 2

Try using:

$(this).animate({ top: "-500px" }, 1000, '', function() { // ...

Definition:

animate( params, [duration], [easing], [callback] )

---

About event, read here. Taken from there:

jQuery's event system normalizes the event object according to W3C standards

---

event.stopPropagation() is usually used to avoid firing an event to parent elements.

For example, if you have

<p> UH
   <p> Something </p>
</p>

and you do something like $('p').click(function() { //magic stuff } );, if you happen to click the <p> containing "Something", the magic stuff will fire twice!

So, if you do

//bind click event on all 'p's
$('p').click(
    function(myEvent) { 
       //magic stuff 
       alert($(this).text());
       myEvent.stopPropagation();
    } 
);

whenever you click a <p>, it ensures it gets fired on that element only, and not on his parents.

---

UPDATE: it is advisable to always store jquery elements if used more than once. In your case, you use a lot of $(this).something(), for either retrieving/setting values or calling functions.
Try to store it like:

var $this = $(this);   //stored it in variable
var someData = $this.something();
$this.functionNeeded(...);

Answer 3

Still not working I have tried above sugestions but nothing...

<script type="text/javascript">
$(document).ready(function(){
    $("a.balloon-nav").click(function(myEvent){
     myEvent.stopPropagation();
     var element = $(this);
     var target = element.attr("href");
     var zIndex = element.css("z-index");
     element.attr("href", "#").css("z-index", "100");
     element.animate({ top: "-500px" }, 1000, '', function() {
        element.css("z-index", zIndex);
        window.location=target;
        alert("foo");
       });
    });
});