?
Solved

How to make a handful of divs all start out from a single point ( like a corner of a page )  and then go to their assigned row and column when the page finishes loading for effect?

Posted on 2014-08-12
23
Medium Priority
?
194 Views
Last Modified: 2014-08-19
Hello Experts,

I'm trying to find a way to take select Divs ( perhaps designated by the divs name prepended to the beginning ) and have the page load where those divs are stacked in one corner and as the page loads they all go to a set row and column? Is that possible?
And as a bonus when the page is closed have them all go back to the original corner?

Thanks in advance.
0
Comment
Question by:colonelblue
  • 10
  • 7
  • 6
23 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40257309
Basically not possible.
Kinda sounds like you want something like this

Otherwise you would need to use some jquery magic on document load but this would only happen when the page is loaded and would happen at once (maybe with an animation)
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40257386
first of all, what do you mean by page loading? What kind of page are you dealing with? Are you talking about a bunch of asynchronous data calls? or some server side DB query? Or is it some very basic static html?

second, what do you mean by "when the page is closed"? If someone closes their browser window or hits the back button, that's an immediate action you have no control over, so to do any sort of animation is completely futile, as it will not be seen. If you're talking about some sort of single page app, or variation thereof, then that is a different story.

You can animate a bunch of divs from one position to another on a number of page load events - for example:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded - using just CSS. This is not difficult.

But to really answer your question we need more details about your project.
0
 

Author Comment

by:colonelblue
ID: 40257508
Hello and thank you for both.
I am not much of a coder at all and I learn from seeing examples and understanding the code from it.
Here is a diagram to give an idea.

Thank you again in advance.
diagram.png
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 40257513
At the start it is possible with jquery
Closing the window it isn't possible (as Kyle said)- there is only so much you can do when someone closes the browser tab and this isn't one of them
Unless Kyle comes up with a solution for part 1 in the meantime I'll put something together tomorrow (off to bed)
0
 

Author Comment

by:colonelblue
ID: 40257608
Thank you Gary!!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40258490
have a look a t this fiddle. this is for modern browsers only, and is a starting point. if you need/want support for older IE, it gets more complicated

http://jsfiddle.net/cdzbgtg4/
0
 
LVL 58

Expert Comment

by:Gary
ID: 40258523
Thats a nifty solution, Kyle - but please post the code here.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40258576
no prob.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
        <title></title>

        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
        <meta name="apple-mobile-web-app-capable" content="yes" /> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
        
        <meta name="author" content="C &amp; P Generation, LLC">
		<style>
			*{
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				box-sizing:border-box;
				margin:0;
				padding:0;
			}
			.wrapper{
				margin:0 auto;
				position:relative;
			}
			.box{
				border:10px solid #fff;
				background-color: #eee;
				padding:10px;
				-webkit-transition: all 2s;
				-moz-transition: all 2s;
    			transition: all 2s;
				position:absolute;
				bottom:0;
				left:0;
				width:0;
				height:0;
			}

		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box">a</div>
			<div class="box">b</div>
			<div class="box">c</div>

			<div class="box">d</div>
			<div class="box">e</div>
			<div class="box">f</div>

			<div class="box">g</div>
			<div class="box">h</div>
			<div class="box">i</div>
		</div>
		<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<script>
			$(function(){
				var winWidth = $(window).width();
				var winHeight = $(window).height();
				$(".wrapper").height(winHeight);
				$(".box").css({"width":winWidth/3, "height": winHeight/3});

				var boxes = $(".box");
				for(var i = 0, l=boxes.length; i < l; i++){
					var box = $(boxes[i]);
					// winWidth * 0/3, winWidth * 1/3, winWidth * 2/3 
					// winHeight * 0/3, winHeight * 0/3, winHeight * 0/3,
					// winHeight * 1/3, winHeight * 1/3, winHeight * 1/3, 
					// winHeight * 2/3, winHeight * 2/3, winHeight * 2/3,
					box.css({"left":winWidth*(i%3/3), "bottom":winHeight*((i-(i%3))/3)/3});
				}
			})
		</script>
	</body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40259734
Just for the sake of my own challenge

http://jsfiddle.net/GaryC123/evf9n8kp/1/

<div class="wrapper">
    <div class="box"></div>
    <div class="box">b</div>
    <div class="box">c</div>
    <div class="box">d</div>
    <div class="box">e</div>
    <div class="box">f</div>
    <div class="box">g</div>
    <div class="box">h</div>
    <div class="box">i</div>
</div>
<style>
.wrapper {
    position:relative;
    height:270px
}
.box {
    border:1px solid blue;
	height:30px;
width:30px;
    position:absolute;
    top:240;
bottom:0;
    left:0;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var bleft=0;
var btop=0;
$(".wrapper .box").each(function(){
  $(this).animate({top: btop,left: bleft},3000);
    bleft+=30;
if(bleft % 90 == 0){bleft=0;btop+=30}
})
</script>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40259769
there are lots of ways to do the same thing. Here's a nice article comparing some js libraries and css transitions.
In this particular example, I can't see a discernible difference in performance between your jquery version and my css version - though I've only looked at it in chrome, so that's not saying much. velocity.js should be a fun one to try.

http://davidwalsh.name/css-js-animation
0
 
LVL 58

Expert Comment

by:Gary
ID: 40259774
By all accounts css animations should be faster, I even just wrote an article about CSS3 animations making a point it is faster, but it can depend on the browsers interpretation of js.

edit
Faster is the wrong word - less resource intensive and smoother.
0
 

Author Comment

by:colonelblue
ID: 40259827
Wow thanks guys. Ingenuous !
Sorry I was out on field and was so eager to see what you guys had as answers.

I have a couple of questions please:

Kyle; What if I wanted to have 4x4 squares or 4 x2 instead of 3x3? Can I directly control the size of each box?

Gary: How do I change the size of the boxes to 200x200 as opposed to 30x30. When I change it to 200 it gets odd. also how do I have so that it starts from the bottom left corner?

Thanks again so much guys!
0
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 40259844
My example is a bit hard coded, would be simple enough to make it more plug'n'play

Basically you have to set the size of the container to the total height of the rows in the css
In the script change the two occurences of 30 to 200 and where it says 90 that is the number of columns so if you had two columns of 200px div it would become 400, if you had 3 columns it would become 600 etc

Updated fiddle
http://jsfiddle.net/GaryC123/evf9n8kp/2/
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 1000 total points
ID: 40260277
http://jsfiddle.net/cdzbgtg4/6/

this will create box sizes to fill up the screen. If you want the boxes to be squares, then we can do something else.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40260289
here is one where the boxes are squares, and the lot fits the screen based on the size of the matrix

http://jsfiddle.net/cdzbgtg4/12/

the only thing you have to do is change the row and col sizes, and make sure you have that many boxes in your html
0
 

Author Comment

by:colonelblue
ID: 40262548
Thank you gentleman. You guys rock. Long day at office again and didn't get a chance to log on -meetings suck!

I will incorporate both your solutions since they are so different yet aesthetically functional.

Thank you again for your expertise and generosity.
0
 

Author Closing Comment

by:colonelblue
ID: 40262549
Certified Awesomeness Thank you Experts!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40269242
I was having so much fun with your boxes, I ended up writing a little plugin that draws boxes:

demo:
http://candpgeneration.com/toys/box-grid.html

plugin:
http://candpgeneration.com/toys/box-grid.jquery.js

I have the boxes animating in from the top, but you can specify start:"bottom" in the options. You would also need to makes sure that your CSS has .box{bottom:0}, instead of top.

have fun with it. it's cool how the boxes rearrange themselves if you resize your window. try specifying 123 boxes, and autoGrid, then resize your window a couple of times.

You may already have the solution you need for your project, but if you like this demo, and you want to use it, and you have questions, just ask.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40269341
@Kyle
Write an article about that (though your website is a bit (very) slow to respond)
It's a cool effect and reminds me of another scaffolding plugin - would be great if it reorganized the elements based on a minimum width
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40269384
if i get time i'll write something. today was one of those very rare iccasions i actually had time to do something for no other reason than just because i felt like it.

the reason the page is slow is becsuse i added images to the boxes and made abdolutely no attempt to optimize them. they are all much bigger than they need to be.

i was mucking around at some point with setting a max width, and now i cant remember what i settled on in the end.  i'll have look at it tomorrow if i get some time.

(typing into a text box on a phone sucks btw)
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40269404
just loaded the page on my phone for the first time, and it came down pretty much immediately despite the images...

you mean a min width for the boxes? I guess that would make it something else then. this is just a very small plugin that only does a limited number of "things". For a box-ful of functionality out of the box, there is already a mountain of plugins out there - i don't really feel like competing with that - it's just more internet rubbish... a pile to which I don't feel like contributing. I just make my little bit of rubbish for fun, and if it benefits someone, great, otherwise I just keep my little rubbish heap to meself.

going to bed before  i get myself into trouble. goodnight. :)
0
 

Author Comment

by:colonelblue
ID: 40269487
Wow Kyle that is simply genius!.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40269908
thanks colonelblue. thanks Gary.

I'll keep you guys posted if I do anything more with it.

Kyle.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question