CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raggy
Raggy

Reputation: 37

Disable onclick/mousedown on Div when being overlapped by another div

I have got a loop function that slides 2 divs over a 3rd. Working example can be found here: http://jsbin.com/OYebomEB/4/.

Main function:

    var elements = ['#pointsbarDiv', '#hotlink1Div', '#pointsbarDiv', '#hotlink2Div'];
    function hotlinks_loop(index) {
        $(elements[index]).css({top: -75, display: 'block'}).animate({top: '+0'}, 3000, function () {
            var $self = $(this);
            var currentInstance = this;
            setTimeout(function () {
                $self.animate({top: $(window).height()}, 3000);
                if(currentInstance.hotlinkStop !== true){
                    hotlinks_loop((index + 1) % elements.length);
                }
            }, 3000, currentInstance);
        });
    }
        hotlinks_loop(0); // start with the first element

I have some code to disable onclick while hotlink divs are moving:

hotlink2BtnClick: function () {
    if ($("#hotlink2Div").css("top") === "0px") {
        //do stuff;
    } else {
        //do stuff;
    }
},

However, for the stationary pointsbarDiv I cannot find a solution to disable onclick/mousedown while hotlink divs are sliding over it.

I have tried various 'If's like the the following example:

if (($("#hotlink1Div").css("top") < "76px" && $("#hotlink1Div").css("bottom") < "150px") || ($("#hotlink1Div").css("top") > "-75px" &&     $("#hotlink1Div").css("bottom") < "75px")))...

I am also wondering if there is way I can just disable onclick/mousedown while divs are moving within the main function provided.

I should mention that I am a newbie to javascript/jquery.

Upvotes: 0

Views: 533

Answers (2)

Raggy
Raggy

Reputation: 37

I managed to do this by creating a an extra div giving it a z-index of -1 and setting visibility to hidden.

Then replacing the points div with this in array for the loop.

Followed by implementing a similar code solution hotlink2BtnClick().

Upvotes: 0

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

JQuery event functions get passed an event object - you can accept this in your function, and use it to stop propagation:

hotlink2BtnClick: function (ev) {
    ev.stopPropagation();

http://api.jquery.com/event.stoppropagation/

Also, if you put your js examples on http://jsfiddle.net, then we can fork it and return it to you fixed.

Upvotes: 1

Related Questions