Making random not so random

[LrnWdlr]

http://jsfiddle.net/rnayzkrs/5/

This is what I currently have. It’s working, but I’d like to edit the random function so that the divs (this is just a mockup, there will be many, many more!) would be “evenly distributed” according to the browser’s width, if that makes any sense. In a way that no horizontal scroll bar would ever be necessary!

http://www.dominicrechsteiner.ch
I think this is a good example. Click the Designer’s name (top left corner) and you’ll see what I mean. Notice how those folders always use the whole window no matter how small or big it is? I want to mimic that behavior… I just don’t know to go about it… edit the current script? a totally different approach?

Any input would be highly appreciated. Thanks.

[Shikkediel]

Here I’ve simply used the ‘randomisers’ for x and y from the site you linked to, they account for window dimensions :

http://jsfiddle.net/rnayzkrs/15/

Note I used a value of 400 for x to make sure the number is bigger than the width of the boxes. That way the text will never be wrapped. You may want to use a different value for the actual application. I’d run the function on resize as well so the elements will never create a scrollbar.

As far as them being evenly spread out, I don’t see any indication that this has been purposely done. I think there are just enough folders there so that it appears that way. I’m sure if you click on ‘random’ enough times (could take a while), some configuration will end up being a big cluster in the center (for example). You should get the same effect when you’ve added enough items.

Edit – only thing is that I added some Jquery. That would need a bit of rewriting if you want to stick with plain JavaScript.

[LrnWdlr]

@Shikkediel

Thanks for taking the time to look into it!

Can you briefly explain to me how those ‘randomizers’ account to window dimensions? That’s what I need, but I just don’t understand it.

As far as them not being evenly spread out on purpose, that might even be true… I don’t really understand how the script works, so I’m not gonna dispute that.

The issue is that with the current random function I have that will never happen, regardless of the amount of items I have…

What I’m trying to accomplish is force the ‘randomizer’ to always spread out the items across, let’s say, 80% of the window’s width… so that something like this http://i.imgur.com/ZLQYZIu.png (photoshopped!) would never happen!

Your fiddle, is clearly a better version than what I had.
If I were able to understand it I could fine tune it to perfection.

Thanks a lot.

[Shikkediel]

I really only replaced two lines that define the x and y position the elements will be placed (what I called the randomisers) :

fixLeft = Math.round(Math.random()*($(window).width()-400))+40;
fixTop = Math.round(Math.random()*($(window).height()-50))+40;

Just to be clear, I’ll describe the whole thing…

In this, fixLeft and fixTop are the x and y positions that will be assigned to each of the objects (the divs with text in your case).

The bits $(window).width() and $(window).height() are jQuery (JavaScript library) – the width and height of the screen size are measured with this. Plain JavaScript would need a bit of different code here but I automatically used these because they are very reliable (besides the quick copy and paste I did).

A random rounded number is then taken from these values (Math.round(Math.random()) to determine the positioning. But the dimensions of the items themselves have to be accounted for so they don’t overflow / stick out of the window. That’s the number that will have to be distracted from the screen width and height.
In the fiddle, I just guessed a bit…

Value at the end you could see as the margin, the minimum x and y position an element will be placed. Needless to say they will have to be tweaked for it to work flawlessly, like if you want the same bottom and right margins. Simple if you give the elements a fixed width as seen on the example page. Differently sized container would need additional calculation. And at small screen sizes things might get crowded.

That site has a neat / smart thing going on by the way. If you resize the browser window, the objects will only start to switch position when the mouse button is released. Gotta remember that.
Edit there – I think it’s a timeout, not a mouseup.

As to filling up the screen – that would take quite a different approach. I’d have to come back on that (or other members that know of a good idea of course). Don’t have an answer ready there.

[LrnWdlr]

Thanks a lot for such an in-depth explanation.

I think I get it now, but, although better than what I had, it’s not quite what I was looking for.

I’d need it to always cover a predetermined width, a % of the window’s width. Imagine I only had two items and the and wanted them to spread out across 90% of the window’s width. It would look something like this: http://i.imgur.com/ZJMlbuD.jpg in this case only the y position would be random.

I think the concept is easier to understand now, right?

If I have a lot of divs they’ll naturally spread out and this is really not a big issue, but when there’s only a few, it doesn’t look very good if half the screen is empty.

If you (or anybody else) could think of a better method I’d really appreciated.

Thanks anyway. ;)

[LrnWdlr]

That might be a great workaround!
I had never though of that!

Feel free to try it out. :)

The only thing I need to keep is not letting the boxes overlap. Not even touch each other! I gotta be able to control the minimum distance between them. Other than that…

[LrnWdlr]

WOW!!! It’s looking pretty incredible!

Not quite what I was looking for, but so good that I’ll probably just ditch my initial idea and move on with this one!

What do you mean by “a resize feature”?

You know what would be even more awesome?
A couple of buttons that would a) randomize it; b) order it (move all items to a predefined position)

Anyway, let me know if you’re gonna make it public.
I’ll be happy to make a donation. ;)

[LrnWdlr]

Of course. Done!

Is margin the only way to prevent text wrap?

If you set it to a higher value like 250 (which you have to when you got divs almost that size), it creates an internal margin (padding) around the whole window that doesn’t look very good.

[Paulie_D]

Not to impose, but would you mind accepting the answer I posted there? Happened to come across it (googling your code) and thought I’d share. I’m not too much for statistical appreciation but I’m only 4 reputation points away from being able to post comments

Heck, link it here and I’ll upvote it too…

Rep on SO is pretty easy to get….there’s loads of n00b questions on CSS/HTML/JS that allow for quick and easy ‘gets’.

[LrnWdlr]

Got it. I hadn’t updated the script.
Now it’s working beautifully!

It’s already awesome, but if you could think about the “random” and “order” buttons it would be even more awesome! :)

[LrnWdlr]

Looking awesome!
Thanks a lot for your time and effort.

[Shikkediel]

A (hopefully final) interesting update – now taking the CSS as a starting point to provide an organised layout fallback for users that don’t have JavaScript enabled. Otherwise all margins that are set in the stylesheet are copied and only applied when the ‘align’ button is clicked.

Pretty nifty that you can feed jQuery a whole array of values at once :

As of jQuery 1.9, passing an array of style properties to .css() will result in an object of property-value pairs. For example, to retrieve all four rendered border-width values, you could use $( elem ).css([ “borderTopWidth”, “borderRightWidth”, “borderBottomWidth”, “borderLeftWidth” ]).

Or the reverse. B-)

var margins = [50px, 20px, 50px, 20px]

$('#some-element').css({margin: margins});

[LrnWdlr]

Looks awesome. Way better than I ever expected.
Thank you so much!!!

I’m just having some trouble setting each element to a unique absolute position when ordered. Is that not possible?

[Shikkediel]

Cool (to the first bit), it’s certainly an interesting exercise…

Right now, static position is used for the organised layout. I chose this because the natural flow of things is nicely responsive and will never create a horizontal scrollbar. I’m sure it wouldn’t be too much extra code to store the initial (absolutely positioned) styling from the css but have you taken into consideration how this will look on smaller screens? My guess is that in many cases you’ll have an overflow on the x-axis (and a scrollbar because of that). If that is not an issue, I could easily write some additional lines.

[LrnWdlr]

It wouldn’t create a horizontal scrollbar… my idea is to have all items lined up like they are now, but vertically.. sort of list style! it could create a vertical scrollbar, but that would be okay.

Absolute positioning would be great because I might want to change the order, indent some items or simply make some subtle changes.. I would have to set it up manually one item at a time, but I would have total freedom!

[Author]

Posts