We Keep Coding

Modify DOM based on amount of divs after specific class

Is there any way to modify DOM based on amount div after specific class?
For example, if I have a div with a class called row and after that I have 4 div elements. Is there a way to change these 4 div element class depending on how many div elements there are?
Code:
<div class="row">
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
<div class="col-1-of-4">
some content
</div>
</div>
Another example I have a div class row again, but this time I want 3 div elements after that, then I would want these div elements to have a class called col-1-of-3, not col-1-of-4. If I would have just 2 div elements after that then class col-1-of-2 and if just one div element then no class at all.:
Code:
<div class="row">
<div class="col-1-of-3">
some content
</div>
<div class="col-1-of-3">
some content
</div>
<div class="col-1-of-3">
some content
</div>
</div>
Also these div elements with classes called col-1-of-4, col-1-of-3 and col-1-of-2 have their own div elements inside them, but they should stay like they were.
Is it possible to achieve with JavaScript or PHP?

You would need to write conditional blocks to handle this if I'm understanding you correctly (wanting a JS or PHP solution).
Note: It goes without saying that a similar solution can be completed with a CSS-only approach, as outlined here: Can CSS detect the number of children an element has?
Here's an example (using jQuery) with 3 sets of row's, with varying children (2, 3, 4):
$(function() {
var $rows = $(".row");
$rows.each(function() {
$row = $(this);
var $children = $(">div", $row),
total = $children.size();
$children.addClass("col-1-of-" + total);
});
});
.row {
border: 1px solid #000;
margin: 10px;
}
.row > div {
margin: 10px;
}
.row .col-1-of-2 {
border: 1px solid #f00;
}
.row .col-1-of-3 {
border: 1px solid #0f0;
}
.row .col-1-of-4 {
border: 1px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
</div>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
</div>
<div class="row">
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
<div>
some content
</div>
</div>
When you run the snippet, you must inspect the elements. I've added borders so you can see the difference.

Theres a number of ways to achieve this. I'd maybe add another class name so you can easily identify groups of divs, and differentiate between parent and child divs. Does this help you get where you're going? Basically find the number of children in a row and then concatenate that number into the class name.
var x = document.getElementsByClassName('row')[0].childElementCount
var element = document.getElementsByClassName('row')[0];
element.classList.add(`col-1-of-${x}`);

.row {
width: 100%;
display:flex;
flex-grow: 1;
margin-bottom: 2px;
}
.col {
float:left;
background: rgba(255,0,0,.2);
text-align: center;
margin-right: 2px;
}
.col:first-child:nth-last-child(1),
.col:first-child:nth-last-child(1) ~ .col{
width: calc(100% / 1);
}
.col:first-child:nth-last-child(2),
.col:first-child:nth-last-child(2) ~ .col{
width: calc(100% / 2);
}
.col:first-child:nth-last-child(3),
.col:first-child:nth-last-child(3) ~ .col{
width: calc(100% / 3);
}
.col:first-child:nth-last-child(4),
.col:first-child:nth-last-child(4) ~ .col{
width: calc(100% / 4);
}
.col:first-child:nth-last-child(5),
.col:first-child:nth-last-child(5) ~ .col{
width: calc(100% / 5);
}
<div class="row">
<div class="col">1</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
so this is with float, can be used in a sass/scss mixin to create code automagically. there should be also a flex solution but i dont have it at hand at the moment

Center align boxes inside DIV

I got the following box design.
These green color boxes are dynamically generated inside "col-md-10" div. In the second row, if there is no 3 boxes I want to center align the boxes. In the following case I want to have "Bi-monthly" box right underneath "Weekly" box.

<div class='col-md-10 text-center'>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='text-center center-block' style='width: 33.33333333%;'>1</div>
</div>
This is something I have done using bootstrap 3.x. This works fine. You cannot have the class name col-md-4 for the 4th block. Try this. It works.
In this example, text-center and center-block are bootstrap classes.
Also, try to minimize the use of inline styles. Because, in bootstrap, there are built-in class names for all these things. If you are using bootstrap, make use of it completely.
Cheers

You said
These green color boxes are dynamically generated inside "col-md-10" div
So you need to check condition your dynamic data length , I hope you want to display 3 block in a row then if there is one block in a row you want to set in center . You need to check dynamic data length and divisible 3 to check that can be a single block ....
In below I used col-xs-4 because stackoverfow snippet display is too small ....
var data = ['One','Two','Three','Four'];
var last = data.length - 1;
data.forEach((v,i) => {
var div = "<div class='col-sm-6 col-xs-4 col-md-4 bg-info '>"+v+"</div>";
if((last == i) && (i % 3 == 0)) {
div = "<div class='col-xs-offset-4 col-sm-6 col-xs-4 col-md-4 bg-info '>"+v+"</div>";
}
$(".test .row").append(div);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-10 test"><div class="row"></div></div>
</div>
</div>

Did you mean this?
<article class="col-md-12">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 img">...</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 img">...</div>
</article>
article{
text-align:center;
}
article .img{
display: inline-block;
float: none;
vertical-align: text-top;
}
Please try to see if this can help you.

I understand you are using Bootstrap.
But you can approach this very elegantly and concisely using CSS Flexbox.
Working Example:
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 0 60px;
padding: 0;
list-style-type: none;
}
li {
flex: 0 0 calc(33vw - 36px);
margin: 6px;
padding: 6px;
text-align: center;
border: 1px solid rgb(191, 191, 191);
}
<h1>Keep Scrolling down...</h1>
<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
</ul>
<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
<li>Quarterly</li>
</ul>
<ul>
<li>One-off</li>
<li>Weekly</li>
<li>Fortnightly</li>
<li>Bi-monthly</li>
<li>Quarterly</li>
<li>Half-yearly</li>
</ul>

Use this code
<div class='col-md-10 text-center'>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 text-center'>1</div>
<div class='col-md-4 offset-md-4'>1</div>
</div>

Keep div vertically centered to visible part of parent element

Currently I have a header element with the following code
<header>
<div class="container">
<div class="row" style="display: flex; justify-content: center">
<div class="col-xs-12 text-center" style="align-self: center">
<h1>My header</h1>
<span id="slogan">my slogan</span>
</div>
</div>
</div>
</header>
The header element starts at the beginning of body and ends 75 px short of the window bottom.
header {
height: calc(100vh - 75px);
}
When I start scrolling downwards, the header element starts moving up with the header and the slogan span. However, I want to keep the h1 and span elements vertically centered to the visible part of the header element, somewhat like on the iStockPhoto website. Notice how you scroll down the search form stays vertically centered to the background image container.
How do I implement something similar?

After a little bit of trial and error I created the effect with the following code.
<header>
<div class="container">
<div class="row" style="display: flex; justify-content: center">
<div class="col-xs-12 text-center" style="align-self: center">
<h1>Header</h1>
<span id="slogan">my slogan</span>
</div>
</div>
</div>
</header>
<section style="height: 1000px">
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
</section>
$(function() {
var initialTitleHeight = $("header h1").position().top,
initialSloganBottom = $("header span").position().top + $("header span").height(),
headerHeight = $("header").height(),
headerMaxMargin = headerHeight - (initialSloganBottom - initialTitleHeight + 50);
$(window).scroll(function(event) {
var scroll = $(window).scrollTop(),
marginTop = (initialTitleHeight + scroll < headerMaxMargin) ? initialTitleHeight + scroll : headerMaxMargin;
$("header h1").css({
marginTop: marginTop + "px"
});
});
})
header {
height: calc(100vh - 75px);
background-color: #F90;
.container, .row {
height: 100%;
}
}
You can try it here.

Apply colored circle on top of the clicked image

I have a page that when loaded displays this:
The HTML for this is as follows (the below is built within a foreach statement in the view as I'm using MVC 5)
<div class="boxTop"></div>
<div id="panel1" class="box">
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img data-name="blackcherry" alt="cherries.png" data-id="1" src="/Content/Images/FlavourLab/cherries.png">
</div>
<div class="col-md-6 col-xs-6">
<img data-name="coconut" alt="coconut" data-id="2" src="/Content/Images/FlavourLab/coconut.png">
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img data-name="mango" alt="mango" data-id="3" src="/Content/Images/FlavourLab/mango.png">
</div>
<div class="col-md-6 col-xs-6">
<img data-name="strawberries" alt="strawberries" data-id="4" src="/Content/Images/FlavourLab/strawberries.png">
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
What I'm trying to do is when one of those images are clicked I need to place the following css circle on top of it to show its been selected the CSS for the circle is like this
#circle1 {
background: none repeat scroll 0 0 green;
height: 80px;
width: 80px;
opacity: 0.4;
}
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}
Which gets rendered like this:
<div class="circle" id="circle"></div>
My current jQuery is like this:
$("#panel1 row img").click(function () {
var id = $(this).attr("data-id").val();
alert(id);
});
2 Things:
The jQuery does not fire, I'm unsure why. Can someone explain this?
How would I add the above CSS Circle to the clicked image?

This #panel1 row img is a wrong selector, change it to #panel1 .row img - note class name selector .row
Change your click handler to do this $(this).toggleClass("circle");
.circle class shall look like:
.circle {
border-radius: 50%;
border: 2px solid red;
overflow: visible;
}

Try something like this (the "row" class missed the dot in the selector)
$("#panel1 .row img").click(function () {
$(this).addClass('circle');
});

Toggle sidebar in bootstrap3?

I'm trying to get a togglable sidebar:
No sidebar:
>> | Main text
| goes here
With sidebar:
H1 << | Main text
H2 | goes here
(here is an example of the behaviour: http://pythonhosted.org/cloud_sptheme -- see the button on sidebar. It's not easy to use its code base, because it's not bootstrap-based)
I started from a working example which uses Bootstrap 2 and jQuery 1.8: jsfiddle, SO question, and tried to make it work on Bootstrap 3. Here's a code (code on bootply):
javascript:
$.asm = {};
$.asm.panels = 1;
function sidebar(panels) {
$.asm.panels = panels;
if (panels === 1) {
$('#content').removeClass('col-md-9');
$('#content').addClass('col-md-12');
$('#sidebar1').removeClass('show');
$('#sidebar1').addClass('hide');
} else if (panels === 2) {
$('#content').removeClass('col-md-12');
$('#content').addClass('col-md-9');
$('#sidebar1').removeClass('hide');
$('#sidebar1').addClass('show');
}
}
$('#toggleSidebar').click(function() {
if ($.asm.panels === 1) {
$('#toggleSidebar').addClass('fa-backward');
$('#toggleSidebar').removeClass('fa-forward');
return sidebar(2);
} else {
$('#toggleSidebar').removeClass('fa-backward');
$('#toggleSidebar').addClass('fa-forward');
return sidebar(1);
}
})
css:
#toggleSidebar {
position:fixed;
display:block;
left:0;
top:45px;
color:#779DD7;
padding:2px 4px;
}
hide {
display: none;
}
show {
display: inherit;
}
html:
<div class="container">
<div class="row">
<div class="col-md-3 hide" id="sidebar1">
<div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">
Toc goes here.
</div>
</div>
<div class="col-md-12" id="content">
Main text goes here.
</div>
</div>
<a id="toggleSidebar" href="#toggleSidebar1" class="fa fa-forward"</a>
</div>
Edit:
Off canvas is not what I need: it doesn't conserve the horizonatal space, it shifts the div to the right, and the div gets out of the screen. Chanding col-md-9 to col-md-12 and back -- is the best thing I can think of for a problem at hand. This should be simple javascript, which I'm not good at.

I think you're looking for a "off-canvas" sidebar. Here are 2 off-canvas Bootstrap examples that slide in from the left..
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
Both example use media queries to detect the browser and place the sidebar accordingly.

Have a look at http://getbootstrap.com/examples/offcanvas/. It is an offcanvas example made by bootstrap itself.
I also love this article http://jasonweaver.name/lab/offcanvas/.

Oh I solved it:
js:
$(document).ready(function(){
$.asm = {};
$.asm.panels = 2;
$('#toggleSidebar').click(function(){
if ($.asm.panels === 1) {
$('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-backward'});
$('#content').attr({'class': 'col-md-9'});
$('#sidebar1').show();
$.asm.panels = 2;
} else {
$('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-forward'});
$('#content').attr({'class': 'col-md-12'});
$('#sidebar1').hide();
$.asm.panels = 1;
}
});
});
css:
#toggleSidebar {
position:fixed;
display:block;
left:0;
top:45px;
color:#779DD7;
padding:2px 4px;
}
html:
<div class="container">
<div class="row">
<div class="col-md-3" id="sidebar1">
<div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">
Toc goes here.
</div>
</div>
<div class="col-md-9" id="content">
Main text goes here.
</div>
</div>
<button type="button" id="toggleSidebar" class="btn btn-primary"><span class="glyphicon glyphicon-backward"></span></button>
</div>
Demo on bootply.