Creating a series of random div elements each time the page is loaded

Question

Creating a series of random div elements each time the page is loaded

Can I share a quick little story with you? I recently created a page (super simple - just two divs with different background images, check it out here.)

Now here's the kicker: I want to make it so that every time a new page loads, those two divs appear in a random order, filling the entire screen content. No predictable pattern, just a beautiful chaos of randomness. Think of it as a massive grid where the divs keep shuffling around with no set order.

So my burning question is...is this even possible? Would I need to delve into PHP for something like this? I'm clueless when it comes to PHP, so any guidance would be greatly appreciated!

Thanks everyone for your help in advance!

javascript jquery html css

Answer 1

Answer №1

http://jsfiddle.net/aBjMx/

JavaScript with jQuery

var element1 = '<div class="first">';
var element2 = '<div class="second">';

var totalElements = Math.floor(window.innerWidth/30)*Math.floor(window.innerHeight/30);

for (i = 0; i < totalElements; i++) {   
    if ( Math.random() > 0.5 ) {
        $(element1).appendTo('body');
    }
    else {
        $(element2).appendTo('body');
    }
}

CSS styling

div.first, div.second {
    height:30px;
    width:30px;
    float:left;
}

div.first { background-color:#AABBCC; }
div.second { background-color:#DDEEFF; }

Update: replaced screen.availWidth with window.innerWidth

Answer 2

http://jsfiddle.net/aBjMx/

JavaScript with jQuery

var element1 = '<div class="first">';
var element2 = '<div class="second">';

var totalElements = Math.floor(window.innerWidth/30)*Math.floor(window.innerHeight/30);

for (i = 0; i < totalElements; i++) {   
    if ( Math.random() > 0.5 ) {
        $(element1).appendTo('body');
    }
    else {
        $(element2).appendTo('body');
    }
}

CSS styling

div.first, div.second {
    height:30px;
    width:30px;
    float:left;
}

div.first { background-color:#AABBCC; }
div.second { background-color:#DDEEFF; }

Update: replaced screen.availWidth with window.innerWidth

Answer 3

Answer №2

How about creating elements like this? Simply loop through as many times as needed and dynamically add elements.

for (i = 0; i < 300; i++) {
    var box1 = document.createElement("div");
    var box2 = document.createElement("div");
    box1.innerHTML = "box1";
    box2.innerHTML = "box2";
    box1.setAttribute("class", "box1");
    box2.setAttribute("class", "box2");
    document.body.appendChild(box1);
    document.body.appendChild(box2);
}

Answer 4

How about creating elements like this? Simply loop through as many times as needed and dynamically add elements.

for (i = 0; i < 300; i++) {
    var box1 = document.createElement("div");
    var box2 = document.createElement("div");
    box1.innerHTML = "box1";
    box2.innerHTML = "box2";
    box1.setAttribute("class", "box1");
    box2.setAttribute("class", "box2");
    document.body.appendChild(box1);
    document.body.appendChild(box2);
}

Answer 5

Answer №3

You don't need PHP for this task. Simply utilize client-side scripting with Javascript (consider Jquery for simplicity).

Answer 6

You don't need PHP for this task. Simply utilize client-side scripting with Javascript (consider Jquery for simplicity).

Creating a series of random div elements each time the page is loaded

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible for OrbitControls to maintain rotation based on model origin even while panning?

Is it possible to modify the background color of a select option menu when hovering over it?

Custom JSON filtering

The .on() function in Jquery seems to be malfunctioning when it comes to handling dynamically

Calculate the total number of table rows added using jQuery

Querying escape characters from JSON to JavaScript

Updating the value of a JSON data attribute

Expanding across the entire horizontal space, excluding any space allocated for

Tips for arranging Bootstrap thumbnails in a horizontal row

The quirky behavior of JavaScript's Array.reduce

Using Selenium in Java: Implementing a line break in a webpage and executing it

Are there specific Dojo treegrid restrictions to prevent the display of the "Oops, an error occurred" message?

"Error message: The server tag within the OnClientClick attribute is not properly formed

When the page is resized, the Font-Awesome icons shift position

Hidden Span Element Appears Invisible

Why does my body feel devoid whenever I submit a post request from the React JS frontend?

ng-bind-html not refreshed following ng-click triggering

Unspecified variable in AngularJS data binding with Onsen UI

Storing the AJAX response in an external variable using jQuery callback function

Make the text area occupy the full width of the remaining screen space