Geek Answers Handbook

Animate width / height from the far corner

I have a grid of 6 blocks. When you click on each of the blocks, the block expands and closes the container containing the blocks.

The first square (top left) looks great, but others cannot imagine the block growing to the width and height of the container because it starts from the top left position.

Ideally, drawers 2 and 5 should expand from their center, and windows 1, 3, 4, and 6 should expand from their far corner. Is it possible and how?

I created a JSFiddle that shows my problem. But the code to play here:

JQuery

$(".service-block").on("click", "a", function (e) { e.preventDefault(); var block = $(this); var blockOffset = block.offset(); var blockBackgroundColor = block.css("backgroundColor"); var container = $(".service-grid"); var containerOffset = container.offset(); // Create the popup and append it to the container var popout = $("<div class='service-block-popup'>Test</div>"); popout.css({ "backgroundColor": blockBackgroundColor, "position": "absolute", "top": blockOffset.top, "left": blockOffset.left }).appendTo(container) // Now animate the properties .animate({ "height": container.height() + "px", "width": container.width() + "px", "top": containerOffset.top, "left": containerOffset.left }, 1500, function() { //alert("done"); }) .on("click", function () { popout.remove(); }); });

Markup

 <div class="service-grid"> <div class="row"> <div class="service-block"> <a href="#" class="box1"> <span class="title">Box 1</span> </a> </div> <div class="service-block"> <a href="#" class="box2"> <span class="title">Box 2</span> </a> </div> <div class="service-block"> <a href="#" class="box3"> <span class="title">Box 3</span> </a> </div> </div> <div class="row"> <div class="service-block"> <a href="#" class="box4"> <span class="title">Box 4</span> </a> </div> <div class="service-block"> <a href="#" class="box5"> <span class="title">Box 5</span> </a> </div> <div class="service-block"> <a href="#" class="box6"> <span class="title">Box 6</span> </a> </div> </div> </div>

CSS

 *, *::after, *::before { box-sizing: border-box; } .service-grid { width: 600px; } .row { overflow: hidden; } .service-grid .service-block a { display: block; height: 200px; width: 200px; text-align: center; float: left; } .service-grid .service-block a > img { display: block; margin: 0 auto; transition: all 100ms linear 0s; } .service-grid .service-block a > .title { display: block; font-family: Arial,Helvetica,sans-serif; font-size: 2.2rem; font-weight: bold; line-height: 3.2rem; margin-top: 20px; text-transform: uppercase; } .box1 { background: red; } .box2 { background: purple; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: green; } .box6 { background: magenta; }
+6
source share
4 answers

I myself will answer my question. It was a simple mistake!

I did not set the width / height on .service-block-popup . Thus, he did not expand from his current state. Here's how it should be built:

 // Create the popup and append it to the container var popout = $("<div class='service-block-popup'>Test</div>"); popout.css({ "backgroundColor": blockBackgroundColor, "position": "absolute", "top": blockOffset.top, "left": blockOffset.left, "width": block.outerWidth(), "height": block.outerHeight() }).appendTo(container) /* .... */

Here in action: http://jsfiddle.net/hdq0x2s8/4/

+1
source

I created a dynamic top and left based on the width / height of the container and the width / height of the window. Based on the size of the container and box, it will determine the position of the field, whether in the corner or in the center, and then decide on top and left.

Here is the js code:

 $(".service-block").on("click", "a", function (e) { e.preventDefault(); var block = $(this); var blockOffset = block.offset(); var blockBackgroundColor = block.css("backgroundColor"); var container = $(".service-grid"); var containerOffset = container.offset(); var top = 0; var left = 0; if (blockOffset.top - containerOffset.top == 0 && blockOffset.left - containerOffset.left == 0) { top = blockOffset.top; left = blockOffset.left; } else if (blockOffset.top - containerOffset.top == 0 && blockOffset.left - containerOffset.left + block.width() == container.width()) { top = blockOffset.top; left = container.width() - containerOffset.left; } else if (blockOffset.top - containerOffset.top + block.height() == container.height() && blockOffset.left - containerOffset.left == 0) { top = container.height() - containerOffset.top; left = containerOffset.left; } else if (blockOffset.top - containerOffset.top + block.height() == container.height() && blockOffset.left - containerOffset.left + block.width() == container.width()) { top = container.height() - containerOffset.top; left = container.width() - containerOffset.left; } else { top = blockOffset.top + (block.width() / 2); left = blockOffset.left + (block.height() / 2); } // Create the popup and append it to the container var popout = $("<div class='service-block-popup'>Test</div>"); popout.css({ "backgroundColor": blockBackgroundColor, "position": "absolute", "top": top, "left": left }).appendTo(container) // Now animate the properties .animate({ "height": container.height() + "px", "width": container.width() + "px", "top": containerOffset.top, "left": containerOffset.left }, 1500, function() { //alert("done"); }) .on("click", function () { popout.remove(); }); });

Here is the fiddle .

He will work on more than 6 boxes.

+1
source

Hope this code is helpful for you, I just added a few lines of code. Find the violin here

 $(".service-block").on("click", "a", function (e) { e.preventDefault(); var block = $(this); var blockOffset = block.offset(); var blockBackgroundColor = block.css("backgroundColor"); var container = $(".service-grid"); var containerOffset = container.offset(); // Create the popup and append it to the container var popout = $("<div class='service-block-popup'>Test</div>"); thisHeight = $(this).height(); thisWidth = $(this).height(); var clsName = $(this).attr('class'); var topEle = ["box1", "box2", "box3"]; if ($.inArray(clsName, topEle) > -1) { thisHeight = 0; } var leftEle = ["box1", "box4"]; if ($.inArray(clsName, leftEle) > -1) { thisWidth = 0; } var midEle = ["box2", "box5"]; if ($.inArray(clsName, midEle) > -1) { thisWidth = thisWidth/2; } popout.css({ "backgroundColor": blockBackgroundColor, "position": "absolute", "top": blockOffset.top + thisHeight, "left": blockOffset.left + thisWidth }).appendTo(container) // Now animate the properties .animate({ "height": container.height() + "px", "width": container.width() + "px", "top": containerOffset.top, "left": containerOffset.left }, 1500, function() { //alert("done"); }) .on("click", function () { popout.remove(); }); }); 
 *, *::after, *::before { box-sizing: border-box; } .service-grid { width: 600px; } .row { overflow: hidden; } .service-grid .service-block a { display: block; height: 200px; width: 200px; text-align: center; float: left; } .service-grid .service-block a > img { display: block; margin: 0 auto; transition: all 100ms linear 0s; } .service-grid .service-block a > .title { display: block; font-family: Arial,Helvetica,sans-serif; font-size: 2.2rem; font-weight: bold; line-height: 3.2rem; margin-top: 20px; text-transform: uppercase; } .box1 { background: red; } .box2 { background: purple; } .box3 { background: yellow; } .box4 { background: orange; } .box5 { background: green; } .box6 { background: magenta; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="service-grid"> <div class="row"> <div class="service-block"> <a href="#" class="box1"> <span class="title">Box 1</span> </a> </div> <div class="service-block"> <a href="#" class="box2"> <span class="title">Box 2</span> </a> </div> <div class="service-block"> <a href="#" class="box3"> <span class="title">Box 3</span> </a> </div> </div> <div class="row"> <div class="service-block"> <a href="#" class="box4"> <span class="title">Box 4</span> </a> </div> <div class="service-block"> <a href="#" class="box5"> <span class="title">Box 5</span> </a> </div> <div class="service-block"> <a href="#" class="box6"> <span class="title">Box 6</span> </a> </div> </div> </div>
0
source

Try this code. I have some CSS and JS changes.

 $(".service-block").on("click", "a", function (e) { e.preventDefault(); var block = $(this); var blockOffset = block.offset(); var blockBackgroundColor = block.css("backgroundColor"); var container = $(".service-grid"); var containerOffset = container.offset(); // Create the popup and append it to the container var popout = $("<div class='service-block-popup'>Test</div>"); popout.css({ "backgroundColor": blockBackgroundColor, "position": "absolute", "left": "50%", "top": "50%", }).appendTo(container) // Now animate the properties .animate({ "height": container.height() + "px", "width": container.width() + "px", "top": containerOffset.top, "left": containerOffset.left }, 1500, function () { //alert("done"); }) .on("click", function () { popout.remove(); }); });

Demo link http://jsfiddle.net/hdq0x2s8/3/

0
source

More articles:


All Articles