Reordering bootstrap elements between "stacks"/columns without javascript - 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;
}

Related

How to apply .animate to function

var elementPosition = $(".total-value-bottom").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$(".total-value-bottom").css("position", "fixed").css("top", "4.5em").css('left', '0em');
$(".total").css("font-size", "70%");
} else {
$(".total-value-bottom").css("position", "static");
}
});
:root {
--white: #ffffff;
--dusty-red: #ab3428;
--black: #000;
--grey: #808080;
--green: #28ab34;
--shadow: #00000044;
--icbf-blue: #2d69a8;
--border: #ccc;
--icbf-green: #6ead2b;
}
.total-value-bottom {
box-shadow: 0 1px 3px var(--shadow);
background: var(--white);
z-index: 2;
height: 60%;
width: 50%;
}
.circle {
border-radius: 50%;
padding-top: 70%;
width: 76%;
}
.dash-flex-cell {
padding: 11px;
}
.circle-total {
border: 4px solid var(--icbf-blue);
margin: 0 auto;
}
.circle-amount {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
/* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Chrome */
display: flex;
/* NEW, Spec - Opera 12.1, Firefox 20+ */
align-items: center;
justify-content: center;
text-align: center;
max-height: 0.1em;
}
.circle-amount .amount {
font-size: 130%;
font-weight: 600;
margin: -5px;
padding-bottom: 95%;
}
span.amountSpan,
.amountSpanTwo {
font-size: 20px;
color: var(--icbf-green);
}
.circle-amount,
.total,
.totalTwo {
font-size: 76%;
font-weight: 550;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container total-value-bottom">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">10</span>
<div class="total">Total Farm Emissions</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">CO2 Footprint</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container test-container">
<div class="row">
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpan">4</span>
<div class="total">Test</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="dash-flex-cell">
<div class="circle circle-total">
<div class="circle-amount">
<div class="amount">
<span class="amountSpanTwo">2</span>
<div class="totalTwo">Test</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Upon scroll, I was able to get my div to move with a fixed position and when you return to the position it was before it becomes static. However, when I first scroll it's a little rough (Jumpy), I'd like to apply animation to that so it's a bit smoother on the first scroll. I read that I can use .animate, but I am not sure how to implement it with my function.
var elementPosition = $('.total-value-bottom').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('.total-value-bottom').css('position', 'fixed').css('top', '4.5em').css('left', '0em');
$('.total').css('font-size', '70%');
} else {
$('.total-value-bottom').css('position', 'static');
}
});

CSS columns separating divs

I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..

Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

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;
}

Bootstrap columns display different in Firefox

I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox.
I created ten boxes distributed in two rows. Five in each row. These boxes has classes .col-sm-2 and .col-xs-10, besides a class called .categoria.
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
In Chrome, Opera and Safari, they appear correctly:
Screenshoot from Chrome
But in Firefox, it is completely irregular.
Screeshoot from Firefox
Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:
$(document).ready( function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
And here is the css:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.

Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights
CSS:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: block;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
display:table;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
HTML :
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
Fiddle

Try to use a constant value instead of a variable and intead of max-height property use height.
$(document).ready( function(){
// This value v
var columnWidth = $('.categoria').innerWidth();
columnWith = constant;
// This also change
$('.categoria').css('height', columnWidth);
});
If this doesn't change anything check all your tags matches. I can't tell you how many times it has happened to me when I don't close tags.
Hope I help.

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