I have a menu consisting of an <ul> in a Web CMS.
I want several menu items to have sub-items that are displayed in a dropdown list. These sub-items are <ul>s as well.
This is basically easy to do with a few lines of CSS and Javascript, but I am looking for a ready-made Javascript solution that helps me handle the following:
Deal with screen edge situations: If any part the dropdown menu would be outside the current viewport, place it so that it is completely within the viewport.
This is a bitch to code from scratch.
"Nice to have"s would be:
Centered positioning below the drop-down button
Adding a onclick event to the body so that clicking outside the drop down menu will close it; clean removal of the onclick event afterwards
But those I can do myself if necessary.
A nice, small, unobtrusive widget that magically converts my <ul> would be lovely.
If the solution is based on a framework, it has to be Prototype as that's what I'm using in the CMS.
You can get the offsets of the UL, and check whether those are in a certain distance of the viewport.
// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
ul.offset.x = viewport.width - ul.width;
}
It's also possible to get the exact position of the dropdown button clicked, and then you should apply basic math in order to position the menu beneath it.
Related
I have a Vue3 app with vue-draggable and I have a list of sortable cards which possibly contain long text inside. To make dragging easier, I want to hide the text contained in the cards and only show their title when one is being dragged. This makes it easier to drop the card into the right position.
In order to achieve this, the elements which I want to hide inside of the cards while one is being dragged are given a CSS class hidden-while-dragging and the whole collection receives a class dragging while an item is being dragged. This is achieved by setting a boolean variable to the correct value upon receiving the events start and end and conditionally setting the class on the whole <draggable> element. Then I have this CSS rule:
.dragging .hidden-while-dragging {
display: none;
}
This works fine except for one case: if I drag an element and, upon dragging, the height of the parent container changes (due to the disappearing of the content inside of the cards), I am not able to drag the item: it instantly gets dropped in place, and no end event is emitted, so for example the collection keeps the class dragging.
Afterwards, I am able to drop the element once again: the issue doesn't occur this time, because no change in height occurs, and after I drop the element, everything goes back to "normal".
I made this repo in order to have a reproducible example: https://github.com/samul-1/vue-draggable-bug-demo
Here's a codepen as well: https://codepen.io/samul-11/pen/mdjKvZa try and drag the first or last element and you'll see the issue.
You can observe the height of the #app element changing when dragging an element. An interesting thing is that this only happens if dragging the first or third item in my example, not the second. So apparenly the issue is with elements at the edge of the parent.
Is this a bug with the library or is there a way around it?
I got showable div called "Toolbox", inside it i got separate "tools" - dragable divs with some icons and input fields for little notes.
I want to show toolbox, grab selected tools, drag it out the toolbox and drop where it need to be (this dragable divs need to be in right places for print, it's not saved anyway). This step was easy and i got it already.
Now I want to hide back toolbox with his tools but keep dragged out tools still visible! How to do this?
-------- edit ------
Somwhere out of toolbox
Show toolbox
Then toolbox
<div id="toolbox" style="display:none;">
Hide toolbox
<div class="draggable" id="tool1"><img src="tool1icon.png"><input value="" id="tool1label"></div>
<div class="draggable" id="tool2"> ...
... more tools
</div>
I got working functions in separate js file for dragging showing and hiding - it's not a problem - i need to remove cascading hiding from children.
----- edit2 ----
Of course i have been here - http://www.w3schools.com/html/html5_draganddrop.asp
But it's not the solution i got working drag function, and i cannot specify new containers where to drop - dragable divs just stay where mouse key is released. Let's put this aside.
More important is how to release children from parent to not inherit parent (hiding) style and parent events? Any ideas, directions where to search?
---- eedit 3 -------
Been there - how to hide parent div, keeping inner div visible? - so still no solution
You have two possibilities:
A) change the parent for the moved children (for example create absolutely positioned div as child of body)
B) create duplicates and hide originals
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 trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
I'm building a jQuery based tree menu using jQuery sortable(). Here is my current code: http://jsfiddle.net/8KDur/.
As you see, the sortable function works fine.
But, the ui-behavior while dragging a tree li-item over the other tree items doesn't work the way I wish too. I want the li-items to stay still and the border between them highlight while dragging. Indicating between which items it will be placed.
So, how do I get the items to stay still while dragging?
I'd rather not use plugins for this.
You can use the placeholder option to specify a CSS class to use as the border between the items. Then, set helper to 'clone' which will create a duplicate of the list item you are dragging. By default, jQuery UI will hide the helper using an in-line display: none, so it may be necessary to override that if you want the list item to remain visible and static.
http://jsfiddle.net/8KDur/33/