Accordion with icon on expanded - javascript

$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).next().slideToggle().addClass('expanded').prev('h4').removeClass('icon-rotate');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
/* Accordion - Left Panel */
/* line 4, ../sass/my-request.scss */
.filter-panel .accordion-header {
background: #506070;
color: #FFF;
font-size: 16px;
padding: 15px;
font-weight: 600;
}
/* line 11, ../sass/my-request.scss */
.filter-panel .accordion-toggle-first {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 15px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 22, ../sass/my-request.scss */
.filter-panel .accordion-toggle {
cursor: pointer;
margin: 0;
font-size: 14px;
color: #333;
background: #F6F6F6;
padding: 11px 20px;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 33, ../sass/my-request.scss */
.filter-panel .accordion-content {
display: none;
font-weight: 600;
border: 1px solid #DEDEDE;
border-top: 0;
}
/* line 39, ../sass/my-request.scss */
.filter-panel .accordion-content ul li {
padding: 10px 30px;
}
/* line 42, ../sass/my-request.scss */
.filter-panel .accordion-content.default {
display: block;
}
/* line 45, ../sass/my-request.scss */
.icon-rotate span {
transform: rotate(90deg);
transition: .25s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion" class="filter-panel">
<div class="accordion-header">Refine by:</div>
<div class="accordion-toggle-first">All</div>
<h4 class="accordion-toggle">Active <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content default">
<ul>
<li>
<div class="align-left">Pending DSL (12)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending ECR (21)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OSI (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending OWS (6)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
<li>
<div class="align-left">Pending Requestor (10)</div>
<div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div>
<div class="clear"></div>
</li>
</ul>
</div>
<h4 class="accordion-toggle">Closed <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Cancelled (21)</li>
<li>Rejected (14)</li>
<li>Completed (21)</li>
</ul>
</div>
<h4 class="accordion-toggle">Type <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Alias (13)</li>
<li>Sites (15)</li>
<li>Domain (19)</li>
<li>Social Media (9)</li>
<li>Archive/Back-up (21)</li>
<li>Mobile App (6)</li>
</ul>
</div>
<h4 class="accordion-toggle">VPU <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
<ul>
<li>Africa (23)</li>
<li>East Asia Pacific (15)</li>
<li>South Asia (19)</li>
<li>Latin America (9)</li>
</ul>
</div>
<h4 class="accordion-toggle">Date <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4>
<div class="accordion-content">
</div>
</div>
I am using the following script
http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html
and adding arrow icon if any accordion is open n changing based on accordion open n close but I am stuck once all the accordion is closed my icon is not rotating.
Also attached the screenshot for more details
Error Screenshot


I think you could use toggleClass in this situation. Here is what I changed to get the demo to work.
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
$(this).toggleClass('icon-rotate').next().slideToggle().addClass('expanded');
$(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});
});
Fiddle

Related

Input date calendar does not open

I compose a part of the code of my project here to report the problem I am facing. I need to keep the js function to work the links that I put in the top bar.
$(function () {
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
});
.links > li {
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
.rad-dropmenu-item.active {
display: block;
-webkit-animation: flipInX 1s ease;
}
.rad-notification-body {
color: black;
vertical-align: middle;
margin-left: 30px;
}
.rad-logo-container {
width: 225px;
text-align: center;
height: 50px;
float: left;
transition: all 0.2s ease-in-out;
}
.rad-menu-item {
position: relative;
padding: 0 5px;
line-height: 30px;
height: 30px;
color: #89949B;
z-index: 5;
display: inline-block;
}
.rad-dropmenu-item {
position: absolute;
right: -6px;
top: 45px;
min-width: 250px;
background: white;
border: 1px solid #BDBDBD;
border-top: 5px solid #515d6e;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
.rad-chk-pin span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
}
.rad-chk-pin span:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.2s ease;
}
.rad-chk-pin input {
display: none;
}
.rad-chk-pin input:checked + span {
background: #23AE89;
}
.rad-chk-pin input:checked + span:after {
left: 19px;
}
.rad-color-swatch {
display: table;
width: 90px;
height: 25px;
border-radius: 4px;
}
.rad-color-swatch .colors {
width: 25px;
height: 25px;
display: table-cell;
cursor: pointer;
}
.rad-color-swatch .colors input[type=radio] {
display: none;
}
.rad-color-swatch .colors:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.rad-color-swatch .colors:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.rad-sidebar.rad-nav-min {
width: 65px !important;
}
#media screen and (max-width: 850px) {
.rad-navigation {
height: 100px;
}
.rad-logo-container.rad-nav-min + .rad-logo-hidden {
display: none;
}
.rad-logo-container {
display: block;
float: none;
width: 100%;
border-bottom: 1px solid #F2F2F2;
}
.rad-top-nav-container {
display: block;
float: none;
height: 50px;
background: white;
}
.rad-sidebar.rad-nav-min {
transform: translate3d(-200px, 0, 0);
}
}
.flat-theme .rad-navigation .rad-top-nav-container .links > li > a {
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display: inline-block;
line-height: 32px;
}
.rad-bg-purple {
background: rebeccapurple;
}
.rad-bg-twitter {
background: #55acee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<form class="steps" id="inscricao" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<label for="validade" Style="margin-top: 10%;">Data de Validade </label>
<input id="validade" name="validade" type="date" >
</form>
</main>
</body>
But when you put this function, you stop opening the calendar in the input with the date type. If you remove the function, the calendar of the input already works. But when I remove the function, I’m unable to close the links on the top bar.
Can you help solve this problem?

You can shift the preventDefault() inside the if condition. So that the click default action is prevented only if the menu is opened. As per your current code, what happens is that It is capturing all click events on document and then preventing the event trigger always. So the datepicker is not able to catch the click event on calender and the calender never opens. With the following modification, now the click event will only get prevented when the menu is open.
$(function () {
$(document).on("click", function (e) {
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
<li>
<a href="#" class="inbox">
<i class="fa fa-power-off">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">Terminar Sessão</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<div class="hs_firstname field hs-form-field">
<label for="validade">Data de Validade <span style="color: red;">*</span></label>
<input id="validade" name="validade" required="required" type="date" value="<?php echo $validade; ?>" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</main>
</body>

$(document).on("click", function (e) {
e.preventDefault(); //<-- THIS HERE
When you click anywhere on the document, that click will be caught and the default action (like opening the date picker) will be prevented.
I suggest that instead of calling the .on() function on the entire document you limit it only to the part where your links are i.e.
$(".rad-navigation").on("click", ....
(this selects the .rad-navigation class)

How to limit nested list <li> to only two levels in Jquery Sortable?

I am using sortable jquery plugin to create a nested list menu items dragged and dropped from left container to right container.
Each item from left container, I allow one level nested. However, in the right container, I don't want it to be nested more than two levels nested.
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
I really have no idea how can I check the nested level of item when it is dragged to from the left container to the right container. I just know the algorithm that if the items already has nested level 2, then I just simply remove <ol></ol> inside the <li>...</li> and append it back if it is in zero or one level nested.
Here to demonstrate what I want it to be and not to be:
Correct nested level which has only 2 levels nested item
Incorrect nested level which has more than 2 levels nested and which I want to set limit to it
Please kindly help me how can I do to check nested level and set limit to it? Thanks.

Since there is no one help answering on this, I would like to share what I have found on this.
The dept item for measuring and set limit for nested item option is something considered for adding into Jquery-sortable by the author, here reference.
Although it is not yet an option, there is an alternative add-on to the built-in method isValidTarget set fourth with plugin:
isValidTarget: function ($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 2, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
}
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
isValidTarget: function($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 3, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
This tiny simple sample snippet helped me achieve my goal.
I hoped this will help for somebody having a problem like this. Thanks.

jQuery, I think it should be pretty simple. Includes jsfiddle

I want to create a list upon my selected items, by items I mean any <li> with class .service. The selected items have the class .selected and I want both the data #name and #price for the selected item to display in <ul class="your_likes"> with a unique <li class="one_like">.
This is my JSFiddle with a pure html example included.
How can I do this?

Is this what you're trying to do? First thing, don't use ID's for the name and price all over the place -- use classes.
// step by step functionality
var myTotal;
$('.service').on('click', function(e) {
e.preventDefault();
var $parent = $(this).closest('section')
// remove selected class from links after the current one
$parent.nextAll('section').find('li').removeClass('selected');
// remove selected from siblings, toggle current selected class
$(this).toggleClass('selected');
(!$parent.hasClass('multiple')) && $(this).siblings('li').removeClass('selected');
var $target = $('#' + $(this).attr('data-id'));
if ($target.length) {
// hide any steps after the current one that may be shown
$parent.nextAll('section').find('.step').not($target).removeClass('active');
// toggle display of selected step
$target.toggleClass('active', $(this).hasClass('selected'));
} else {
console.log('hmm');
}
})
// your selections incl. price & total
$('.service').click(function() {
$('.hide-me-once-a-banana-is-clicked').hide('slow');
$('ul.your_likes').show('slow');
var myLike = $(".number-" + $(this).data("likes"));
myLike.children(".like").text($(this).children(".name").text());
myLike.children(".price").text($(this).children(".price").text());
// Now, somehow, calculate the total price...
myTotal = 0;
var myLikes = $(".your_likes .one_like");
myLikes.each(function() {
myTotal += parseNumber($(this).children(".price").text());
})
$(".topay").children(".price").text(myTotal);
});
function parseNumber(n) {
return Number(n.replace(/[^0-9\.-]+/g, ""))
}
body {
color: #333;
}
h1 {
font-size: 20px;
}
.step {
display: none;
}
.active {
display: block;
}
.selected {
background: #27ae60 !important;
color: #fff !important;
}
ul {
padding: 0;
}
li {
list-style: none;
}
.service {
padding: 20px;
color: #7f8c8d;
background: #ecf0f1;
display: inline-block;
border-radius: 10px;
cursor: pointer;
width: auto;
text-align: center;
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
}
.service.special.selected {
background: #3498db !important;
}
.hi {
color: #27ae60;
border-bottom: 2px dotted #27ae60;
}
h1 {
margin-top: 30px;
margin-bottom: 30px;
}
.hi.special {
border-bottom: 2px dotted #3498db;
color: #3498db;
}
#same_target {
margin-top: 30px;
background: #9b59b6;
padding: 20px;
color: #fff;
}
#same_target p {
margin-bottom: 0;
}
.nomarking {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.price {
display: block;
margin: 0;
font-size: 14px;
font-weight: 300;
}
ul.your_likes {
display: none;
}
ul.your_likes li {
list-style: none;
cursor: default;
}
ul.your_likes li.one_like .like {
display: inline-block;
font-size: 16px;
}
ul.your_likes li.one_like .price {
display: inline-block;
float: right;
font-size: 16px;
color: #4285f4;
}
ul.your_likes li.topay {
border-radius: 10px;
margin-bottom: 5px;
margin-top: 10px;
}
ul.your_likes li.topay .text {
display: inline-block;
font-size: 16px;
color: #000;
font-weight: bolder;
}
ul.your_likes li.topay .price {
display: inline-block;
float: right;
font-size: 16px;
color: #000;
font-weight: bolder;
}
ul.your_likes li.topay .lets_go button {
display: block;
margin-top: 10px;
font-weight: normal;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6">
<!-- HELLO FIRST SECTION -->
<section>
<h1>Choose <span class="hi">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="one" data-likes="one">
<span class="name">Hamburger</span>
<span class="price">€ 10</span>
</li>
<li class="service nomarking" data-id="two" data-likes="one">
<span class="name">Pizza</span>
<span class="price">€ 5</span>
</li>
<li class="service nomarking" data-id="three" data-likes="one">
<span class="name">Icecream</span>
<span class="price">€ 3</span>
</li>
</ul>
</section>
<!-- BYE FIRST SECTION -->
<!-- HELLO SECOND SECTION -->
<section>
<div id="one" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Games</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Soccer</span>
<span class="price">€ 2</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Memes</span>
<span class="price">€ 1</span>
</li>
</ul>
</div>
<div id="two" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Gossip Girl</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Coding</span>
<span class="price">€ 8</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Cats</span>
<span class="price">€ 6</span>
</li>
</ul>
</div>
<div id="three" class="step">
<h1>Choose <span class="hi special">one</span> thing you like</h1>
<ul>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Netflix</span>
<span class="price">€ 7</span>
</li>
<li class="service nomarking " data-id="last" data-likes="two">
<span class="name">Reddit</span>
<span class="price">€ 9</span>
</li>
<li class="service nomarking" data-id="last" data-likes="two">
<span class="name">Lady Gaga</span>
<span class="price">€ 20</span>
</li>
</ul>
</div>
</section>
<!-- BYE SECOND SECTION -->
<!-- HELLO THIRD AND LAST SECTION -->
<section class="multiple">
<div id="last" class="step">
<h1>Choose <span class="hi special">more</span> of your liking!</h1>
<ul>
<li class="service nomarking" data-id="third" data-likes="three">
<span class="name">Michael Jordan</span>
<span class="price">€ 23</span>
</li>
<li class="service nomarking " data-id="third" data-likes="three">
<span class="name">Dogs</span>
<span class="price">€ 10</span>
</li>
<li class="service nomarking" data-id="third" data-likes="three">
<span class="name">Cars</span>
<span class="price">€ 100</span>
</li>
</ul>
</div>
</section>
<!-- BYE THIRD AND LAST SECTION -->
</div>
<div class="col-xs-4">
<h1>Your likes</h1>
<p class="text-muted hide-me-once-a-banana-is-clicked">
Click on something you like to make a order overview
</p>
<ul class="your_likes">
<li class="one_like noselect number-one">
<div class="like">
Hamburger
</div>
<div class="price">
€ 8
</div>
</li>
<li class="one_like noselect number-two">
<div class="like">
Memes
</div>
<div class="price">
€ 1
</div>
</li>
<li class="one_like noselect number-three">
<div class="like">
Dogs
</div>
<div class="price">
€ 10
</div>
</li>
<li class="topay noselect">
<div class="text">
To pay
</div>
<div class="price">
€ 19
</div>
<div class="lets_go">
<button class="btn btn-primary">Checkout</button>
</div>
</li>
</ul>
</div>
</div>
</div>

Bootstrap - collapsed menu not working

I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>

You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.

Categories