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);
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 position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
I have a group of jquery ui selectable things inside a div which expands to full size upon the hover event. The desired effect is that people can select/multi-select/lasso as many of the select-able objects as they would like. When they are done selecting, and the mouse goes to another part of the page, the div returns to its minimized size.
Basically I have it working, but when I lasso-select multiple objects, it seems that the :hover state is canceled or disabled. This leads to the div pre-maturely returning to its original size, and therefore destroying the user experience.
jsfiddle here: http://jsfiddle.net/Ty6RX/2/
The div in question contains the blue "All Customers". If you try lasso-selecting multiple objects you should see the problem. Any help is greatly appreciated!
when mouse is held down the element goes out of :hover and into the :active state w3schools reference. Fortunately, you can apply a CSS class to both states without interupting the user
try this
http://jsfiddle.net/Ty6RX/3/
#customer_picker:hover, #customer_picker:active {
...
height: 300px;
}
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 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