0

In the following code, the click event is added explicitly to the body, so that even if click outside the button say on the body the div with ID tip1 should close with a fade effect. The problem here is that the the div closes even if we click on the div itself. Any idea on this would help ..

$(document).ready(function(){
            $('.button').getit({speed: 150, delay: 300});
    });

    $.fn.getit = function(options){


    var defaults = {
        speed: 200,
        delay: 300
    };

    var options = $.extend(defaults, options);
    $(this).each(function(){

        var $this = $(this);
        var tip = $('.tip');
        this.title = "";
        var offset = $(this).offset();
        var tLeft = offset.left;
        var tTop = offset.top;
        var tWidth = $this.width();
        var tHeight = $this.height();


    $this.click(

            function() {

            if($('.tip').hasClass('.active101')) {
                $('.tip').fadeOut("slow");
                $('.tip').removeClass('.active101').addClass('.inactive101');

            }
            else {
                setTip(tTop, tLeft);
                $('body').bind('click',function(e) {
                        var parentElement = "button1";
                        var parentElement2 = "tip1"
                        if( e.target.id != parentElement) {
                            $('.tip').fadeOut("slow");
                            $('.tip').removeClass('.active101').addClass('.inactive101');
                        }

                }); 
                $('.tip').removeClass('.inactive101').addClass('.active101');
                setTimer();
            }
            }, 
            function() {
                if($('.tip').hasClass('.inactive101')) {
                stopTimer();
                tip.hide();
                }
            }
    );  

        setTimer = function() {

            $this.showTipTimer = setInterval("showTip()", defaults.delay);

        }

        stopTimer = function() {
            clearInterval($this.showTipTimer);
        }


        setTip = function(top, left){
            var topOffset = tip.height();
            var xTip = (left-440)+"px";
            var yTip = (top-topOffset+100)+"px";
            tip.css({'top' : yTip, 'left' : xTip});
        }

    showTip = function(){
            stopTimer();

            tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
        }   

    });
};
<div class="main">

        <a href="#" class="button" id="button1">
            Click Me!
        </a>
        <div class="tip" id="tip1">Hello again</div>

</div>
2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Luckychap
0

You have to handle click on div also. And in that click handler you need to stop event to get Propagating further.

document.getElementById("tip1").onclick = function(e){e.stopPropagation(); return false;};
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.