I'm trying to do a script, preferably jQuery, but I don't know where to start.
The idea is: I have four DIVs, each with a different background color. Each DIV is 100x100 pixels. These four DIVs will take up the entire background. So, when you're on 1024x768, they'd fill up the screen. Again, when you're on 1600x800, they'd fill the screen. Each DIV would be randomly placed on the screen, too.
I'm sure there's some math to start and probably some kind of shuffle script? I don't know. Can anybody throw me a bone?
I'm a little confused. If they're 100x100px, are you saying they need to stay square to take up the whole of the page, or that they need to repeat enough times to fill up the screen?
Ahhh...then it's probably not divs that you want but random background images.
I think you would have to have a whole bunch of images already set up and then use JS to tile them randomly in the background using a loop of some kind.
Or perhaps a multiple SVG solution utilised in the same fashion.
Sorry, I have very little (read..zero) ability in JS.
My only concern is that you would have to be very careful as it's quite possible that this effect would make your actual content unreadable...at least in part.
Oh, one last thing...you might want to think about making them 96x96...makes the division easier.
Hi there,
I'm trying to do a script, preferably jQuery, but I don't know where to start.
The idea is: I have four DIVs, each with a different background color. Each DIV is 100x100 pixels. These four DIVs will take up the entire background. So, when you're on 1024x768, they'd fill up the screen. Again, when you're on 1600x800, they'd fill the screen. Each DIV would be randomly placed on the screen, too.
I'm sure there's some math to start and probably some kind of shuffle script? I don't know. Can anybody throw me a bone?
I'm a little confused. If they're 100x100px, are you saying they need to stay square to take up the whole of the page, or that they need to repeat enough times to fill up the screen?
Yes, to repeat enough times to full up the screen!
So you have four divs, but there could be 150 divs on the page if the screen allows it?
Yes.
Is that hard to do?
Will the divs have the same content?
I'm having trouble trying to figure out the point. Most viewports / browser widths are not neatly sized in multiple of 100px.
Well, I have a background pattern, but the pattern isn't seamless -- all the squares are randomly colored in 4 shades of gray. :/
Ahhh...then it's probably not divs that you want but random background images.
I think you would have to have a whole bunch of images already set up and then use JS to tile them randomly in the background using a loop of some kind.
Or perhaps a multiple SVG solution utilised in the same fashion.
Sorry, I have very little (read..zero) ability in JS.
My only concern is that you would have to be very careful as it's quite possible that this effect would make your actual content unreadable...at least in part.
Oh, one last thing...you might want to think about making them 96x96...makes the division easier.
That's ok! This helps me think some more on how to do it. SVG, that's interesting. I'll look into that.
Thank you!