0

There are 4 boxes initially of equal sizes.
When user clicks on any box it enlarges to the big box with content to the height and width of parent div and hide other siblings.
On enlarge div there are content, close button and continue button to the next div. Here is the code:

$(function(){
    var $currentBox = false;;
    var open = false;
    var origHeight = $('.box').innerHeight() + 'px';
    var origWidth = $('.box').innerWidth() + 'px';

    $(".clsbtn").click(function(){
        $(".box").animate({
            "height": origHeight,
            "width": origWidth
        },800);

        $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            $(".box").on("click");
        });

        $(".box").click(function() {
            if (open) {
                $currentBox = false;
                $(this).animate({
                    "height": origHeight,
                    "width": origWidth
                },800);

                $(".box").show();
                $(".box-container").show();
                $(".box-content").hide();
                open = false;

                $(".box").bind("click");
            } else {
                $currentBox = $(this);
                var width = $('.boxes').innerWidth() + 'px',
                height = $('.boxes').innerHeight() + 'px';
                $(this).animate({
                    "height": height,
                     "width": width
                },800);

                $(this).find(".box-container").hide();
                $(this).find(".box-content").show();

                $(".box").not(this).hide();
                open = true;
                $(".box").unbind("click");
            }
        });
    });
});

Issues:

  1. When box enlarges it disable the clicks on parent div (i.e. "box") and the close button working properly. But when on click of close button the rebind function is not working. So if div is close back to its original size then it click is not working to make it enlarge again.

  2. Secondly i want to make continue button to next enlarged open div. Any help would be appreciated.

Thanks

wmash
  • 4,032
  • 3
  • 31
  • 69
CreativeDip
  • 184
  • 1
  • 2
  • 19

1 Answers1

0

First, instead of .bind() and .unbind() I would use .off() and .on(). Check out What's the difference between jQuery.bind() and jQuery.on()? for more information.

Also any time you unbind or use off('click') on an event, you cant just use bind('click') or on('click') and expect to get the event back to normal. You would have to re-declare the event, in your case, the function in the line $(".box").click(function(){...}. 

$(function(){
var $currentBox = false;;
var open = false;
var origHeight = $('.box').innerHeight() + 'px';
var origWidth = $('.box').innerWidth() + 'px';

$(".clsbtn").click(function(){
    $(".box").animate({
        "height": origHeight,
        "width": origWidth
    },800);

    $(".box").show();
        $(".box-container").show();
        $(".box-content").hide();
        $(".box").on("click");
    });

    function activate() {//change here
        if (open) {
            $currentBox = false;
            $(this).animate({
                "height": origHeight,
                "width": origWidth
            },800);

            $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            open = false;

            $(".box").on("click",activate());//change here
        } else {
            $currentBox = $(this);
            var width = $('.boxes').innerWidth() + 'px',
            height = $('.boxes').innerHeight() + 'px';
            $(this).animate({
                "height": height,
                 "width": width
            },800);

            $(this).find(".box-container").hide();
            $(this).find(".box-content").show();

            $(".box").not(this).hide();
            open = true;
            $(".box").off("click");//change here
        }
    });

 $(".box").on("click",activate());//change here
});


});
Community
  • 1
  • 1
Hozeis
  • 1,542
  • 15
  • 36
  • Hi, you miss this thing, the click function can you please review it. Thanks $(".box").click(function() { if (open) { – CreativeDip Jun 21 '16 at 17:13
  • I didnt miss it, i turned it into a function and called it in the 3rd to last line. `$(".box").on("click",activate());`. if you add the jfiddle it will much easier to help you – Hozeis Jun 21 '16 at 17:28
  • sadly its not working and breaks the already functionality the boxes are not enlarging anymore. But thanks for the kind help, Just one question should i put close button before the click function as it only works on enlarge only – CreativeDip Jun 21 '16 at 17:28
  • Now i find where the problem is the origHeight and origWidth are giving null in return any idea? – CreativeDip Jun 21 '16 at 18:11