We Keep Coding

Changing position of div to float left,right alternatively using a for loop

So I need my images to float left and right alternatively and the current code that I'm using doesn't seem to work ,Not sure where I'm going wrong. I'm a newbie, So any help to point me in the right direction or a better logic to implement this would be helpful.
Much appreciated thanks in advance .
var positions = ["left","right"];
var elements = document.getElementsByClassName("CollegeIcon");
var len = positions.length;
var i;
for (i = 0; i < elements.length; i++) {
elements.style.cssFloat = positions[i];
}
.CollegeIcon{
position:relative;
top:150px;
margin-left:30px;
margin-bottom:0px;
border:2px solid red;
}
.CollegeIcon:after {
background-color: red;
content: "";
display: block;
height:34px;
position: absolute;
bottom: 100px;
width: 2px;
left: 50px;
}
.CollegeIcon:first-child:after {
display: none;
}
<div class='CollegeIcon'></div>
<div class='CollegeIcon'></div>
<div class='CollegeIcon'></div>
<div class='CollegeIcon'></div>

There are two problems:
You're trying to use the style property on elements rather than on one of its entries. You need to index into elements.
elements[i].style.cssFloat = positions[i];
// ^^^
You're not allowing for the fact there are more entries in elements than in positions. To wrap around in a zero-indexed list (like an array), you can use the remainder operator (%) with the length of the array. So:
elements[i].style.cssFloat = positions[i % positions.length];
// ^^^ ^^^^^^^^^^^^^^^^^^^
Updated snippet, but you have to look at the updated DOM to see that it works:
var positions = ["left","right"];
var elements = document.getElementsByClassName("CollegeIcon");
var len = positions.length;
var i;
for (i = 0; i < elements.length; i++) {
elements[i].style.cssFloat = positions[i % positions.length];
}
.CollegeIcon{
position:relative;
top:150px;
margin-left:30px;
margin-bottom:0px;
border:2px solid red;
}
.CollegeIcon:after {
background-color: red;
content: "";
display: block;
height:34px;
position: absolute;
bottom: 100px;
width: 2px;
left: 50px;
}
.CollegeIcon:first-child:after {
display: none;
}
<div class='CollegeIcon'></div>
<div class='CollegeIcon'></div>
<div class='CollegeIcon'></div>
<div class='CollegeIcon'></div>

I am a bit unclear about your query but I hope you need something like this.
var positions = ["left","right"];
var elements = document.getElementsByClassName("CollegeIcon");
var len = positions.length;
var i;
for (i = 0; i < elements.length; i++) {
elements[i].style.cssFloat = positions[i%2];
}
.CollegeIcon{
position:relative;
top:150px;
margin-left:30px;
margin-bottom:20px;
border:2px solid red;
width: 20px;
height: 50px;
clear: both;
}
<div class='CollegeIcon'>1</div>
<div class='CollegeIcon'>2</div>
<div class='CollegeIcon'>3</div>
<div class='CollegeIcon'>4</div>
Added some css and corrected below line in js:
elements[i].style.cssFloat = positions[i%2];

What about doing it in CSS with :nth-child?
.CollegeIcon:nth-child(odd) {
float: left;
}
.CollegeIcon:nth-child(even) {
float: right;
}

How to extend single div to the next row

We have a container (red), and a child div (blue). On increasing the child div's width, I want the child div to come to the next row instead of continuing on the same row.This is what is happening now :
This is what is needed :
.container{
width:100px;
height:50px;
background:red;
position:absolute;
}
.child{
width:120px;
height:20px;
background:blue;
margin:5px 5px 0px 5px;
position: relative;
}
<div class="container">
<div class="child"></div>
</div>
Any solution to the above stated issue will be very helpful :)
Thanks in advance!

You will not be able to do that with a single rectangular div but you can do something like this.
Hope this helps.
This is another solution not sure if it fits in your case.
.parent {
width: 500px;
display: grid;
grid-template-columns: repeat(auto-fill, 186px);
background-color: red;
}
.parent>* {
background-color: blue;
height: 50px;
border: 1px solid white;
color: white;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>

I have no idea to the bigger picture of your problem. However here is a hackish way to do it using HTML, CSS and Javascript.
What the javscript does is:
Get the width of the container and the child
Check if the child has a higher width than the container
If the above is true, get the offset (childWidth - containerWidth)
Reduce the child's width and make it equal to the container
Create a div and give it a width equal to the offset and give it a height equal to the child.
Append the div to the container
var container = document.querySelector('.container');
var containerWidth = container.offsetWidth;
var child = document.querySelector('.child');
var childWidth = child.offsetWidth;
(function() {
extendDivToNextRow();
})();
function extendDivToNextRow() {
let offset;
let secondRow;
if (childWidth > containerWidth) {
sliceChildDiv();
extendToSecondRow();
}
}
function getChildOffset() {
return childWidth - containerWidth;
}
function sliceChildDiv() {
const newWidth = childWidth - getChildOffset();
child.setAttribute("style", `width:${newWidth}px`);
}
function extendToSecondRow() {
const secondRow = createSecondRow();
container.appendChild(secondRow);
}
function createSecondRow() {
const row = document.createElement('div');
row.setAttribute("style", `width: ${getChildOffset()}px; height: 20px; background: blue`);
return row;
}
* {
margin: 0px;
}
.container {
width: 100px;
height: 50px;
background: red;
position: absolute;
}
.child {
width: 120px;
height: 20px;
background: blue;
position: relative;
}
<div class="container">
<div class="child"></div>
</div>

Change the color to the clicked element

I want to change the color of the clicked div element. If I change the color with the color is transferred to each next click div.
How to click on the div element to change the color of that div element. First click on some div and then change color?
<html>
<head>
<style>
html, body {
overflow: display;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
}
#some_id1{
width: 50px;
height: 50px;
background-color: red;
}
#some_id2{
width: 50px;
height: 50px;
background-color: red;
}
#some_id3{
width: 50px;
height: 50px;
background-color: red;
}
#some_id4{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<input type="color" id="divbackgroundcolor" onchange="myFunction()">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>
<script>
var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i <= divCount; i += 1) {
div[i].onclick = function(e) {
var x = document.getElementById("divbackgroundcolor").value;
document.getElementById(this.id).style.backgroundColor = x;
};
}
</script>
</body>
</html>

Ok, so first, I don't understand why are you using id on each div, while you are having the same style for each. better do it with class
Secondly, I have looked it up a little, and what I discovered people do, is just hide the color picker (input) and trigger it on click.
In your piece of code, it would look something like this:
var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId
for (var i = 0; i < divCount; i += 1) {
div[i].onclick = function(e) {
clickedDivId = this.id
document.getElementById("divbackgroundcolor").click()
};
}
function colorChange(){
var x = document.getElementById("divbackgroundcolor").value;
document.getElementById(clickedDivId).style.backgroundColor = x;
}
html, body {
overflow: display;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: white;
}
#divbackgroundcolor {
position: absolute;
opacity: 0;
z-index: -1;
}
.some_style {
width: 50px;
height: 50px;
background-color: red;
}
<input type="color" id="divbackgroundcolor" onchange="colorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
<div class="some_style" id="some_id3"></div>
<div class="some_style" id="some_id4"></div>
<div class="some_style" id="some_id5"></div>
Notice that what I did is saved the id of the div I clicked on, so I could tell on which div I have clicked.
Hope that is the answer you are looking for.
Good luck.

Your example have only to mistakes:
In HTML remove the "onclick" in your "input"
And in JS your "for" loop use "i < divCount"
Change just those lines and will work!

While loop and Jquery append Not working [duplicate]

This question already has answers here:
Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
(2 answers)
Closed 3 months ago.
First question here! Hope you can help me. I'm trying to make 16 squares side by side using a Javascript while loop but I don't understand why it doesn't work. I'm new to Javascript and jQuery so please excuse me if the answer is too simple. Thank you in advance.
$(document).ready(function() {
var divs = $("<div class='square'></div>");
var i = 0;
while (i < 17) {
$("#wrapper").append(divs);
i++;
}
});
#wrapper {
width: 600px;
margin: 70px auto;
}
.square {
width: 40px;
height: 40px;
display: inline-block;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div class="square"></div>
</div>
</body>
strong text

In the loop, in each iteration you need to create a new object, else it will be just like replacing the same element so many times
So you can just clone() the element in the loop
$(document).ready(function() {
var divs = $("<div class='square'></div>");
var i = 0;
while (i < 17) {
$("#wrapper").append(divs.clone());
i++;
}
});
#wrapper {
width: 600px;
margin: 70px auto;
}
.square {
width: 40px;
height: 40px;
display: inline-block;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="square"></div>
</div>

updating this part of your code :
var divs = "<div class='square'></div>";
so your code will be :
$(document).ready(function() {
var divs = "<div class='square'></div>";
var i = 0;
while (i < 17) {
$("#wrapper").append(divs);
i++;
}
});
#wrapper {
width: 600px;
margin: 70px auto;
}
.square {
width: 40px;
height: 40px;
display: inline-block;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<div class="square"></div>
</div>
</body>

You want to append div so just write html code in divs var
change your code to
var divs = "<div class='square'></div>"
Instead of
var divs = $("<div class='square'></div>");

Clicking in the top corners of my webpage causes the flex boxes to misbehave

I have been making a simple page using flexboxes that should expand one flex box to the majority of the page on a click. However, the page will occasionally make the sizes of all of the flexboxes equal (see the below picture). I've only notices it when I click in the corners of the page on the yellow or blue sections. Does anyone have an idea of what is going on?
Edit: Added relevant code and removed JS Bin links
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link href="/stylesheets/flex.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="yel" class="page selected">
<h2>Home
</h2>
</div>
<div id="green" class="page">
<h2>About Me
</h2>
</div>
<div id="red" class="page">
<h2>Portfolio
</h2>
</div>
<div id="blue" class="page">
<h2>Playground
</h2>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-flex-flow: row;
}
.selected {
min-width: 90%;
}
#red {
background-color: #f00;
}
#yel {
background-color: #ff0;
}
#green {
background-color: #008000;
}
#blue {
background-color: #00f;
}
.page {
flex: 1;
min-width: auto;
min-height: 100%;
-webkit-transition-duration: 750ms;
}
.page h2 {
font: 20px Helvetica, Tahoma, sans-serif bold;
color: #ccc;
-webkit-transform: rotate(90deg);
margin: 5px;
}
.content {
margin: 10% auto auto auto;
padding: 10px;
width: 90%;
height: 50%;
border: 1px solid #000;
}
JS
var $ = function(sel, e) {return (e || document).querySelector(sel)};
var $$ = function(sel, e) {return (e || document).querySelectorAll(sel)};
var boxes = $$('.page');
var links = $$('.nav');
var flexTransitionTo = function flexTransitionTo(el) {
if(!el.classList.contains('selected')) {
$('.selected').classList.remove('selected');
el.classList.add('selected');
}
};
for(var i = 0; i < boxes.length; i++) {
var el;
boxes[i].addEventListener('click', function(event) {
el = event.target;
flexTransitionTo(el);
});
}
for(var i = 0; i < links.length; i++) {
var el;
var pageEl;
links[i].addEventListener('click', function(event) {
el = event.target;
pageEl = $(el.dataset.page); //should get the page I want
flexTransitionTo(pageEl);
});
}

I can tell you the why, but I can't give you the fix (my JavaScript-fu is weak). The problem is that when you click on the h2 element (or probably any other descendant of the page element), it is intercepting the click event and it has the selected class applied to it. Because the selected class is removed from all page elements, none of them are set to selected.