Jquery slim scroll with jquery ui sortable issue - javascript

Hi I have a situation where I am using jquery slim scroll plugin with jquery sortable. The problem is when I drag the items from one list items to other the scroll bar on the right doesn't move along with , So if I have to drop the list to the last list items area I cannot go there unless I use mousewheel.
So how can i bind scrollbar position as I drag the item from one list area to other. Below is the code-
$(function() {
$("ul.droptrue").sortable({
revert: 'invalid',
connectWith: "ul"
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
$('.ScrollableAreanew ').slimScroll({
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false,
});
});
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 100%;
margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 100%;
border: 1px solid #000;
margin-bottom: 5px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="ScrollableAreanew">
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Can be dropped..</li>
<li class="ui-state-default">..on an empty list</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-highlight">Cannot be dropped..</li>
<li class="ui-state-highlight">..on an empty list</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>

Here what we need to do is
Get position of mouse - Y coordinate as we move inside the .ScrollableAreanew
Whenever a sortable item is moved (use sort event), move the slimScroll to the scrolled position using scrollTo.
sort event is triggered during sorting. See here for more details
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY; // Get position of mouse - Y coordinate
});
$("ul.droptrue").sortable({
sort : function(event, ui) { // This event is triggered during sorting.
var scrollTo_int = currentMousePos.y + 'px';
$(".ScrollableAreanew").slimScroll({
scrollTo : scrollTo_int, // scroll to mouse position
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false
});
},
revert: 'invalid',
connectWith: "ul"
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
$('.ScrollableAreanew ').slimScroll({
height: '400',
width: '100%',
alwaysVisible: true,
color: 'rgb(15,170,255)',
railOpacity: 1,
opacity: 1,
size: '5px',
position: 'right',
allowPageScroll: false
});
});
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 100%;
margin-bottom: 10px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 100%;
border: 1px solid #000;
margin-bottom: 5px;
}
.justAddingHeight
{
height:100px !important;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<div class="justAddingHeight"></div>
<div class="ScrollableAreanew">
<ul id="sortable1" class="droptrue droppable">
<li class="ui-state-default draggable">Can be dropped..</li>
<li class="ui-state-default draggable">..on an empty list</li>
<li class="ui-state-default draggable">Item 3</li>
<li class="ui-state-default draggable">Item 4</li>
<li class="ui-state-default draggable">Item 5</li>
</ul>
<ul id="sortable2" class="droptrue droppable">
<li class="ui-state-highlight draggable">Cannot be dropped..</li>
<li class="ui-state-highlight draggable">..on an empty list</li>
<li class="ui-state-highlight draggable">Item 3</li>
<li class="ui-state-highlight draggable">Item 4</li>
<li class="ui-state-highlight draggable">Item 5</li>
</ul>
<ul id="sortable3" class="droptrue droppable">
<li class="ui-state-highlight draggable">Cannot be dropped..</li>
<li class="ui-state-highlight draggable">..on an empty list</li>
<li class="ui-state-highlight draggable">Item 3</li>
<li class="ui-state-highlight draggable">Item 4</li>
<li class="ui-state-highlight draggable">Item 5</li>
</ul>
</div>
EDIT
Instead of getting mouse position inside the .ScrollableAreanew div, get the position of mouse in the document.
Note: Added div with class justAddingHeight (having height of 100px) as a POC.
Hope this solves your problem.

Related

SortableJS - can't exclude item from being draggable and sortable

I've already submitted an issue here but just wanted to check if you can solve this faster here.
Trying to exclude an item from being draggable works but not from being sortable -- the problem is that other elements can be placed behind it.
SortableJS Docs don't seem to have exclude.
Here's the expected behavior using jQuery UI:
//jQuery UI
$("#demo .sortable").sortable({
items: "li:not(.exclude)",
cancel: "li.exclude"
});
$("#demo .sortable").disableSelection();
$('.add-new').click(function(){
$(this).prev().clone().insertBefore(this);
});
h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<h1>jQuery UI</h1>
<div id="demo">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
</ul>
</div><!-- End demo -->
Notice that you can never place an item after the last "Add New Item".
This is another example using jQuery UI that makes distinction between sortable and drop target and can disable it either one.
What I've tried so far with SortableJS:
// SortableJS
let mySortable = $("#demo2 .sortable").sortable({
draggable: "li:not(.exclude)",
animation: 250,
forceFallback: true,
removeCloneOnHide: true,
touchStartThreshold: 10,
onMove: function(evt) {
//doesn't work
//console.log ($(evt.dragged).index(),$('.exclude').index());
//return $(evt.dragged).is(':last-child') ? false : true;
},
onEnd: function(evt) {
var itemEl = evt.item; // dragged HTMLElement
if (!$('.exclude').is(':last-child')) {
// Somewhat works but is super hacky and visually bad.
//$('.exclude').appendTo($('.exclude').parent());
}
}
});
$('.add-new').click(function(){
$(this).prev().clone().insertBefore(this);
});
h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs#latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs#latest/jquery-sortable.js"></script>
<h1>SortableJS</h1>
<div id="demo2">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li draggable="false" droppable="false" class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
</ul>
</div>
<!-- End demo -->
I don't want to take the "Add New Item" out of the sortable div or position:absolute it
Any idea how to accomplish this?
Thanks!
If you check documentation there is one option filter: ".ignore-elements" you can use this to ignore elements which you do not want to be draggable . Then , check if the related target element doesn't have exclude class depending on this return true or false to cancel event.
Demo Code :
let mySortable = $("#demo2 .sortable").sortable({
animation: 250,
forceFallback: true,
removeCloneOnHide: true,
touchStartThreshold: 10,
filter: ".exclude", //use this
onMove: function(evt) {
return evt.related.className.indexOf('exclude') === -1; //and this
}
});
$('.add-new').click(function() {
$(this).prev().clone().insertBefore(this);
});
h1 {
font-size: 1em;
margin: 1em
}
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 260px;
overflow: auto;
}
.sortable li {
background: lightgray;
text-align: center;
float: left;
width: 50px;
height: 50px;
margin: 0.2em;
padding: 0.2em;
cursor: move;
}
.sortable li.add-new {
cursor: default;
color: #959595;
opacity: 0.8;
background: white;
outline: 2px dotted gray
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs#latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-sortablejs#latest/jquery-sortable.js"></script>
<h1>SortableJS</h1>
<div id="demo2">
<ul class="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li draggable="false" droppable="false" class="ui-state-default add-new exclude"><span class="ui-icon ui-icon-plus"></span>Add New Item</li>
</ul>
</div>

jQuery sortable own element as placeholder

I'm implementing a connected list like a Kanban board. Everything works but the placeholder is still missing. I'm looking now for a way to add a the own element as placeholder like how they done it in Gitlab:
How can I do this? I know that there is a placeholder variable but I'm not sure how I can use the same element as placeholder. This is my code:
jQuery( document ).ready( function ( $ ) {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>
Does something like this help you?
jQuery(document).ready(function($) {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
start: function(event, ui) {
var clone = $(ui.item[0].outerHTML).clone();
},
placeholder: {
element: function(clone, ui) {
return $('<li class="fade">' + clone[0].innerHTML + '</li>');
},
update: function() {
return;
}
},
}).disableSelection();
});
#sortable1,
#sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li,
#sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
.fade {
opacity: 0.5;
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</body>
</html>

Mouseenter only fires on first mouseenter attempt

I'm trying to slide each ul > li down when hovering over it's parent li and then slide it back up on the mouseleave event
The code works great on the first mouseenter and mouseleave. But when I hover my mouse back over a panel that has already fired once, the mouseenter function doesn't fire a second time I'm know I'm close but not sure where I went wrong
Fiddle away here:
http://jsfiddle.net/k2b5a62j/1/
I've tried the fiddle with hover as well with no luck
**I've updated the fiddle a bit for simplicity
I am pretty sure what you mean is, you want, on hover, to be able to view all the items rather than them immediately disappearing. I slightly changed your DOM and jQuery selectors to achieve this:
//Per comment of the original poster:
$('ul li div').on("mouseenter", function(event){
$(this).find('ul').slideDown('fast', function(){
// Done.
});
event.preventDefault();
}).on("mouseleave",function (event) {
$(this).find('ul').slideUp('fast', function(){
// Done.
});
event.preventDefault();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li><div>
Product1
<ul id="test">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div></li>
<li><div>Product2
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
<li><div>Product3
<ul>
<li>Item product 2</li>
<li>Item product 2</li>
</ul>
</div></li>
</ul>
</div>
Reply to the asker's comment as to have each li display one at a time:
jQuery(document).ready(function($) {
$('.inner-link').hide();
$('.link').mouseenter(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideDown(500);
});
});
$('.link').mouseleave(function() {
$(this)
.find('ul')
.find('li')
.stop(true,true)
.each(function(index) {
$(this)
.delay(500 * index)
.slideUp(500);
});
});
});
.link {
position: relative;
right: 0%;
width: 8%;
list-style-type: none;
vertical-align: middle;
display: table-cell;
outline: none;
height: 100%;
text-align: center;
margin: 0px 11px;
}
.inner-list {
position: absolute;
width: 100%;
margin: 0px auto;
left: 0px;
}
.inner-link {
list-style-type: none;
width: 100%;
margin: 0px 0px 0px -40px;
border-bottom: 1px black solid;
}
.inner-link:first-child {
padding-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-container">
<li class="link">Panel 1
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 2
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Link #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 3
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
<li class="link">Panel 4
<ul class="inner-list">
<li class="inner-link">Link #1</li>
<li class="inner-link">Link #2</li>
<li class="inner-link">Linnk #3</li>
<li class="inner-link">Link #4</li>
<li class="inner-link">Link #5</li>
</ul>
</li>
</ul>

Display the position and total when dragging and dropping

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("ul.droptrue").sortable({
connectWith: "ul"
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
});
</script>
</head>
<body>
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Worker 1</li>
<li class="ui-state-default">Worker 2</li>
<li class="ui-state-default">Worker 3</li>
<li class="ui-state-default">Worker 4</li>
<li class="ui-state-default">Worker 5</li>
</ul>
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Worker 6</li>
<li class="ui-state-default">Worker 7</li>
<li class="ui-state-default">Worker 8</li>
<li class="ui-state-default">Worker 9</li>
<li class="ui-state-default">Worker 10</li>
</ul>
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Worker 11</li>
<li class="ui-state-default">Worker 12</li>
<li class="ui-state-default">Worker 13</li>
<li class="ui-state-default">Worker 14</li>
<li class="ui-state-default">Worker 15</li>
</ul>
<br style="clear:both">
</body>
</html>
As I mentioned above at the end of each Column the number of rows must be displayed and aside of each row numbering should be displayed.
1 worker1 1 worker8 1 worker14
2 worker2 2 worker10 2 worker13
3 worker3 3 worker11 3 worker15
4 worker4 4 worker12 total 3
5 worker5 total 4
6 worker7
7 worker6
8 worker9
Total 8
To do what you require you could wrap the ul elements in a div with another div under them to hold the total count of li elements within that container. You can then updated that total when an item is dropped using the stop property of the sortable plugin, like this:
$("ul.droptrue").sortable({
connectWith: "ul",
stop: function() {
$('.total').text(function() {
return 'Total: ' + $(this).closest('.container').find('li').length;
});
}
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
.container {
display: inline-block;
}
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
float: left;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 0.8em; /* changed so the example fits in the snippet better*/
width: 120px;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="container">
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Worker 1</li>
<li class="ui-state-default">Worker 2</li>
<li class="ui-state-default">Worker 3</li>
<li class="ui-state-default">Worker 4</li>
<li class="ui-state-default">Worker 5</li>
</ul>
<div class="total">Total: 5</div>
</div>
<div class="container">
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">Worker 6</li>
<li class="ui-state-default">Worker 7</li>
<li class="ui-state-default">Worker 8</li>
<li class="ui-state-default">Worker 9</li>
<li class="ui-state-default">Worker 10</li>
</ul>
<div class="total">Total: 5</div>
</div>
<div class="container">
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Worker 11</li>
<li class="ui-state-default">Worker 12</li>
<li class="ui-state-default">Worker 13</li>
<li class="ui-state-default">Worker 14</li>
<li class="ui-state-default">Worker 15</li>
</ul>
<div class="total">Total: 5</div>
</div>

Create an Accordion Menu for Mobile Site Jquery and CSS

I have recently started designing a mobile website using media queries and browsing a few websites to see what they've done it seems accordion navigation menus are the way to go, scaling up to a normal horizontal navigation bar. I have browsed and browsed the internet looking for an accordion walkthrough but I can not seem to find one that explains it well enough.
A good example is the one from microsoft on their website. Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li>Link
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</html>
These navigation bars have submenus [nav ul ul] that slide out when nav ul li is clicked. I was hoping somebody could point me in the right direction as to how I go about making a slide down sub menu on click, or help me with the code.
I thought there may have been a basic one people could start using and edit to customise themselves.
Thanks for any help.
There is no need for Javascript - you may use a Checkbox instead.
Check out: http://codepen.io/TimPietrusky/pen/CLIsl
If you still want to do it with Javascript go for something like this:
// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
// prevent Click from redirecting
e.preventDefault();
// get the next ul after the li a clicked
if ($(this).hasClass('visible')) {
$(this).next('ul').slideUp(200).removeClass("visible");
} $(this).next('ul').slideDown(200).addClass("visible");
});
CSS animation for height form 0 to auto wont work. See: How can I transition height: 0; to height: auto; using CSS?
Check this out
https://jsfiddle.net/nqamazgz/3/
Unfortunately CSS does not have any click events, instead you will need to use JavaScript and/or jQuery. I used jQuery
All i did was add a class hide-nav to your nav with display none. And a button to click of course.
And a bit of jQuery
$(document).ready(function() {
$('#topMenu-btn').on('click', function() {
$('nav').slideToggle();
});
});
Try something like this:
http://jsfiddle.net/kb668aag/
You'll need to modify the code a bit.
<div id="topMenu"></div>
<nav>
<ul>
<li>Link</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</li>
<li class="has_children">Link
<ul class="sub-menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
CSS
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
padding: 20px 40px;
display: block;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
border-top: 2px solid #abc;
}
nav ul ul {
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
ul.sub-menu{
display: none;
}
.has_children > a{
color: #ddd;
}
JS:
var $menu_with_children = $('.has_children > a');
$menu_with_children.on('click', function(e){
e.preventDefault();
var $this = $(this);
if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
$this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
} else{
$this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
}
});

Categories