Understanding resizing and positioning

[LrnWdlr]

Hey guys,

I could really use some help understanding and tweaking this JS.
Specifically the way it both resizes and positions the images.

I’m not sure where exactly those operations occur and if they can be easily altered.

Anybody kind enough to give it a look and shed me some light?
Thanks.

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

[Shikkediel]

Can’t have a look myself at the moment but here’s a direct link of that pen – “Edit on Codepen” is falling out of the post’s width with the redesign :

Link

[LrnWdlr]

Thanks for pointing that out and posting the link, Shikkediel.
If you could give it a look whenever you have some time, I’d appreciate it.

[Shikkediel]

Okay, had a chance to take a quick look…

Specifically the way it both resizes and positions the images.

Those are methods provided by using the jQuery UI – .resizable and .draggable. Could you elaborate on what you’d like to alter exactly?

http://api.jqueryui.com/resizable/

http://api.jqueryui.com/draggable/

[LrnWdlr]

That’s not it. I think you misunderstood me.

By resizing I didn’t mean clicking and dragging the bottom right corner, but how they load much smaller than they actually are. They’re all the same size (480×240) but always load much smaller… and randomly! I’d like to control (or at least disable) that.

And by position I meant how they’re randomly placed around the center of the viewport. It’s never the same position but you’ll notice that they’re always grouped around the center. I’d like to understand how that works to either adjust it or disable it and implement my own solution.

[Shikkediel]

I’ll need a bit more time to investigate but it looks like the sizes are determined by this line :

var w = s == null ? maxWidth * (0.2 + 0.3 * Math.random()) : s;

The code is readable at least but I’m not too familiar with some of the methods that are used. Randomising only happens once because a jQuery cookie is set with the first visit.

In any case, that line determines the random size and the one before it the positioning…

var radius = 200 * Math.random();

[LrnWdlr]

I’ve been trying to edit it myself but the jQuery cookie is driving me nuts.
Do you know how to disable it? or set it to expire in a few seconds?

[Shikkediel]

Taking it out altogether (it’s not maintained anymore) would be quite a task but this will disable it for creating the box sizes :

var w = maxWidth * (0.2 + 0.3 * Math.random());

Instead of :

var w = s == null ? maxWidth * (0.2 + 0.3 * Math.random()) : s;

[LrnWdlr]

That kinda works, but not really…
I mean, it takes care of the size issue but not the positioning.

Would it not be possible to change the cookie’s expiration date?

    var cookieOptions = {
        path: "/",
        expires: 30
    };

I think 30 means 30 days… any idea on how to change it to minutes?
Google isn’t being much of a friend. :(

[Shikkediel]

I googled a bit myself as well and couldn’t find much either… hence the earlier “solution”. But I think I just figured out you can set expires to -1 to make the cookie expire immediately.

Edit – using 0 seems to work as well, tried it before and initially thought otherwise. And decimals are apparently also an option – one minute would be about 0.0007 then.

Or of course 1/1440directly for a single minute, 1/86400for a second.

[LrnWdlr]

Obviously… why didn’t I think of that?
Damn, I feel so stupid right now!

Thanks a lot Shikkediel. ;)

[Shikkediel]

Took me a day to figure that out as well… it isn’t all that obvious – I had to console.log $.cookie and see what the $.removeCookie function does to get the idea.

[Author]

Posts