Making random not so random

[Shikkediel]

Edited – I’ve changed the basic flow from static to relative so you can position absolutely inside the boxes. Seems basic CSS but I didn’t realise that wouldn’t work with a static parent. That will give a lot more options for individual style. Hope that helps.
Otherwise it would be good to see a live example…

[LrnWdlr]

It’s not allowing me to position the boxes individually, only as a group… :(

[Shikkediel]

If you post a link to what you’ve set up, I could have a look how it could be made to work together. Not sure what would be needed right now.
Copying each individual style would mean a whole new addon – although that happens to be a subject I’ve been researching recently. But maybe it needs to be cloned or put in separate containers…

[LrnWdlr]

It’s exactly what you have…

This is what I’m trying to achieve: http://i.imgur.com/h0yhJl7.png

Organize all items like in a list, with the possibility to move some of them out of that order.

At the moment I can only control the position of the group, not each one individually. :(

[Shikkediel]

I’d need to see the actual code to get an idea of the level of styling and it’s responsiveness to write something concrete. In general I can say though that when you give the elements any kind of styling, as long as the common factor is a specified class, they could be copied/cloned to the randomised container. Individual styling could be done with identifiers or other shared classes. Just make sure the ‘bare’ content is inside the common class.

There would be two main objects then – one with original layout and another with the clones. The buttons would then show/hide each.

[LrnWdlr]

Here it is:

http://codepen.io/LrnWdlr/pen/zxZNeK

[Shikkediel]

Here’s a (quick and not fully tested) version where the original layout is put inside the div #main – then anything that has the class .boxes is copied (jQuery clone) to the randomising container :

Pen 2.0

So two main objects are used now – the original layout stays unchanged and the div #container holds the copies, then show and hide are used to display them when either option is clicked.

One thing to keep in mind, better not to use unique identifiers inside the .boxes element. Since they are cloned, it would create double identifiers (which is a no-no). But that’s easily avoided by only setting style with classes (like done with this pen). The .boxes themselves (parent) can have unique ids because they are removed with cloning.

This should give complete freedom of design for the organised layout.

[Shikkediel]

Good to go now, I think. But let me know of any additional quirks…
It would need a new edit if your original content is responsive.

[Shikkediel]

Double post.

[LrnWdlr]

Sorry I’ve been silent these past few days, but I had a lot on my plate and other things had to take priority. This is a personal project, so it had to wait…

I’m gonna test this last version now.

Just one quick question/request:

Would it be too difficult to have only one button that would toggle between random and ordered? Ideally the text would change as well… if the items are randomly placed the button would read “Order” and if you were to click it the items would be ordered and the button would change to “Random”.

If that’s too difficult, just forget it… :)

Again, if you want to publish this I’d love to make a donation.
You’ve been very, very helpful!

[Shikkediel]

That doesn’t sound overly complicated – I’ll have a good look at that and post an updated version here soon. General functionality should be the same so it won’t influence any styling that will be applied (so go ahead with the design in the meantime if you like).

One tip – the boxes can have additional classes when it comes to styling of the organised layout. For example if you want half of them on the left and the others on the right you could do this :

<div id="box1" class="left boxes">
 <div class="caption text1">YOKOHAMA</div>
</div>

<div id="box2" class="right boxes">
 <div class="caption text2">SAO PAULO</div>
</div>

.left {
float: left
}

.right {
float: right
}

These selectors will be removed with cloning so they can be an extra tool for styling the original design only…
Still no donation needed. ;-)

[eurico]

@Shikkediel is it possible to run this code into several divs?

Imagine that my screen is divided into 4 squares, each square contains several children and I want to randomly organise the children.

Would that be possible to archive it with your code?

[eurico]

@Shikkediel Thank you for the quick reply.
I made a CodePen to give a better idea of what I’m trying to do. One of the things that entice me more about your code is the possibility of having the boxes not overlapping each other.

http://codepen.io/pontolab/pen/OyNwwK

[eurico]

@Shikkediel sorry for the pen, I was unable to remove it for some reason.
Thank you so much for your help!

[pwalls]

@shikkediel Can i exclude any specific area or div placed in center of the container so that random circles don’t overlap that area.
Any help would be highly appreciated. Thanks.

[Author]

Posts