Styjun

A+ rating still unsecure by Google Chrome's opinion

What are the advantages of this gold finger shape?

Is there any official ruling on how characters go from 0th to 1st level in a class?

Cusp forms have an orthonormal basis of eigenfunctions for all Hecke operators

Would the USA be eligible to join the European Union?

Does the C++ standard guarantee that a failed insertion into an associative container will not modify the rvalue-reference argument?

Is there a word for returning to unpreparedness?

Sums of binomial coefficients weighted by incomplete gamma

What is the most difficult concept to grasp in Calculus 1?

What allows us to use imaginary numbers?

Who is the controller of a Pacifism enchanting my creature?

How to prevent criminal gangs from making/buying guns?

Can anybody tell me who this Pokemon is?

What should I do if actually I found a serious flaw in someone's PhD thesis and an article derived from that PhD thesis?

What should we do with manuals from the 80s?

How to programatically get all linked items for a given Sitecore item?

What is the proper name for a circle with a line through it?

What is the farthest a camera can see?

Escape Velocity - Won't the orbital path just become larger with higher initial velocity?

Bringing Power Supplies on Plane?

Will some rockets really collapse under their own weight?

Is the Microsoft recommendation to use C# properties applicable to game development?

Graphs for which a calculus student can reasonably compute the arclength

When was "Fredo" an insult to Italian-Americans?

how to append divs to a specific div in jquery?

How do JavaScript closures work?How do I check if an element is hidden in jQuery?How to append something to an array?Setting “checked” for a checkbox with jQuery?How do I redirect to another webpage?How to insert an item into an array at a specific index (JavaScript)?How to check whether a checkbox is checked in jQuery?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?“Thinking in AngularJS” if I have a jQuery background?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I am trying to dynamically fadeIn divs with a specific height and width and the same Id to a specific div with class myBox and randomly position them in myBox using the append() function. However divs are being appended inside and outside myBox.

This is my code. What is wrong?

var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

javascript jquery

share|improve this question

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  An element can only be appended to one position in the DOM, so the phrasing “are being appended inside and outside” makes rather little sense. You might have an optical effect here that is different from what you want, but it is hard to tell with this snippet only - so please provide a proper minimal reproducible example.
  
  – 04FS
  Mar 27 at 11:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code seems to work fine: jsfiddle.net/pkh9Lr7y. Can you give some more detail on what the exact issue is. The duplicated id attributes will be an issue later though.
  
  – Rory McCrossan
  Mar 27 at 11:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Guess it depends on the dimensions of your .myBox element, whether those randomly placed elements appear “inside” or “outside”. Since your max left coordinate value is 1200px and your boxes are 100px wide, your container element of course would have to be at least 1300px wide to contain all possible placements in that direction …
  
  – 04FS
  Mar 27 at 12:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please fix the title of your question, it is not relative to the actual question you asked.
  
  – L422Y
  Mar 28 at 19:44
  

  
  
  
  

add a comment | 

0

I am trying to dynamically fadeIn divs with a specific height and width and the same Id to a specific div with class myBox and randomly position them in myBox using the append() function. However divs are being appended inside and outside myBox.

This is my code. What is wrong?

var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

javascript jquery

share|improve this question

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  An element can only be appended to one position in the DOM, so the phrasing “are being appended inside and outside” makes rather little sense. You might have an optical effect here that is different from what you want, but it is hard to tell with this snippet only - so please provide a proper minimal reproducible example.
  
  – 04FS
  Mar 27 at 11:58
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Your code seems to work fine: jsfiddle.net/pkh9Lr7y. Can you give some more detail on what the exact issue is. The duplicated id attributes will be an issue later though.
  
  – Rory McCrossan
  Mar 27 at 11:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Guess it depends on the dimensions of your .myBox element, whether those randomly placed elements appear “inside” or “outside”. Since your max left coordinate value is 1200px and your boxes are 100px wide, your container element of course would have to be at least 1300px wide to contain all possible placements in that direction …
  
  – 04FS
  Mar 27 at 12:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Please fix the title of your question, it is not relative to the actual question you asked.
  
  – L422Y
  Mar 28 at 19:44
  

  
  
  
  

add a comment | 

I am trying to dynamically fadeIn divs with a specific height and width and the same Id to a specific div with class myBox and randomly position them in myBox using the append() function. However divs are being appended inside and outside myBox.

This is my code. What is wrong?

var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

javascript jquery

share|improve this question

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

share|improve this question

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

share|improve this question

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

edited Mar 27 at 11:56

Rory McCrossan

261k2929 gold badges224224 silver badges261261 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

asked Mar 27 at 11:54

Wijdan RamadanWijdan Ramadan

4644 bronze badges

2 Answers
2

active

oldest

votes

0

By reviewing your question I think Rory's comment gives you the answer, but I just enhaced it. Need to set overflow: hidden property of css on main div to stop showing the child objects outside of main div.

Please review the snippet, or Fiddle here. Just added background color and opacity for better presentation.

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

Hope this will help you.

share|improve this answer

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

add a comment | 

-1

Appending seems to be done correctly, but the first problem I can see here is that you are setting top and left attributes, but position attribute is not set.
You should add to your stylesheet something that will specify position attribute for the main container and child divs.
Example:

.myBox 
 position: absolute;


.myBox div 
 position: relative;

Also another thing. You specify $newdiv1 as jQuery object:

var $newdiv1 = $(...)

And then you again wrap it with $(). This should be enough:

$newdiv1.css(
 "top": top,
 "left": left
 );
$newdiv1.css('background-color', getRandomColor);

share|improve this answer

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55376578%2fhow-to-append-divs-to-a-specific-div-in-jquery%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

By reviewing your question I think Rory's comment gives you the answer, but I just enhaced it. Need to set overflow: hidden property of css on main div to stop showing the child objects outside of main div.

Please review the snippet, or Fiddle here. Just added background color and opacity for better presentation.

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

Hope this will help you.

share|improve this answer

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

add a comment | 

0

By reviewing your question I think Rory's comment gives you the answer, but I just enhaced it. Need to set overflow: hidden property of css on main div to stop showing the child objects outside of main div.

Please review the snippet, or Fiddle here. Just added background color and opacity for better presentation.

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

Hope this will help you.

share|improve this answer

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

add a comment | 

By reviewing your question I think Rory's comment gives you the answer, but I just enhaced it. Need to set overflow: hidden property of css on main div to stop showing the child objects outside of main div.

Please review the snippet, or Fiddle here. Just added background color and opacity for better presentation.

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

Hope this will help you.

share|improve this answer

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

$(function()
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) 
 var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
 var top = Math.random() * 700 - 30;
 var left = Math.random() * 1200;

 $($newdiv1).css(
 "top": top,
 "left": left
 );

 $($newdiv1).css('background-color', '#C00'); //getRandomColor);
 $(".myBox").append($newdiv1).fadeIn("slow");

);

.myBox 
 width: 500px;
 height: 300px;
 position: relative;
 background-color: orange;
 overflow: hidden;


.myBox div 
 position: absolute;
 opacity: 0.5;
 border: 1px solid green;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>

share|improve this answer

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

answered Mar 27 at 12:14

MehmoodMehmood

86055 silver badges1414 bronze badges

-1

Appending seems to be done correctly, but the first problem I can see here is that you are setting top and left attributes, but position attribute is not set.
You should add to your stylesheet something that will specify position attribute for the main container and child divs.
Example:

.myBox 
 position: absolute;


.myBox div 
 position: relative;

Also another thing. You specify $newdiv1 as jQuery object:

var $newdiv1 = $(...)

And then you again wrap it with $(). This should be enough:

$newdiv1.css(
 "top": top,
 "left": left
 );
$newdiv1.css('background-color', getRandomColor);

share|improve this answer

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges

add a comment | 

-1

Appending seems to be done correctly, but the first problem I can see here is that you are setting top and left attributes, but position attribute is not set.
You should add to your stylesheet something that will specify position attribute for the main container and child divs.
Example:

.myBox 
 position: absolute;


.myBox div 
 position: relative;

Also another thing. You specify $newdiv1 as jQuery object:

var $newdiv1 = $(...)

And then you again wrap it with $(). This should be enough:

$newdiv1.css(
 "top": top,
 "left": left
 );
$newdiv1.css('background-color', getRandomColor);

share|improve this answer

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges

add a comment | 

Appending seems to be done correctly, but the first problem I can see here is that you are setting top and left attributes, but position attribute is not set.
You should add to your stylesheet something that will specify position attribute for the main container and child divs.
Example:

.myBox 
 position: absolute;


.myBox div 
 position: relative;

Also another thing. You specify $newdiv1 as jQuery object:

var $newdiv1 = $(...)

And then you again wrap it with $(). This should be enough:

$newdiv1.css(
 "top": top,
 "left": left
 );
$newdiv1.css('background-color', getRandomColor);

share|improve this answer

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges

.myBox 
 position: absolute;


.myBox div 
 position: relative;

var $newdiv1 = $(...)

$newdiv1.css(
 "top": top,
 "left": left
 );
$newdiv1.css('background-color', getRandomColor);

share|improve this answer

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges

answered Mar 27 at 12:03

shemekhshemekh

811010 bronze badges