Kendo UI sortable within a sortable - javascript
I'm trying to get the following to work:
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</div>
</ul>
</div>
<script>
$(document).ready(function() {
$("#sortable-basic").kendoSortable({
hint:function(element) {
return element.clone().addClass("hint");
},
placeholder:function(element) {
return element.clone().addClass("placeholder").text("drop here");
},
cursorOffset: {
top: -10,
left: -230
},
items: ".sortable, .sortable-div"
});
});
</script>
So the plan is the following:
You need to be able to drag the div's up and down other div's. This works fine. But you also need to be able to drag a single item around, in and out the div. This is the part I cannot figure out. When I click an item it selects the div anyways.
For the life of me i cannot seem to figure this out.
please try below code.
For your more reference, I was modify given link code:
https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables
$(document).ready(function() {
function placeholder(element) {
return $("<li style='color: red;' class='sortable' id='placeholder'>Drop Here!</li>");
}
$("#sortable-basic").kendoSortable({
connectWith: ".sortable-div",
filter: ".sortable", // Filter only list items that are direct child of the Sortable container.
// Use ".list-item" to allow parent items to use the nested Sortable.
placeholder: placeholder
});
$(".sortable-div").kendoSortable({
connectWith: "#sortable-basic",
filter: ".sortable",
placeholder: placeholder
});
});
#example {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist {
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title span {
display: none;
}
#sortable-basic {
padding: 0;
margin: 0;
}
li.sortable {
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
li.sortable:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span {
display: block;
float: right;
color: #666;
}
li.sortable:hover {
background-color: #dceffd;
}
li.hint {
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="example">
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</ul>
</ul>
</div>
</div>
Related
ondrop event - create new element
Im using sortable feature of jquery. please check the image, If i drag an item from Base Data and drop it in Filters, i need a text box to be created on Texfields column. i dont want to pre populate all the Filters and Textfields. so if i can drag and drop a item from base data that i require to Filters. A text box should be create for each drop.. help please!!! my code HTML <div class="col-md-3"> <h4>Base Data</h4> <ol class="simple_with_no_drop vertical"> <li>Item 1</li> <li>Item 1</li> <li>Item 1</li> </ol> </div> <div class="col-md-3"> <h4>Filters</h4> <ol class="simple_with_no_drag vertical" style="border: 1px solid #444;"> <br> </ol> </div> <div class="col-md-3"> <h4>Textfields</h4> <ol class="" style="border: 1px solid #444;"><br> </ol> </div> <div class="col-md-3"> <h4>Hierarchy</h4> <ol class="simple_with_drop vertical"> <li>Item 3</li> <li>Item 3</li> <li>Item 3</li> <li>Item 3</li> </ol> </div> CSS body.dragging, body.dragging * { cursor: move !important; } .dragged { position: absolute; top: 0; opacity: 0.5; z-index: 2000; } ol.vertical { margin: 0 0 9px 0; min-height: 10px; } ol.vertical li { display: block; margin: 5px; padding: 5px; border: 1px solid #cccccc; color: #0088cc; background: #eeeeee; } ol.vertical li.placeholder { position: relative; margin: 0; padding: 0; border: none; } JS/Jquery $(function () { $("ol.simple_with_drop").sortable({ group: 'no-drop', onDragStart: function ($item, container, _super) { // Duplicate items of the no drop area if (!container.options.drop) $item.clone().insertAfter($item); _super($item, container); } }); $("ol.simple_with_no_drop").sortable({ group: 'no-drop', drop: false }); $("ol.simple_with_no_drag").sortable({ group: 'no-drop', drag: false }); });
Please check below mentioned solution. It will help you. !function(t,e,i,o){function s(t,e){var i=Math.max(0,t[0]-e[0],e[0]-t[1]),o=Math.max(0,t[2]-e[1],e[1]-t[3]);return i+o}function n(e,i,o,s){var n=e.length,r=s?"offset":"position";for(o=o||0;n--;){var a=e[n].el?e[n].el:t(e[n]),h=a[r]();h.left+=parseInt(a.css("margin-left"),10),h.top+=parseInt(a.css("margin-top"),10),i[n]=[h.left-o,h.left+a.outerWidth()+o,h.top-o,h.top+a.outerHeight()+o]}}function r(t,e){var i=e.offset();return{left:t.left-i.left,top:t.top-i.top}}function a(t,e,i){e=[e.left,e.top],i=i&&[i.left,i.top];for(var o,n=t.length,r=[];n--;)o=t[n],r[n]=[n,s(o,e),i&&s(o,i)];return r=r.sort(function(t,e){return e[1]-t[1]||e[2]-t[2]||e[0]-t[0]})}function h(e){this.options=t.extend({},u,e),this.containers=[],this.options.rootGroup||(this.scrollProxy=t.proxy(this.scroll,this),this.dragProxy=t.proxy(this.drag,this),this.dropProxy=t.proxy(this.drop,this),this.placeholder=t(this.options.placeholder),e.isValidTarget||(this.options.isValidTarget=o))}function l(e,i){this.el=e,this.options=t.extend({},c,i),this.group=h.get(this.options),this.rootGroup=this.options.rootGroup||this.group,this.handle=this.rootGroup.options.handle||this.rootGroup.options.itemSelector;var o=this.rootGroup.options.itemPath;this.target=o?this.el.find(o):this.el,this.target.on(g.start,this.handle,t.proxy(this.dragInit,this)),this.options.drop&&this.group.containers.push(this)}var c={drag:!0,drop:!0,exclude:"",nested:!0,vertical:!0},u={afterMove:function(t,e,i){},containerPath:"",containerSelector:"ol, ul",distance:0,delay:0,handle:"",itemPath:"",itemSelector:"li",bodyClass:"dragging",draggedClass:"dragged",isValidTarget:function(t,e){return!0},onCancel:function(t,e,i,o){},onDrag:function(t,e,i,o){t.css(e)},onDragStart:function(e,i,o,s){e.css({height:e.outerHeight(),width:e.outerWidth()}),e.addClass(i.group.options.draggedClass),t("body").addClass(i.group.options.bodyClass)},onDrop:function(e,i,o,s){e.removeClass(i.group.options.draggedClass).removeAttr("style"),t("body").removeClass(i.group.options.bodyClass)},onMousedown:function(t,e,i){return i.target.nodeName.match(/^(input|select|textarea)$/i)?void 0:(i.preventDefault(),!0)},placeholderClass:"placeholder",placeholder:'<li class="placeholder"></li>',pullPlaceholder:!0,serialize:function(e,i,o){var s=t.extend({},e.data());return o?[i]:(i[0]&&(s.children=i),delete s.subContainers,delete s.sortable,s)},tolerance:0},p={},f=0,d={left:0,top:0,bottom:0,right:0},g={start:"touchstart.sortable mousedown.sortable",drop:"touchend.sortable touchcancel.sortable mouseup.sortable",drag:"touchmove.sortable mousemove.sortable",scroll:"scroll.sortable"},m="subContainers";h.get=function(t){return p[t.group]||(t.group===o&&(t.group=f++),p[t.group]=new h(t)),p[t.group]},h.prototype={dragInit:function(e,i){this.$document=t(i.el[0].ownerDocument);var o=t(e.target).closest(this.options.itemSelector);if(o.length){if(this.item=o,this.itemContainer=i,this.item.is(this.options.exclude)||!this.options.onMousedown(this.item,u.onMousedown,e))return;this.setPointer(e),this.toggleListeners("on"),this.setupDelayTimer(),this.dragInitDone=!0}},drag:function(t){if(!this.dragging){if(!this.distanceMet(t)||!this.delayMet)return;this.options.onDragStart(this.item,this.itemContainer,u.onDragStart,t),this.item.before(this.placeholder),this.dragging=!0}this.setPointer(t),this.options.onDrag(this.item,r(this.pointer,this.item.offsetParent()),u.onDrag,t);var e=this.getPointer(t),i=this.sameResultBox,s=this.options.tolerance;(!i||i.top-s>e.top||i.bottom+s<e.top||i.left-s>e.left||i.right+s<e.left)&&(this.searchValidTarget()||(this.placeholder.detach(),this.lastAppendedItem=o))},drop:function(t){this.toggleListeners("off"),this.dragInitDone=!1,this.dragging&&(this.placeholder.closest("html")[0]?this.placeholder.before(this.item).detach():this.options.onCancel(this.item,this.itemContainer,u.onCancel,t),this.options.onDrop(this.item,this.getContainer(this.item),u.onDrop,t),this.clearDimensions(),this.clearOffsetParent(),this.lastAppendedItem=this.sameResultBox=o,this.dragging=!1)},searchValidTarget:function(t,e){t||(t=this.relativePointer||this.pointer,e=this.lastRelativePointer||this.lastPointer);for(var i=a(this.getContainerDimensions(),t,e),s=i.length;s--;){var n=i[s][0],h=i[s][1];if(!h||this.options.pullPlaceholder){var l=this.containers[n];if(!l.disabled){if(!this.$getOffsetParent()){var c=l.getItemOffsetParent();t=r(t,c),e=r(e,c)}if(l.searchValidTarget(t,e))return!0}}}this.sameResultBox&&(this.sameResultBox=o)},movePlaceholder:function(t,e,i,o){var s=this.lastAppendedItem;(o||!s||s[0]!==e[0])&&(e[i](this.placeholder),this.lastAppendedItem=e,this.sameResultBox=o,this.options.afterMove(this.placeholder,t,e))},getContainerDimensions:function(){return this.containerDimensions||n(this.containers,this.containerDimensions=[],this.options.tolerance,!this.$getOffsetParent()),this.containerDimensions},getContainer:function(t){return t.closest(this.options.containerSelector).data(i)},$getOffsetParent:function(){if(this.offsetParent===o){var t=this.containers.length-1,e=this.containers[t].getItemOffsetParent();if(!this.options.rootGroup)for(;t--;)if(e[0]!=this.containers[t].getItemOffsetParent()[0]){e=!1;break}this.offsetParent=e}return this.offsetParent},setPointer:function(t){var e=this.getPointer(t);if(this.$getOffsetParent()){var i=r(e,this.$getOffsetParent());this.lastRelativePointer=this.relativePointer,this.relativePointer=i}this.lastPointer=this.pointer,this.pointer=e},distanceMet:function(t){var e=this.getPointer(t);return Math.max(Math.abs(this.pointer.left-e.left),Math.abs(this.pointer.top-e.top))>=this.options.distance},getPointer:function(t){var e=t.originalEvent||t.originalEvent.touches&&t.originalEvent.touches[0];return{left:t.pageX||e.pageX,top:t.pageY||e.pageY}},setupDelayTimer:function(){var t=this;this.delayMet=!this.options.delay,this.delayMet||(clearTimeout(this._mouseDelayTimer),this._mouseDelayTimer=setTimeout(function(){t.delayMet=!0},this.options.delay))},scroll:function(t){this.clearDimensions(),this.clearOffsetParent()},toggleListeners:function(e){var i=this,o=["drag","drop","scroll"];t.each(o,function(t,o){i.$document[e](g[o],i[o+"Proxy"])})},clearOffsetParent:function(){this.offsetParent=o},clearDimensions:function(){this.traverse(function(t){t._clearDimensions()})},traverse:function(t){t(this);for(var e=this.containers.length;e--;)this.containers[e].traverse(t)},_clearDimensions:function(){this.containerDimensions=o},_destroy:function(){p[this.options.group]=o}},l.prototype={dragInit:function(t){var e=this.rootGroup;!this.disabled&&!e.dragInitDone&&this.options.drag&&this.isValidDrag(t)&&e.dragInit(t,this)},isValidDrag:function(t){return 1==t.which||"touchstart"==t.type&&1==t.originalEvent.touches.length},searchValidTarget:function(t,e){var i=a(this.getItemDimensions(),t,e),o=i.length,s=this.rootGroup,n=!s.options.isValidTarget||s.options.isValidTarget(s.item,this);if(!o&&n)return s.movePlaceholder(this,this.target,"append"),!0;for(;o--;){var r=i[o][0],h=i[o][1];if(!h&&this.hasChildGroup(r)){var l=this.getContainerGroup(r).searchValidTarget(t,e);if(l)return!0}else if(n)return this.movePlaceholder(r,t),!0}},movePlaceholder:function(e,i){var o=t(this.items[e]),s=this.itemDimensions[e],n="after",r=o.outerWidth(),a=o.outerHeight(),h=o.offset(),l={left:h.left,right:h.left+r,top:h.top,bottom:h.top+a};if(this.options.vertical){var c=(s[2]+s[3])/2,u=i.top<=c;u?(n="before",l.bottom-=a/2):l.top+=a/2}else{var p=(s[0]+s[1])/2,f=i.left<=p;f?(n="before",l.right-=r/2):l.left+=r/2}this.hasChildGroup(e)&&(l=d),this.rootGroup.movePlaceholder(this,o,n,l)},getItemDimensions:function(){return this.itemDimensions||(this.items=this.$getChildren(this.el,"item").filter(":not(."+this.group.options.placeholderClass+", ."+this.group.options.draggedClass+")").get(),n(this.items,this.itemDimensions=[],this.options.tolerance)),this.itemDimensions},getItemOffsetParent:function(){var t,e=this.el;return t="relative"===e.css("position")||"absolute"===e.css("position")||"fixed"===e.css("position")?e:e.offsetParent()},hasChildGroup:function(t){return this.options.nested&&this.getContainerGroup(t)},getContainerGroup:function(e){var s=t.data(this.items[e],m);if(s===o){var n=this.$getChildren(this.items[e],"container");if(s=!1,n[0]){var r=t.extend({},this.options,{rootGroup:this.rootGroup,group:f++});s=n[i](r).data(i).group}t.data(this.items[e],m,s)}return s},$getChildren:function(e,i){var o=this.rootGroup.options,s=o[i+"Path"],n=o[i+"Selector"];return e=t(e),s&&(e=e.find(s)),e.children(n)},_serialize:function(e,i){var o=this,s=i?"item":"container",n=this.$getChildren(e,s).not(this.options.exclude).map(function(){return o._serialize(t(this),!i)}).get();return this.rootGroup.options.serialize(e,n,i)},traverse:function(e){t.each(this.items||[],function(i){var o=t.data(this,m);o&&o.traverse(e)}),e(this)},_clearDimensions:function(){this.itemDimensions=o},_destroy:function(){var e=this;this.target.off(g.start,this.handle),this.el.removeData(i),this.options.drop&&(this.group.containers=t.grep(this.group.containers,function(t){return t!=e})),t.each(this.items||[],function(){t.removeData(this,m)})}};var v={enable:function(){this.traverse(function(t){t.disabled=!1})},disable:function(){this.traverse(function(t){t.disabled=!0})},serialize:function(){return this._serialize(this.el,!0)},refresh:function(){this.traverse(function(t){t._clearDimensions()})},destroy:function(){this.traverse(function(t){t._destroy()})}};t.extend(l.prototype,v),t.fn[i]=function(e){var s=Array.prototype.slice.call(arguments,1);return this.map(function(){var n=t(this),r=n.data(i);return r&&v[e]?v[e].apply(r,s)||this:(r||e!==o&&"object"!=typeof e||n.data(i,new l(n,e)),this)})}}(jQuery,window,"sortable"); $(document).ready(function() { $("ol.simple_with_drop").sortable({ group: 'no-drop', drop: false, drag: false, onDrop: function($item, container, _super) { $('.selectedFilters').append('<li><input type="text" id="' + $item.data('id') + '" placeholder="' + $item.html() + '" /></li>'); $item.find('ol.dropdown-menu').sortable('enable'); _super($item, container); } }); $("ol.simple_with_no_drop").sortable({ group: 'no-drop', drop: false }); $("ol.simple_with_no_drag").sortable({ group: 'no-drop', drag: false }); }); body.dragging, body.dragging * { cursor: move !important; } .dragged { position: absolute; top: 0; opacity: 0.5; z-index: 2000; } ol.vertical { margin: 0 0 9px 0; min-height: 10px; } ol.vertical li { display: block; margin: 5px; padding: 5px; border: 1px solid #cccccc; color: #0088cc; background: #eeeeee; } ol.vertical li.placeholder { position: relative; margin: 0; padding: 0; border: none; } ol.selectedFilters { list-style: none; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <h4>Base Data</h4> <ol class="simple_with_no_drop vertical"> <li data-id="filter1">Base Item 1</li> <li data-id="filter2">Base Item 2</li> <li data-id="filter3">Base Item 3</li> </ol> </div> <div class="col-md-3"> <h4>Filters</h4> <ol id="filters" class="simple_with_no_drag vertical" style="border: 1px solid #444;"> <br> </ol> </div> <div class="col-md-3"> <h4>Textfields</h4> <ol class="selectedFilters" style="border: 1px solid #444;"><br> </ol> </div> <div class="col-md-3"> <h4>Hierarchy</h4> <ol class="simple_with_drop vertical"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> </div>
Custom CSS Navigation dropdown
Currently on my site when I have too many links, the link falls down below the navigation. See my example: https://jsfiddle.net/cn6z13n1/ Is it possible instead to have a More Links list item at the far right which will have a dropdown populated with links? .toolkit_nav { background:#dfdfdf; width:100%; height:40px; padding:0; } .toolkit_nav ul { margin:0; } .toolkit_nav ul .page_item { display:inline-block; line-height:40px; list-style-type:none; margin:0px; padding:0 20px; } .toolkit_nav ul .page_item:first-child { margin-left:0; padding-left:0; } .page_item:hover, .current_page_item { background:grey; } .page_item a { color:black; font-size: 0.9em; font-weight: 400; text-decoration:none; } <nav class="toolkit_nav"> <div class="row"> <div class="medium-12 columns"> <ul> <li class="page_item page-item-1035 current_page_item">Introduction</li> <li class="page_item page-item-1039">Digital Landscapes</li> <li class="page_item page-item-1039">Link 4</li> <li class="page_item page-item-1039">Link 3</li> <li class="page_item page-item-1039">Link 2</li> <li class="page_item page-item-1039">Link 1</li> <li class="page_item page-item-1039">Link 5</li> </ul> </div> </div> </nav>
You would need to do this in js i suggest something like this get the width of the row (max width for nav) loop through the li elements and sum up there width (+ remember to add the width of a "more" element here when sum of width > width of nav element hide the elements add js to your "more" button which shows the hidden elements Following code is not tested but should give you an idea: var maxWidth = $('#nav').width(); var moreWidth = $('#more').width(); // li "more" element var sumWidth = moreWidth; $('#nav li').each(function() { sumWidth += $(this).width(); if(sumWidth > maxWidth) { $(this).addClass('hide'); // add css for hide class } }); $('#more').on('click', function() { $('#nav .hide').fadeIn(100); // You will need more code here to place it correctly, maybe append the elements in an container }); Here an example with your fiddle: https://jsfiddle.net/cn6z13n1/3/ Note: this is just a rough draft, you might to calc paddings etc. to make this work rly good Edit: updated example with $(window).resize() function https://jsfiddle.net/cn6z13n1/6/
You'll need to change you HTML slightly but this will work. .toolkit_nav { background: #dfdfdf; width: 100%; height: 40px; padding: 0; } .toolkit_nav ul { margin: 0; } .toolkit_nav ul .page_item { display: inline-block; line-height: 40px; list-style-type: none; margin: 0px; padding: 0 20px; } .toolkit_nav ul .page_item:first-child { margin-left: 0; padding-left: 0; } .page_item:hover, .current_page_item { background: grey; } .page_item a { color: black; font-size: 0.9em; font-weight: 400; text-decoration: none; } /* NEW STUFF */ .sub-nav, .sub-nav li { box-sizing: border-box; } .more { position: relative; } .more>ul { display: none; position: absolute; left: 0; top: 100%; padding: 0 } .more:hover>ul { display: block; } .more>ul>li { display: block; width: 100%; clear: both; text-align: center; } .toolkit_nav ul.sub-nav .page_item:first-child { padding: 0 20px; } <nav class="toolkit_nav"> <div class="row"> <div class="medium-12 columns"> <ul> <li class="page_item page-item-1035 current_page_item">Introduction </li> <li class="page_item page-item-1039">Digital Landscapes </li> <li class="page_item page-item-1039">Link 4 </li> <li class="page_item page-item-1039">Link 3 </li> <li class="page_item page-item-1039">Link 2 </li> <li class="page_item page-item-1039 more">More... <ul class="sub-nav"> <li class="page_item page-item-1039">Link 1 </li> <li class="page_item page-item-1039">Link 5 </li> </ul> </li> </ul> </div> </div> </nav>
ordering images horizontally but not on the same level
I have the following div: <div id="features"> <div class="wrapper"> <ul> <li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li> <li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li> <li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li> <li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li> <li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li> <div class="clear"></div> </ul> </div> and I want that the images will be at the same size but be in different levels I cant upload photo but I attaching a link for a page that is a very good example of what I mean to http://www.wix.com/website-template/view/html/760?originUrl=http%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fall%2F32&bookName=new-ecom&galleryDocIndex=0&category=all&metaSiteId=
This is one way to do it, if I got your question right. .wrapper ul { display: flex; } .wrapper ul li { margin: 10px; list-style: none; } .wrapper ul li:nth-child(odd) { margin-top: 50px !important; } <div class="wrapper"> <ul> <li class="feature-1"><img src="img/black/blackMainImg.jpg" height="400px" width="180px"></li> <li class="feature-2"><img src="img/blue/blueMainImg.jpg" height="400px" width="180px"></li> <li class="feature-3"><img src="img/green/greenMainImg.jpg" height="400px" width="180px"></li> <li class="feature-4"><img src="img/red/redMainImg.jpg" height="400px" width="180px"></li> <li class="feature-5"><img src="img/yellow/yellowMainImg.jpg"height="400px" width="180px"></li> <div class="clear"></div> </ul> </div>
You could solve it like this: .wrapper li { float: left; /* Puts them on the same row. */ margin: 10px; /* Some space around them. */ list-style: none; /* Remove the bullet point. */ } /* Individual top margins for the different list items. */ li.feature-1 { margin-top: 20px; } li.feature-2 { margin-top: 40px; } li.feature-3 { margin-top: 0px; } /* ...and so on... */ You could also use the nth-child() pseudo-selector as suggested in other answers, but then it will not work in IE 8 and below (not a big problem, but still).
I've created something similar but without the images as I do not have them https://jsfiddle.net/cjqzpb7p/ <div id="features"> <div class="wrapper"> <ul> <li class="feature-1">Hi</li> <li class="feature-2">Block</li> <li class="feature-3">Blockz</li> <li class="feature-4">Blocks</li> <li class="feature-5">Blockx</li> </ul> </div> </div> #features li { height: 400px; background: red; width: 180px; display: block; list-style-type: none; float: left; &:nth-child(2n+2) { margin: 50px 20px 0 20px; } } Markup CSS done in SASS
Able to Drag but not Drop: jQuery Plug-in
I am trying to implement the drop and drop feature in my app using a jQuery plugin as described here: http://farhadi.ir/projects/html5sortable/ anyhow, I am only able to drag the list objects and not drop them in my project. Then, I tried to simply .html file that implements just the drag and drop described without all the complexities of my app. So, here is the code: <HTML> <HEAD> </HEAD> <BODY> <section id="demos"> <h1>Demos</h1> <style> #demos section { overflow: hidden; } .sortable { width: 310px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sortable.grid { overflow: hidden; } .sortable li { list-style: none; border: 1px solid #CCC; background: #F6F6F6; color: #1C94C4; margin: 5px; padding: 5px; height: 22px; } .sortable.grid li { line-height: 80px; float: left; width: 80px; height: 80px; text-align: center; } .handle { cursor: move; } .sortable.connected { width: 200px; min-height: 100px; float: left; } li.disabled { opacity: 0.5; } li.highlight { background: #FEE25F; } li.sortable-placeholder { border: 1px dashed #CCC; background: none; } </style> <section> <h1>Sortable List</h1> <ul id="sortable1" class="sortable list"> <li draggable="true" class style="display: list-item;">Item 1 <li draggable="true" class style="display: list-item;">Item 2 <li draggable="true">Item 3 <li draggable="true">Item 4 <li draggable="true">Item 5 <li draggable="true">Item 6 </ul> </section> </section> <script src="/html5sortable/jquery-1.7.1.min.js"></script> <script src="/html5sortable/jquery.sortable.js"></script> <script> $(function() { $('#sortable1, #sortable2').sortable(); $('#sortable3').sortable({ items: ':not(.disabled)' }); $('#sortable-with-handles').sortable({ handle: '.handle' }); $('#sortable4, #sortable5').sortable({ connectWith: '.connected' }); }); </script> </BODY> </HTML> But even this is not working. The examples given on the site are working properly, so there has to be something wrong. I have properly downloaded and included all the files that need to be downloaded/included?
There is an additional "/" in the relative address that you have defined. Remove it.
I think you need to close your li tags like this: <ul id="sortable1" class="sortable list"> <li draggable="true" class style="display: list-item;">Item 1</li> <li draggable="true" class style="display: list-item;">Item 2</li> <li draggable="true">Item 3</li> <li draggable="true">Item 4</li> <li draggable="true">Item 5</li> <li draggable="true">Item 6</li> </ul> fiddle
Running rb_menu() on one div
All of the submenus appear and overlap regardless of which of the three options is selected [Work, Services, Contact] and all are highlighted rather than the one the mouse is hovering over Is there a way to only display the sub menu that has been selected using CSS and hiding the rest until otherwise clicked? Can you use an example of how I would do this using the code provided: Javascript <script type="text/javascript"> $(document).ready(function(){ $('#menu-wrapper').rb_menu({ triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing' }); }); </script> <div id="menu-wrapper"> <div id="menu" class="menu clearfix"> <div class="toggle">Work</div> <div class="items"> <ul> <li>Basingstoke Treatment Works</li> <li>Project Two</li> <li>Project Three</li> <li>Project Four</li> <li>Project Five</li> <li>Project Six</li> </ul> </div> </div> <div id="menu2" class="menu clearfix"> <div class="toggle">Contact</div> <div class="items"> <ul> <li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li> </ul> </div> </div> <div id="services" class="menu clearfix"> <div class="toggle">Services</div> <div class="items"> <ul> <li>Site Logistics</li> <li>Waste Management</li> <li>Security Services</li> <li>Traffic Management</li> <li>Multi Service Gangs</li> <li>Facilities & Accommodation</li> <li>Small Works & Maintenance</li> <li>Catering Services</li> </ul> </div> </div> </div> CSS #menu { position: relative; top: 435px; left: -15px; width: 60px; height: 25px; } #menu2 { position: relative; top: 445px; left: -15px; width: 60px; } #services { position: relative; top: 428px; left: -15px; width: 60px; } .menu .items a:hover { text-decoration: none; } .menu .items a { font-size: 11px; color: #ABA099; text-decoration: none; } .menu .items { left: 180px; width: 250px !important; } .menu .items li { width: 250px; line-height: 19px; font-size: 11px; color: #ABA099; height: 19px; } .menu .items li a:hover { color: #4D4D4F; } .menu .toggle { color: #ABA099; font-weight: normal; } .menu .toggle-hover { color: #4D4D4F; }
It looks like your css styles are being overridden somewhere in your page. I have setup a sample page for you to try - this works for me. Include the following code in the head of your document: <link rel="stylesheet" type="text/css" href="http://www.getintothis.com/pub/projects/rb_menu/css/rb_menu.css" media="screen,projection" /> <style type="text/css"> #menu-wrapper { border: 1px solid #bcd; background: #fbfbfb; padding: 12px; overflow: hidden; width: 540px; height: 320px; position: relative; } .menu { margin-bottom: 10px; } .toggle { padding: 6px; margin-bottom: 2px; font-size: 12pt !important; } .items { margin-left: 46px; } .items li a { padding: 2px; } </style> <script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery.ui-1.7.min.js"></script> <script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/rb_menu.js"></script> <script> $(document).ready(function(){ $('#menu1').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'}); $('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'}); $('#menu3').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'}); });</script> Then add the following in the body: <div id="menu-wrapper"> <div id="menu1" class="menu clearfix"> <div class="toggle">Work»</div> <div class="items" style="display: none; "> <ul> <li>Basingstoke Treatment Works</li> <li>Project Two</li> <li>Project Three</li> <li>Project Four</li> <li>Project Five</li> <li>Project Six</li> </ul> </div> </div> <div id="menu2" class="menu clearfix"> <div class="toggle">Contact»</div> <div class="items" style="display: none; "> <ul> <li>Mick O'Gorman<br />mick#ogormanconstruction.co.uk<br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br />barry#ogormanconstruction.co.uk<br />+44(0) 7515 569 086</li> </ul> </div> </div> <div id="menu3" class="menu clearfix"> <div class="toggle">Services»</div> <div class="items" style="display: none; "> <ul> <li>Site Logistics</li> <li>Waste Management</li> <li>Security Services</li> <li>Traffic Management</li> <li>Multi Service Gangs</li> <li>Facilities & Accommodation</li> <li>Small Works & Maintenance</li> <li>Catering Services</li> </ul> </div> </div><!--End menu3--></div><!--End menu-wrapper--> I hope this helps! :)