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).
Related
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,
});
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);
I asked a question yesterday on here and got some awsome help, but I need more help concerning more or less the same, only a bit different.
This is my old thread.
So ye, I made this and the idea is that you can customize the table to see it the way you want. for now its possible to drag the columns to change the order and its possible to order the columns on alphabet or high/low. Since I got help here, its now also possible to hide the columns.
Now I want to make the hiding process a bit more smooth, since its hard to see if something is hidden after a click if you use no animation. I use .fadeOut(200); now, but when the fading is done the column just 'jumps' to fill the gap, is it possible to animate this in some sort?
Edit: After thinking some more, I thought that I could just loop a -1px width untill the element's width is 1px and then just hide it, but for some reason that wont work, the table doesnt respond to .width(xxx); or .css('width', 'xxx');. It does change the value, but the td keeps the same width.
This is somewhat of a workaround, and there might be a better solution, but here it is anyway:
Animate the opacity to 0.0. Fadeout does the same, but it also sets display:none after completely fading out. It is the display:none that causes the adjacent column to jump and fill in the gap.
Animating will cause your hidden div to remain there. Now that it is no longer visible, animate its width to 0. This will cause the adjacent div to smoothly take over its place.
Once width is 0, set display:none
Here's a working sample I whipped up. Adjust accordingly to animate width: http://jsfiddle.net/x7BEv/8/
Here's how the magic happens:
$(document).ready(function(){
$('#button').click(function(){
$('#upper').animate({opacity:0.0},'slow').animate({height:'0px'},'slow',allDone);
});
});
function allDone()
{
$('#upper').hide();
}
I'm not sure how important the allDone() method is. You could probably do away with it.
you must use jqgrid
or just for sorting you can use tablesorter which is very easy to implement
Morning all,
I'm trying to create a Mootools effect to show and hide replies to a comment on a discussion board. When the user clicks the "replies" link in the comment I want to increase the height of the comment container and then fade in the replies content. If the replies content is already visible, clicking on the link would reverse the effect.
I've got it sort of working, but I'm having trouble getting the correct height of my hidden elements (repliesH in my JS). I've tried getDimensions(), measure() and getComputedSize(), but they all give the same result: when elements are set to display:none I get a height that is too small; when I set them to display:block the height is correct. Can any kind person spot where I'm going wrong?
http://jsfiddle.net/andfinally/tVBCa/
Cheers
Fred
=======================
A BIT LATER
Just noticed - the width of the .comments-list container seems to have something to do with this problem. When I remove that width the effect works OK. This probably means that getDimensions gets the height of an element when it's not nested in anything. Can anyone suggest how I can work out what the height'll be when it is nested?
Cheers
Fred
you could use Fx.Reveal, it's very useful when u encounter these kind of problems, and it simplifies A LOT your code, i.e. (I've forked your example) => http://jsfiddle.net/steweb/DH27F/
A simple way to workaround it:
replies.show();
var repliesH = replies.getDimensions().y;
replies.hide();
Just show it, get dimensions and hides it again. This runs so fast that neither is visible to the user.
Your updated Fiddle here.