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>
Related
The collapsible header on my website doesn't seem to be working, and I'm wondering if it's the way I have the HTML setup? I'm trying to get the header to collapse from 125px down to 75px on scroll, but something I can't seem to get it to work. I've seen the JavaScript I'm using work on other websites, so I'm not entirely clear on what is going on with this site. Does anyone see any issues with my code? It seems like it should work fine to me. Much appreciation!
<header id="masthead" class="site-header">
<section class="header-top" id="header-top">
<div class="container content">
<div class="top-search">
<?php get_search_form( ); ?>
</div>
<div class="site-branding">
<img class="logo" src="<?php echo get_template_directory_uri( ) . '/logo.svg'?>">
</div>
<div class="header-right">
<p class="contribute">Contribute</p>
</div>
</div>
<div class="container">
<div class="top-search">
</div>
<div class="site-branding">
</div>
<div class="header-right">
</div>
</div>
<div class="container header-top-block" id="titles" style="display:block">
<h3 class="header-block-heading-line" id="soup">
<a href="<?php echo home_url(); ?>" target="">
Hello
</a>
</h3>
</div>
</div>
</div>
</div>
</section> <!-- end header main -->
<section class="header-nav">
<div class="container borders">
</div>
</section>
</header><!-- #masthead -->
.header-top {
width: 100%;
z-index: 2;
position: relative;
background: $white;
position:fixed;
min-height: 125px;
&.collapsed {
min-height: 50px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 100) {
if(!document.getElementById("header-top").classList.contains('collapsed')){
document.documentElement.scrollTop += 100;
document.getElementById("header-top").className = "header-top collapsed";
}
} else {
if(document.getElementById("header-top").classList.contains('collapsed')){
document.getElementById("header-top").className = "header-top";
document.documentElement.scrollTop = 0;
}
}
}
Seems like you forgot to add } after &.collapsed declaration. Also If you are using plain CSS this code will not work (you are using SCSS syntax)
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
I want layout like this
desktop
| 1 | 2 | 3 |
tablet and mobile
| 2 |
| 1 |
| 3 |
This can be done via JQuery Dom manipulation.
$(window).resize(function () {
if ($(window).width() < 480) {
$("#one").insertAfter($("#two"));
} else {
$("#two").insertAfter($("#one"));
}
});
<div class="row">
<div id="one" class="col-sm-4">1</div>
<div id="two" class="col-sm-4">2</div>
<div id="three" class="col-sm-4">3</div>
</div>
Above jQuery code block will insert div with id one after div with id two if window size goes below 480px so, div two will come on top and layout will be like 2,1,3
Else it will arrange the divs as per the order like 1,2,3.
See it here: https://jsfiddle.net/gt8a3f7x/2/
Make a wrapper div with class row, then inside put divs with classes col-md-12 col-lg-4
It will be 12 column width(full width) for medium and small screens, and for desctop it will be 4 column width(4 *3 = 12)
Thats it!
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">2</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">3</div>
</div>
Arrange the blocks as they should be on the mobile or tablet.
Use offsetting columns to change the order of the columns on a wide screen:
<div class="col-sm-4 col-sm-push-4">2</div>
<div class="col-sm-4 col-sm-pull-4">1</div>
<div class="col-sm-4">3</div>
Please check the result:
/* Decorations */
.row.decorations > div {
color: #fff;
font-size: 28px;
font-weight: bold;
min-height: 80px;
padding-top: 6px;
}
.row.decorations > div:nth-of-type(1) { background: #9c6; }
.row.decorations > div:nth-of-type(2) { background: #f93; }
.row.decorations > div:nth-of-type(3) { background: #69c; }
/* fix SO stick navigation ;) */
#media (min-width: 768px) { .row.decorations { margin-top: 75px; } }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row decorations">
<div class="col-sm-4 col-sm-push-4">2</div>
<div class="col-sm-4 col-sm-pull-4">1</div>
<div class="col-sm-4">3</div>
</div>
</div>
I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>
You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>
From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>
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');
});