Develop Reference

How to equally space out divs after certain elements have a set width

I must create table without using <table>; only <div>. How I can set width (in percent) on some blocks so that others divide the rest of the space equally.
I can do it with JS but I think its possible with html/css only.

With flexbox it's rather easy to create a table like structure. Specify a flex basis for the table cells (boxes) + a grow and shrink to make them resize properly.
Check this fiddle with the demo :)
https://jsfiddle.net/xs0pmgbL/
HTML code:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
And the CSS code:
#container {
display: flex;
flex-wrap: wrap;
}
.box {
border: 1px solid gray;
background: orange;
flex: 1 1 200px;
height: 100px;
}

Get throu each div and change class on Button-click

Heyo,
I cant figure out how to make a Script work like this: I want to have a Button that changes the Class of div's on click. But I don't want to make it change all the div's at the same time. I only want to change the first div on the first click, the second div on the second click and so on and so forth.
I've allredy tryed it but failed. Heres the code:
$('button').click(function() {
// give first $(.div).addClass('active') on first click, second div on second click ...
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

With the .eq method, you can pass the index of the element you want, and the jQuery collection of only that element will be returned. Start with an index of 0, increment it on every button click, and add the class to the appropriate element:
let i = 0;
$('button').click(function() {
$('.div').eq(i).addClass('active');
i++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

Here a little one liner that grabs the first element that doesn't has the active class.
$('button').click(function() {
$('.div:not(.active):first').addClass('active');
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="innner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

You can find the first element and add the active class on that. Then rotate the class so on.
$('button').click(function() {
var activeElem = $('.outer').find('.inner.active');
if(activeElem.length){
activeElem.removeClass('active');
activeElem.next('.inner').addClass('active');
} else {
$('.outer').find('.inner').first().addClass('active');
}
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>
</div>

Increment for each click and apply:
var count = 0;
$('button').click(function() {
$('.inner:eq('+count+')').addClass('active');
count++;
});
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
<div class="div">Somebody</div>
</div>
<div class="inner">
<div class="div">once</div>
</div>
<div class="inner">
<div class="div">told</div>
</div>
<div class="inner">
<div class="div">me</div>
</div>
<button>Next</button>

Fill divs with content from hidden directory

I have a hidden directory (.directory) with several divs (.content) and different content in it.
Now on pageload, I want to randomly pick a div (.content) from the directory and place it in the lower, visible divs (.box).
The hidden directory has more divs (.content) than should be shown at the end in the visible divs (.box). For example, I have 20 hidden content divs, but just randomly 3 should be shown.
So my solution would be, that JS counts on pageload, how much divs named ".box" and then randomly pick the counted amount of divs named ".content" from the directory and place in the divs named ".box". Would that be the right way?
But I really have no idea, how to do that :D
I have prepared a fiddle: https://jsfiddle.net/m5sqwrpg/4/
Here is the HTML
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
And the CSS:
.directory {
display: none;
}
.content {
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
Thank you so much!

Here is something that should get you started:
$(document).ready(function(){
$(".box").each(function(){
var contentDivs = $(".directory .content");
var contentToPick = Math.floor(Math.random()*(contentDivs.length));
$(contentDivs[contentToPick]).appendTo($(this));
});
});
.directory {
display: none;
}
.content {
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.0.min.js"></script>
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
I don't guarantee it will work the way you envision, so it will be good to give it a proper test.
It should basically pull a random div from the ".directory" div for each ".box".
It relies on the fact, that when we select a div from ".directory" we actually remove it from ".directory" to put it in ".box" so even if the random function returns the same index, on the second pass, the div there will be different.

EDIT : #Pavel Donchev solution is better :)
It's better for you to change the CSS style of your elements to display them, or not.
To choose a define number of random elements, you can do it like this :
function randomContent(numberOfElements){
var i = 0;
var randomElements = $(".content").get().sort(function() {
return Math.round(Math.random()) - 0.5;
}).slice(0, numberOfElements);
while(i < randomElements.length) {
if($(randomElements[i]).hasClass('show')){
break;
}
else{
$(randomElements[i]).addClass('show');
i++;
}
}
}
randomContent(3);
.content {
display: none;
margin-bottom: 20px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.show{
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directory">
<div class="content">
<div class="headline">Headline A</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline B</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline C</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline D</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline E</div>
<div class="text">Some kind of Content</div>
</div>
<div class="content">
<div class="headline">Headline F</div>
<div class="text">Some kind of Content</div>
</div>
</div>
Working JSFiddle : https://jsfiddle.net/2m9tdgn2/

Hi as per undersanding below code will solve your problem easily just put that code under script tag. also include jquery.min.js in your html. to avoide $ is undefined :)
$(document).ready(function(){
drawRandomDivContent();
});
function drawRandomDivContent()
{
var container=$(".content");
var array=[];
var dataarray=[]
for(var i=0;i<container.length;i++)
{
var number=getRandomInt(container.length);
if($.inArray(number,array)==-1)
{
var selectedDiv=container[number];
dataarray.push(selectedDiv);
array.push(number);
if(array.length==3)
break;
}
}
var destinationdiv=$(".box");
for(var i=0;i<dataarray.length;i++)
destinationdiv[i].innerHTML=dataarray[i].innerHTML;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}

2 divs on the same block show one hide the other onclick and loop

I have 2 divs on a block of content, one active and the other one is hidden.
I want to click on the div, hide the first one and show the second one.
Then when I click on the second one to hide it and show the first one.
I have however 12 more blocks with the same estructure and classes that need to have this functionality.
For the record I haven't make it work at all not even on one div.
<div class="feature-list-item">
<div class="first-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="second-one">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
And here is css:
.first-one {display:block;}
.second-one {display:none;}
I want to consider the easiest approach jquery, javascript it doesn't matter

Here is an example with isolated lists:
$(document).ready(function(){
$('.block').on('click', '.item', function(e){
$(this)
.removeClass('active')
.siblings('.item')
.addClass('active');
});
});
.blue .item {
background: blue;
}
.green .item {
background: green;
}
.item {
padding: 10px;
margin: 10px;
color: white;
display: none;
}
.item.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block blue feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 1<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 2<p/>
</div>
</div>
</div>
<div class="block green feature-list-item">
<div class="item active first-one">
<div class="imgbox">
<p>Box 3<p/>
</div>
</div>
<div class="item second-one">
<div class="imgbox">
<p>Box 4<p/>
</div>
</div>
</div>

This is the solution I found. Hide clicked and show next. I hope you are trying to show next but not specific one, if specific you trying to show then you gonna change the code.
DEMO HERE
HTML
<div class="click show">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
<div class="click hidden">
<div class="imgbox">
<p>some content<p/>
</div>
</div>
CSS
.show{
width:200px;
height:100px;
background-color:red;
}
.hidden{
display:none;
}
JS
$(document).ready(function(){
$('.click').click(function(){
$(this).removeClass('show');
$(this).addClass('hidden');
$(this).next('.hidden').addClass('show');
$(this).next('.hidden').removeClass('hidden');
});
});

HTML news feed with SQL info

I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>

clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>