I am using this plugin https://github.com/dbushell/Nestable
I have tried commenting various core code in it which it has helper comments like horizontal and vertical but still I am clueless on how to stop the horizontal dragging.
Let me elaborarte I only want vertical movements of elements and no horizontal movements of elements of which will lead to parent-child scenario
see the pic below
this is a tree view if you want to just align them equally you can simply use ul , li but if you have an object and it has parent/child nodes and you want to show them as a tree view except not having the indent then simply remove the indent with css or maybe there is a method or property in nestable to set amount of indent to whatever you want
Well found the answer , in case any one finds a flaw then please comment
$(element).nestable({
maxDepth: 1,
});
Related
I am working on a WP theme, and am having some trouble with the navigation.
The basic markup looks like this:
#navbar
ul.main-nav
li.menu-item.drop-submenu
ul.submenu
li.menu-item.drop-submenu
ul.submenu
li.menu-item.drop-submenu
etc. (any menu item can have unlimited submenus)
li.menu-item.drop-submenu
ul.submenu
li.menu-item
li.menu-item
li.menu-item
Now the problem I'm having is that a menu item with 2 or more submenus spanning to the right will eventually overflow off viewport. I'm using jquery to calculate the width and offset of the submenus and apply a class that will cause the submenus to drop on the left instead should they cause overflow. This was relatively easy to do for the "top-level" submenus, but i'm drawing a blank for the nested submenus.
Basically, i'm looking for a way to find out what set of submenus spans most to the right, but not the collective width of all nested subs, if that makes any sense...
I'm not even sure how to explain this properly, so if something is unclear i will try my best to clarify. Thank you in advance, any push in the right direction will be much appreciated.
EDIT: Made a JSFiddle
Basically, i'm looking for a way to find out what set of submenus
spans most to the right, but not the collective width of all nested
subs, if that makes any sense...
So, this will select all of the innermost submenus, which in your case would*(right?)* be those furthest to the right.
var $rightmost = $(".main-nav").find('.submenu:not(:has(.submenu))');
You could repeatedly select elements in the following way, adding a .left class to all outlying .submenus until all pass the in-viewport check you're running. Maybe put it in a while loop and see if your query results have a length, then run your checking and handling logic within.
var $rightmost = $(".main-nav").find('.submenu:not(:has(.submenu)):not(.left)');
lol. it's late here and i'm delirious, so if this sucks or doesn't make a clear argument, speak up!
Admittedly: I did not check this, so also speak up if it's funky.
Assumption
because of this,
I'm using jquery to calculate the width and offset of the submenus and
apply a class that will cause the submenus to drop on the left instead
should they cause overflow.
I'm operating under the assumption that you've already coded the viewport logic.
Edit: this works
though it could be optimized... And I didn't at all do it in the I think cool way I proposed. GSD
You could have a look at the Jquery positionCalculator that allows your script to check for collisions automatically (See the Bootstrap dropdown example at the bottom of the page).
I'm trying to make a "More" functionality for comments.
How I'm trying to make it work:
I split comment in 2 parts - 1st 200 symbols and the rest of the symbols.
The rest of the symbols are placed in a <span class="hidden_comment_container" ></span> which by default gets display:none
Toggle to show the rest is placed if needed (if comment length > 200 symbols).
This is working more or less fine (jsfiddle demo) but there are 2 problems.
Upon slidedown, hidden_comment_container receives display:inline-block and messes up things a bit, since it gets transferred to a new line (check demo to see what I mean)
When sliding down and sliding up, near the end of animation you can notice some twitching.
Can anyone please help me solve these 2 problems?
The first one can be resolved by adding the following to the case when the remaining text is hidden.
$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() {
$('.hidden_comment_container').css('display', 'inline');
});
Basically you're changing the display attribute of the .hidden_comment_container selector as I believe slideDown is adding a display:inline-block to it which would cause it to jump a line.
Fiddle here
Answer to point 2 can be found in Basic jQuery slideUp and slideDown driving me mad!; basically you need to explicitly add the height of the element before hiding / showing it.
As a side note the css property content can only be used with the pseudo elements :after and :before; I updated my fiddle accordingly.
An alternative solution
Have a look at this script, it does everything you need! I tested it already on another project and it works like a charm: jquery plugin to truncate elements based on height instead of number of characters
I am trying to implement drag and drop between 2 Div's
Please refer my fiddle below :
http://jsfiddle.net/sandeepkram/SAUCa/
This layout is a replica of my application. In the fiddle you can see that if you drag an element within the first div (on left side) it keeps moving within that div forever - though if you just motion to mouse to drag and drop it onto the right side div, it does actually work.
Here the problem is the indefinite scrolling / dragging of element within left side div. I dont know what the problem is here -
In my application I have another problem, in that when I drag an item out of the left side div, it vanishes though I can drop the cursor on right side div and the drop appears to have worked correctly.
Need help to know why the dragged element is disappearing.
I have looked up all the questions and resources related to this, sortables etc on stackoverflow and the net - but no use.
I have also tried to use the "stack" option but no use
$.each($("ul#secondaryKPIList ul > li"), function (index, tListItem) {
$(tListItem).addClass("SecondaryKPIDraggable");
$(tListItem).draggable({
revert : 'invalid',
stack: '.SecondaryKPIDraggable'
});
});
To solve the visual issue, you could just remove the overflow changes
overflow-y: auto;
overflow-x: hidden;
on the .KpisListItems setting it as the following fiddle: http://jsfiddle.net/GEWLs/2
These rules are messing with the way jQuery sortable handles and calculates the positioning, hence the strange behavior.
I know I'm kinda late, but heres is another solution that I find easier, just add the following css:
.ui-draggable {
z-index:9999;
}
9999 is probably overkill though.
My guess is it's because you are using 'list' markup. If you tried using 'divs' instead for your draggable items I'd wager it would work as it should.
I'm creating a list with handles for sorting. I don't like the aesthetics of having 20 handles visible, so I'm trying to make the handles appear only when the mouse hovers over a list item.
This was my first attempt:
jsFiddle #1
As you can see, hovering over items in the list creates a rather jarring movement and misalignment of list items. To fix this, I've created a blank 16px image that I use to replace the handle when it's not visible. It creates a much nicer user experience than hovering, as you can see here:
jsFiddle #2
$(this).prepend("<img src=http://i.imgur.com/tzGrVLc.png class=\"blank-sprite\" / width=16 height=16 border=0>");
The problem is that during sorting the 16px image often disappears, leaving things out of alignment. (I'd post an image but I don't have the reputation.) It doesn't always happen, but seems to happen more frequently when I'm sorting very quickly.
I'd love to know why this happens and how to fix it. Thanks!
You should set position css property of icon element to absolute. This is to give you the idea:
SEE DEMO
var $icon = $("<span class=\"ui-icon ui-icon-grip-dotted-vertical\" style=\"display:inline-block\" id=\"handle\" /></span>").css({
position:'absolute',
top:$(this).offset().top+5,
left:$(this).offset().left-10
});
$(this).prepend($icon);
instead of having the containment of the draggable element around it, how can I have it inside it? So you can drag the element anywhere as long as the edges of it do not collide with the element inside of it?
One approach is to use the drag event and update the ui.position or ui.offset fields, to manually constrain the item.
Here is a jsfiddle to illustrate the concept, although this doesn't fully implement what you describe.
You could fake it by making a real containing component that restricts your draggable element as if it is constrained by the smaller element. You would just have to make the dimensions of the real container like this:
Container.height = (Draggable.height - Restrict.height) + Draggable.height
Container.width = (Draggable.width - Restrict.width) + Draggable.width
Then, you would also need to counter the dragging motion so that the contained restriction element doesn't seem to move when the draggable element moves. Either that or the immobile section could be a floating div.
Building upon #RustyTheBoyRobot's answer you could also accomplish in CSS alone if you have known dimensions of your draggable.
Live Example - jsbin.com/agovex
The obvious downside of this is if you want to reuse this in multiple situations it's not going to work because the values are hardcoded in CSS. But if you only need it for one thing with known dimensions I find the CSS only approach simple and elegant. There's only one line of JavaScript to create the draggable.
If anyone else is interested in this, using Rusty's code and logic here's a JSfiddle link.