Develop Reference

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.

iScroll cuts off content

I was trying to apply iScroll to my scrolling item however i dont understand the way it works.
it cuts off bottom content
it makes additional margin top for some reason
this is the code
var _scroll = new IScroll('.helper', {
mouseWheel: true,
scrollbars: true
});
div {
box-sizing:border-box;
}
.main {
width:600px;
margin:20px auto;
height:300px;
background:crimson;
border:solid 1px #000;
padding:10px;
}
.helper {
height:100%;
position:relative;
overflow:hidden;
}
.scroller {
background:cornflowerblue;
}
.box {
height:50px;
background:#ccc;
border:solid 1px #000;
margin:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<div class="main">
<div class="helper">
<div class="scroller">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Maybe someone could help me with this one.

Auto fit dynamic div block

<div class="main">
<div class="test" style="width:40px;height:100px"><div>
<div class="test" style="width:20px;height:150px;"><div>
<div class="test" style="width:40px;height:100px;"><div>
<div class="test" style="width:40px;height:100px;"><div>
</div>
.main{
position:relative;
border:1px solid red;
width:140px;
height:400px;
}
.test{
float:left;
border:1px solid silver;
position:relative;
padding:10px;
display:inline-block;
}
Div and its height and width are coming dynamically. I am trying to fit the div width in the layout .2 per on raw.
Please suggest.

The height of the container div should be auto. So, it'll take the optimal space to fit the inner elements.
.main {
...
height: auto;
}
Demo
.main {
border: 1px solid red;
width: 140px;
height: auto;
overflow: hidden;
}
.test {
float: left;
border: 1px solid silver;
position: relative;
padding: 10px;
display: inline-block;
}
<div class="main">
<div class="test" style="width:40px;height:100px"></div>
<div class="test" style="width:20px;height:150px;"></div>
<div class="test" style="width:40px;height:100px;"></div>
<div class="test" style="width:40px;height:100px;"></div>
</div>

If you already use Bootstrap you can use its classes to make 2 items per row
https://jsfiddle.net/3mdrrjf8/1/
<div class="main row">
<div class="test col-md-8 col-xs-6" style="height:100px"></div>
<div class="test col-md-8 col-xs-6" style="height:150px;"></div>
<div class="test col-md-8 col-xs-6" style="height:100px;"></div>
<div class="test col-md-8 col-xs-6" style="height:100px;"></div>
</div>

How to add external source link for jquery?

I added a exernal link for jquery source. But the jquery event doesn't get fired. Is the format that I specified the jquery source and the jquery method call are correct ?
<html>
<head>
<title>test</title>
<style>/* root element for accordion. decorated with rounded borders and gradient background image */
.accordion {
background:#333;
width: 90%;
border:1px solid #333;
-background:#666;
}
/* accordion header */
.accordion h2 {
background:#ccc url('http://static.flowplayer.org/img/global/gradient/h30.png');
margin:0;
padding:5px 15px;
font-size:14px;
font-weight:normal;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer;
color: #000;
}
/* currently active header */
.accordion h2.current {
cursor:default;
background-color:#0f0;
}
/* accordion pane */
.accordion .pane {
display:none;
padding:15px;
color:#fff;
font-size:12px;
}
/* a title inside pane */
.accordion .pane h3 {
font-weight:normal;
margin:0 0 -5px 0;
font-size:16px;
color:#999;
}</style>
<script src="//code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Initialising Accordion
$(".accordion").tabs(".pane", {
tabs: '> h2',
effect: 'slide',
initialIndex: null
});
//The click to hide function
$(".accordion > h2").click(function () {
if ($(this).hasClass("current") && $(this).next().queue().length === 0) {
$(this).next().slideUp();
$(this).removeClass("current");
} else if (!$(this).hasClass("current") && $(this).next().queue().length === 0) {
$(this).next().slideDown();
$(this).addClass("current");
}
});
});
</script>
</head>
<body>
<div class="accordion">
<h2>Level 1:1</h2>
<div class="pane">
<div class="accordion">
<h2>Level 2 : 1</h2>
<div class="pane">
<div class="accordion">
<h2>Set 1</h2>
<div class="pane">
<div class="accordion">
<h2>Test3</h2>
<div class="pane">
[Pane Content]
</div>
</div>
</div>
</div>
</div>
<h2>Level 2 : 1</h2>
<div class="pane">
<div class="accordion">
<h2>Set 1</h2>
<div class="pane">
<div class="accordion">
<h2>Test3</h2>
<div class="pane">
[Pane Content]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Level 1:2</h2>
<div class="pane">
content
</div>
</div>
</body>
</html>

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