New button after all elements have been loaded - javascript

4 rows are stored here. Each new row is displayed when the LOAD MORE button is pressed. Each row is displayed as it should and the code works without problems. When the end is reached, a Go button should appear pointing to another page.
What's the best way to do this? I have included the code as an example.
function loadNextSeven() {
let moveItems = $('#off-items-bucket .item').slice(0,7);
moveItems.hide().appendTo('#on-items-bucket').fadeIn('medium');
}
function isThisTheEnd() {
let numberLeft = $('#off-items-bucket .item').length;
if(numberLeft == 0) {
$('#load-more').hide();
}
}
$(document).ready(function() {
loadNextSeven();
isThisTheEnd();
});
$('#load-more').click(function() {
loadNextSeven();
isThisTheEnd();
});
.items-wrapper {
width: 800px;
margin: 0 auto;
}
#off-items-bucket {
display: none; /* REALLY THE ONLY LINE YOU NEED*/
background-color: palegreen;
box-shadow: 0 0 0 5px #000;
float:left;
box-sizing: border-box;
margin: 20px 0;
width:100%;
}
.item {
width: 100px;
height: 100px;
float:left;
margin: 5px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
button {
width:200px;
margin: 0 auto;
padding:10px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-wrapper">
<div id="on-items-bucket"></div>
<div id="off-items-bucket">
<!-- put the items in the bucket -->
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
</div>
<button id="load-more">LOAD MORE</button>
</div>


One way is to just rename the button when you get to the end. Then you can just test it in the $('#load-more').click(function() function.
First, move the numberLeft variable out of it's function so that other functions can access it. When numberLeft === 0 just rename the button with $('#load-more').text("GO ->")
let numberLeft
function isThisTheEnd() {
numberLeft = $('#off-items-bucket .item').length;
if (numberLeft === 0) {
$('#load-more').text("GO ->");
}
}
In this function, just test for numberLeft and react accordingly.
$('#load-more').click(function() {
if (numberLeft === 0) {
alert("Go to next page")
} else {
loadNextSeven();
isThisTheEnd();
}
});
function loadNextSeven() {
let moveItems = $('#off-items-bucket .item').slice(0, 7);
moveItems.hide().appendTo('#on-items-bucket').fadeIn('medium');
}
let numberLeft
function isThisTheEnd() {
numberLeft = $('#off-items-bucket .item').length;
if (numberLeft == 0) {
$('#load-more').text("GO ->");
}
}
$(document).ready(function() {
loadNextSeven();
isThisTheEnd();
});
$('#load-more').click(function() {
if (numberLeft === 0) {
alert("Go to next page")
} else {
loadNextSeven();
isThisTheEnd();
}
});
.items-wrapper {
width: 800px;
margin: 0 auto;
}
#off-items-bucket {
display: none;
/* REALLY THE ONLY LINE YOU NEED*/
background-color: palegreen;
box-shadow: 0 0 0 5px #000;
float: left;
box-sizing: border-box;
margin: 20px 0;
width: 100%;
}
.item {
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
button {
width: 200px;
margin: 0 auto;
padding: 10px;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="items-wrapper">
<div id="on-items-bucket"></div>
<div id="off-items-bucket">
<!-- put the items in the bucket -->
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item yellow"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item green"></div>
</div>
<button id="load-more">LOAD MORE</button>
</div>

Related

How to put div stack to bottom of the page once clicked with animation without affecting style

i wanted to put the clicked div to bottom of the stack without loosing any styles with some animation
Question: when i clicked a div it should go to bottom without loosing any styles
here is codepen:https://codepen.io/anon/pen/YjByzo
$(function(){
$('.box').on('click',function(){
var cloned = $(this).clone();
$(this).remove();
$('#wrapper').append(cloned);
});
});
div.box{
height: 100px;
width: 200px;
background:red;
display: inline-block;
}
div.box:active{
background:yellow;
}
div.box2{
background:green;
}
div.box3{
background:orange;
}
div.box{
text-align:center;
color:#fff;
font-size:26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<!-- for box 2 -->
<div class="box box2">7</div>
<div class="box box2">8</div>
<div class="box box2">9</div>
<div class="box box2">10</div>
<div class="box box2">11</div>
<div class="box box2">12</div>
<!-- for box 3-->
<div class="box box3">13</div>
<div class="box box3">14</div>
<div class="box box3">15</div>
<div class="box box3">16</div>
<div class="box box3">17</div>
<div class="box box3">18</div>
</div>

Try use $(this).insertAfter($("#wrapper .box:last")); I believe it solves the problem that you can only click them once.
Demo
$(function() {
$('.box').on('click', function() {
$(this).insertAfter($("#wrapper .box:last"))
});
});
div.box {
height: 100px;
width: 200px;
background: red;
display: inline-block;
}
div.box:active {
background: yellow;
}
div.box2 {
background: green;
}
div.box3 {
background: orange;
}
div.box {
text-align: center;
color: #fff;
font-size: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<!-- for box 2 -->
<div class="box box2">7</div>
<div class="box box2">8</div>
<div class="box box2">9</div>
<div class="box box2">10</div>
<div class="box box2">11</div>
<div class="box box2">12</div>
<!-- for box 3-->
<div class="box box3">13</div>
<div class="box box3">14</div>
<div class="box box3">15</div>
<div class="box box3">16</div>
<div class="box box3">17</div>
<div class="box box3">18</div>
</div>

You can just append "this" in the click event function. Also, by floating the DIVs, they won't have the extra space added and the style remain the same after click.
$(function(){
$('.box').on('click',function(){
$('#wrapper').append(this);
});
});
div.box{
height: 100px;
width: 200px;
background:red;
display: inline-block;
text-align:center;
color:#fff;
font-size:26px;
margin: 0px;
float: left;
}
div.box:active{
background:yellow;
}
div.box2{
background:green;
}
div.box3{
background:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<!-- for box 2 -->
<div class="box box2">7</div>
<div class="box box2">8</div>
<div class="box box2">9</div>
<div class="box box2">10</div>
<div class="box box2">11</div>
<div class="box box2">12</div>
<!-- for box 3-->
<div class="box box3">13</div>
<div class="box box3">14</div>
<div class="box box3">15</div>
<div class="box box3">16</div>
<div class="box box3">17</div>
<div class="box box3">18</div>
</div>

Use the position:fixed; property in your clicked div.
Hope this helps.

Tab dislocation for custom image expanding preview

I am trying to make expanding image preview similar to this but as I move from left to right clicking on the circular div, the tab shifts down from the pointer. I don't understand why this is happening.
Please refer my fiddle link.
Please help me with this. I am unable to figure out where I am going wrong.
And is there any way to change the pointer color dynamically based on the color of the circular div?
Thankyou.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.full-width-div {
position: relative;
width: 100%;
left: 0;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: auto;
margin: 0 0 0 -12px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 12px 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
.col-custom-eight {
position: relative;
float: left;
width: 12.5%;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="full-width-div container">
<div class="row">
<div class="col-md-12">
<div class="wrap">
<div class="row">
<div class="col-custom-eight col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">1</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center caption">2</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #795548;"></div>
<div class="text-center caption">3</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FF9800;"></div>
<div class="text-center caption">4</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">5</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">6</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #00BCD4;"></div>
<div class="text-center caption">7</div>
</a>
</div>
<div class="col-custom-eight col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #8BC34A;"></div>
<div class="text-center caption">8</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab1" class="tab" style="background-color: #00BCD4">Tab 1
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab2" class="tab" style="background-color: #FFC107">Tab 2
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab3" class="tab" style="background-color: #795548">Tab 3
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab4" class="tab" style="background-color: #FF9800">Tab 4
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab5" class="tab" style="background-color: #00BCD4">Tab 5
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab6" class="tab" style="background-color: #8BC34A">Tab 6
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab7" class="tab" style="background-color: #00BCD4">Tab 7
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="tab8" class="tab" style="background-color: #8BC34A">Tab 8
<div class="col-md-3"><img src="/img/analytics.png" class="img-responsive" /></div>
<div class="col-md-4"></div>
<div class="col-md-3"></div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Your rows have 1px height which results in the pointer dropping down 1px for every circle. I fixed your fiddle, see here.
You can set the color of the pointer with just CSS, like for instance:
a[href="#tab1"]:after {
border-bottom-color: rgb(0, 188, 212) !important;
}
a[href="#tab8"]:after {
border-bottom-color: #8BC34A !important;
}

Toggle an animation over an element of a grid and fadein/out the other elements

I am experimenting with a tile-like layout for my site with which the user can interact. Each box is a button used to select a product, and upon selection of a product, the other boxes fade out and are hidden. This effect is toggle-able.
I have slightly modified the following fiddle that I found online, and it comes very close the desired result.
$('.box').click(function() {
$('.box').not(this).fadeToggle(250);
});
div.box {
width: 100px;
height: 63px;
background-color: #52c6ec;
margin: 5px;
padding-top: 37px;
float: left;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>
The only thing I want to do is to have the selected item transition (via animation) to the top-left, rather than just appearing there. Preferably also during the fading of the other boxes.
Because I'm using floats here, I cannot figure out how to animate these, since they don't have any numeric properties.
Ideas for a jQuery solution? Thanks.

Is this what you want?
var t, l, loctop, locleft;
$('.box').click(function() {
var e = $(this);
if( $('.box').not(this).is(':visible') )
{
t = e.position().top + 'px';
l = e.position().left + 'px';
loctop = locleft = 0;
$(this).css( {position: 'fixed', top:t, left:l} );
$('.box').not(this).fadeToggle(550, function(){
$(e).animate({
top: loctop,
left: locleft
}, 800, function(){
$(this).stop(true, true);
});
});
}
else
{
loctop = parseInt(t);
locleft = parseInt(l);
$(e).animate({
top: loctop,
left: locleft
}, 800, function(){
$('.box').not(this).fadeIn(550, function(){
$(e).css( {position: 'relative', top:'', left:''} );
});
});
}
});
div.box {
width: 100px;
height: 63px;
background-color: #52c6ec;
margin: 5px;
padding-top: 37px;
float: left;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

Here's my attempt in vanilla JS (tested on Chrome and Firefox)
Basically it works only with CSS transitions over the transform property for the selected element and over the opacity for all the other elements. The fadeOut/In runs while the selected element is moving as you specified.
CodePen Demo
CSS
main {
display: flex;
flex-wrap: wrap;
border: 1px solid #ccc;
}
div {
background: #a0c6df;
width: 100px;
height: 100px;
border: 2px #8fa0c6 dashed;
margin: 10px;
opacity: 1;
cursor: pointer;
transition: all 1s;
}
main.fadeout div:not(.current) {
opacity: 0;
cursor: default;
}
JS
var main = document.querySelector('main');
var boxes = document.querySelectorAll('main div');
var animationIsRunning = false;
var getBoxPosition = function() {
[].forEach.call(boxes, function(b) {
var gBCR = b.getBoundingClientRect();
b.dataset.top = gBCR.top;
b.dataset.left = gBCR.left;
});
}
window.addEventListener('resize', function() {
var dc;
getBoxPosition();
if (dc = main.querySelector('div.current')) {
main.classList.remove('fadeout');
dc.classList.remove('current');
dc.style.transform = 'translate(0,0)';
}
});
main.addEventListener('click', function(evt) {
var b = evt.target,
left = 0,
top = 0;
/* listen to the div click event only */
if (b.nodeName.toLowerCase() !== 'div') { return false; }
/* don't listen if there's a current element and user clicked
over a hidden div */
if (
main.querySelector('.current') &&
!b.classList.contains('current')
) { return false; }
/* only if another animation is not running... */
if (!animationIsRunning) {
animationIsRunning = true;
b.classList.toggle('current');
main.classList.toggle('fadeout');
if (b.classList.contains('current')) {
left = b.dataset.left;
top = b.dataset.top;
}
b.style.transform = 'translate(-'+ left +'px, -'+ top +'px)';
}
});
main.addEventListener('transitionend', function() {
animationIsRunning = false;
});
getBoxPosition();

Take a look at this awesome plugin (http://isotope.metafizzy.co/) from David Desandro
You can find an exemple on codepen here :
http://codepen.io/desandro/pen/nFrte
An exemple from isotope blog :
// external js: isotope.pkgd.js
var $notifElem;
$( document ).ready( function() {
var $grid = $('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
$grid.on( 'layoutComplete', function( event, laidOutItems ) {
console.log( 'layoutComplete with ' + laidOutItems.length + ' items' );
});
$grid.on( 'click', '.grid-item', function() {
// change size of item by toggling gigante class
$( this ).toggleClass('grid-item--gigante');
$grid.isotope('layout');
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
.grid-item:hover {
background: #8CF;
cursor: pointer;
}
.grid-item--gigante {
width: 200px;
height: 300px;
background: #F80;
}
.notification {
position: fixed;
background: black;
opacity: 0;
color: white;
font-size: 16px;
padding: 0.5em;
right: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
<h1>Isotope - layoutComplete</h1>
<p>Open Developer Console to view event logs.</p>
<p>Click item to toggle size</p>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="notification"></div>

Hope this will be very useful for you. I have created full working
code You can use this.
var a=0;
$('.box').click(function() {
if(a==0){
var position = $(this).position();
$( "this" ).text( "left: " + position.left + ", top: " + position.top );
$(this).css({
"position":"absolute",
"left":position.left,
"top":position.top
})
$('.box').not(this).fadeOut(250);
$(this).animate({
"left":"0px",
"top":"0px"
}, 1000);
a=1;
}
else{
$('.box').not(this).fadeIn(250);
$(this).css({"position":"static"});
a=0;
}
});
div.box {
width: 100px;
height: 63px;
background-color: #52c6ec;
margin: 5px;
padding-top: 37px;
float: left;
text-align: center;
color: #fff;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>
<div class="box" id="box4">Box 4</div>
<div class="box" id="box5">Box 5</div>
<div class="box" id="box6">Box 6</div>
<div class="box" id="box7">Box 7</div>
<div class="box" id="box8">Box 8</div>
<div class="box" id="box9">Box 9</div>
<div class="box" id="box10">Box 10</div>
<div class="box" id="box11">Box 11</div>
<div class="box" id="box12">Box 12</div>
<div class="box" id="box13">Box 13</div>
<div class="box" id="box14">Box 14</div>
<div class="box" id="box15">Box 15</div>
<div class="box" id="box16">Box 16</div>
<div class="box" id="box17">Box 17</div>
<div class="box" id="box18">Box 18</div>
<div class="box" id="box19">Box 19</div>
<div class="box" id="box20">Box 20</div>

Reordering bootstrap elements between "stacks"/columns without javascript

Is it possible to:
from this state, after deleting 3
have this:
without custom javascript? (Word "without" is most important here).
CSS, html etc can be used.
This is playground code:
<div class="col-md-12">
<div class="col-md-4 rainbow1">
<h1>1</h1>
</div>
<div class="col-md-4 rainbow2">
<h1>4</h1>
</div>
<div class="col-md-4 rainbow3">
<h1>7</h1>
</div>
<div class="col-md-4 rainbow1">
<h1>2</h1>
</div>
<div class="col-md-4 rainbow2">
<h1>5</h1>
</div>
<div class="col-md-4 rainbow3">
<h1>8</h1>
</div>
<div class="col-md-4 rainbow1">
<h1>3</h1>
</div>
<div class="col-md-4 rainbow2">
<h1>6</h1>
</div>
<div class="col-md-4 rainbow3">
<h1>9</h1>
</div>
.rainbow1{
color:darkblue !important;
border:solid;
}
.rainbow2{
color:#ff0000 !important ;
border:solid;
}
.rainbow3{
color:#ffd800 !important;
border:solid;
}
.rainbow4{
color:#4cff00 !important;
border:solid;
}
.rainbow5{
color:#0094ff !important;
}
.rainbow6{
color:#b5ac78 !important;
border:solid;
}
.rainbow7{
color:#000000 !important;
border:solid;
}
.rainbow8{
color:#ff00dc !important;
border:solid;
}
.rainbow9{
color:#b6ff00 !important;
border:solid;
}
.rainbow10{
color:#ff006e !important;
border:solid;
}

So you can achieve this with CSS3 columns without bootstrap.
Complimentary fiddle: https://jsfiddle.net/4ajv8fn7/4/
Note: The JS in the fiddle is just a helper so you can click on the cells to remove them :)
source & more info about browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
HTML
<div class="parent">
<div class="cell rainbow1">
<h1>1</h1>
</div>
<div class="cell rainbow1">
<h1>2</h1>
</div>
<div class="cell rainbow1">
<h1>3</h1>
</div>
<div class="cell rainbow2">
<h1>4</h1>
</div>
<div class="cell rainbow2">
<h1>5</h1>
</div>
<div class="cell rainbow2">
<h1>6</h1>
</div>
<div class="cell rainbow3">
<h1>7</h1>
</div>
<div class="cell rainbow3">
<h1>8</h1>
</div>
<div class="cell rainbow3">
<h1>9</h1>
</div>
</div>
CSS
.rainbow1 {
color: darkblue !important;
border: solid;
padding: 1px;
}
.rainbow2 {
color: #ff0000 !important;
border: solid;
padding: 1px;
}
.rainbow3 {
color: #ffd800 !important;
border: solid;
padding: 1px;
}
.cell {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.parent {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
padding: 1px;
}

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<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 class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}

$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.

<div class="container">
<div class="smallitems">
<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 class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});

Categories

Resources