CSS random div placement & responsiveness
It's not possible in pure CSS at the moment (I'm hoping for calc(rand)
to become a thing). The solution you are using is as good as any, you may want to consider using percentages if you want the stars to cluster on a smaller screen type.
CSS Div positioning randomly
Try adding display: flex;
to the jobCostChart div
Also remove inline-block from item-wrapper
Please see updated code(removed unneccesary styles)
<div id="jobCostChart" class="segbar" style="width: 100%; height: 30px;display: flex;"> <div class="item-wrapper" style="width: 64.7059%; background-color: rgb(56, 142, 60);"> <span class="item-percentage" style="color: white;">$20,350.00</span> </div> <div class="item-wrapper" style=" width: 27.663%; background-color: rgb(76, 175, 80);"> <span class="item-percentage" style="color: white;">$8,700.00</span> </div> <div class="item-wrapper" style=" width: 7.63116%; background-color: rgb(129, 199, 132);"> <span class="item-percentage" style="color: white;"></span> </div> </div>
random position of elements inside parent div
The .box
elements are fixed at 100px
height and width, so to achieve what you need just remove that dimension from the possible random value maximum:
$(this).css({
left: Math.random() * ($('.main').width() - $(this).width()),
top: Math.random() * ($('.main').height() - $(this).height())
});
Updated fiddle
Divs keep moving around seemingly at random
Absolute positioned elements will move according to a fixed distance from the window border. So when you resize the window, all divs will move randomly because they aren't moving relatively to one another. To solve this, simply change all postition: absolute to
position: relative;
and then use a grid system like css grid or flexbox.
Randomly creating and positioning elements within a div
In the code you're looking at the width and height of the entire window are determined, and used as bounds for all the random boxes:
var ww = $(window).width();
var wh = $(window).height();
If, instead, you want all your random boxes inside another div
(I've given it the id container
) you could just read the width and height of that box.
var ww = $("#container").width();
var wh = $("#container").height();
You would also want to append the random boxes to your container div, rather
than the body
.
for(var x=1;x<=numTickets;x++){
$(ticket).appendTo("#container");
}
Here's a demo:
var ticket="<div class='ticket'><p>Random<br />Box</p></div>"; var numTickets=10; for(var x=1;x<=numTickets;x++){ $(ticket).appendTo("#container"); } // get container dimentions var ww = $("#container").width(); var wh = $("#container").height(); $(".ticket").each(function(i){ var rotationNum=Math.round((Math.random()*360)+1); var rotation="rotate("+rotationNum+"deg)"; var posx = Math.round(Math.random() * ww)-20; var posy = Math.round(Math.random() * wh)-20; $(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation); });
.ticket{ position: absolute; background: #F90; padding: 7px 3px; }
#container{ width:400px; height:400px; border:1px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container"> </div>
Randomly Position A Div
This still works. simply use makeDiv() to create new one.
function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100);
};
makeDiv();
Making div appear in a random order and in random position
The following inline code snippet implements the random apparition of grid elements and demonstrates some (hopefully) helpful concepts:
- Css-based layout using the
display
property for tabular layout; - Content centering with Css property
display: flex
; - Programmatic access to DOM element(s) using
document.querySelector(...)
,document.querySelectorAll(...)
; - A DOM NodeList is not an array. Similar surprises abound, reference docs & specs are your friend. The docs, not YouTube videos ...
Remember that id
attribute values must not be numeric. Avoid over-optimizing - the selection of elements not yet on display is extremely primitive, the more elements are visible, the more attempts are needed to find a hidden element. However, in response to interaction with slow humans, efficiency is not an issue ... ;)
let b_allVisible = false ; function showme ( eve ) { let e_chosen , n_c , n_r ; b_allVisible = !( Array .from(document.querySelectorAll('div[id^="c-"]')) .some ( (pe_grid) => { return pe_grid.style.visibility !== 'visible'; } ) ); if (b_allVisible) { document.getElementById('showme').setAttribute('disabled', 'disabled'); } else { do { n_c = 1 + Math.floor( 4 * Math.random() ); n_r = 1 + Math.floor( 4 * Math.random() ); e_chosen = document.querySelector(`#c-${n_c}${n_r}`); // Here (referencing an element by their id), 'document.getElementById(`c-${n_c}${n_r}`)' can also be used. // Note the absence of the selector marker '#' for ids } while ( e_chosen.style.visibility === 'visible' );
e_chosen.style.visibility = 'visible'; }} // showme
body > section { display: table; padding: 20px;}section.oggettoElements { display: table-row;}section.oggettoElements > div { display: table-cell; border: solid 1px black; height: 30px; width: 30px; visibility: hidden;}section.oggettoElements > div > div { display: flex; height: 30px; align-items: center; justify-content: center;}div > span { flex: 1; text-align: center}
<section> <section class="oggettoElements"> <div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-11"><div><span>01</span></div></div> <div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-21"><div><span>02</span></div></div> <div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-31"><div><span>03</span></div></div> <div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-41"><div><span>04</span></div></div> </section> <section class="oggettoElements"> <div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-12"><div><span>05</span></div></div> <div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-22"><div><span>06</span></div></div> <div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-32"><div><span>07</span></div></div> <div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-42"><div><span>08</span></div></div> </section> <section class="oggettoElements"> <div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-13"><div><span>09</span></div></div> <div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-23"><div><span>10</span></div></div> <div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-33"><div><span>11</span></div></div> <div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-43"><div><span>12</span></div></div> </section> <section class="oggettoElements"> <div class="far fa-newspaper oggetto" draggable="true" style="color: #0000FF;" id="c-14"><div><span>13</span></div></div> <div class="fas fa-wine-glass-alt oggetto" draggable="true" style="color: #008000;" id="c-24"><div><span>14</span></div></div> <div class="fas fa-wine-bottle oggetto" draggable="true" style="color: #FFD700;" id="c-34"><div><span>15</span></div></div> <div class="fas fa-apple-alt oggetto" draggable="true" style="color: #8B4513;" id="c-44"><div><span>16</span></div></div> </section></section><button id="showme" name="showme" onclick="showme()">Show Me!</button>
Javascript div random positioning
try the bellow js code. Is this you need?
There're two comments to you can understand what is happening
<script>
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100);
//on the coded above the div shows up
//the code bellow adds the event mouseover to the div
//when fired, makes the div to fadeout and removed, then creates another div
$newdiv.mouseover(function(){
$newdiv.fadeOut(200).remove()
makeDiv()
});
}());
</script>
Related Topics
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
How to Get the Footer to Stay At the Bottom of a Web Page
In CSS Flexbox, Why Are There No "Justify-Items" and "Justify-Self" Properties
Difference Between Display: Inline and Display: Inline-Block
Css3 Selector :First-Of-Type With Class Name
Css Selector For "Foo That Contains Bar"
Center a Position:Fixed Element
Vertically Align Text Within a Div
Internet Explorer'S CSS Rules Limits
Bootstrap Take Full Width for Select Drop Down
Change a Html5 Input'S Placeholder Color With Css
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Fixed Position But Relative to Container
Center Content in Responsive Bootstrap Navbar