I need to mimic Wordpress "Widget" drag & drop behavior. jQuery UI Sortable can do it but not the same way as WP.
I can drag & drop now but the dropped element is removed from the source. That's not what I expected.
Let's say I have two <ul> A and B. I drag an item of A and drop it to B and I expect the item stay within A, not to be removed from it.
Any idea? I really appreciate your helps!
Check out the jQuery Draggable Sortable demo
If you want the draggable item to remain in the first list as well look you need to set 'helper' to 'clone'
ie.
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
Related
In Blazor, you can load content dynamically by putting it in an #if block and then making that condition true, e.g. on a button click.
I have a Bootstrap dropdown whose contents are loaded when the dropdown is first clicked. For some reason, the right alignment is not honored on the first click of the dropdown button but is on each subsequent click to open it. There is something about the initial render and the CSS not being honored. I am not sure why this is happening.
Here is an example (Blazor server-side): https://blazorfiddle.com/s/yc5m9rv4
Since Bootstrap dropdowns user popper.js, the solution was found through that. Bootstrap provides an update method to refresh the dropdown's position.
To solve this issue, the update method just needed to be called after the dropdown is rendered.
Here is an update, with this solution, to the example in the question: https://blazorfiddle.com/s/t24r1753
Is there a way to keep items in the dropdown list in an angular-mutliselect-ui-select control?
I want to click an item, so it is added as selected but keep it in the list (if it is clicked again- nothing should happen).
Straightforward hack is to change $select.removeSelected = true; to false in select.js. A small example is here (see script.js, line: 1244), may be there is a way to do it externally without modifying script.js.
I'm trying to remove the link href from an unordered list item.
The menu has been created by wordpress and I'm trying to remove the link from the first item, so that when I user rolls over the item the menu still drops down but the very first item (the one that triggers the drop down) isn't clickable.
Currently I just have href="#" in place but I'd like to remove the link altogether.
How can I go about stripping out the href element?
After creating the menu item place holder remove the # from the URL field to create the non clickable dropdown place holder.
This is possible by adding a custom link to the menu assigning it any url (for this example I just added #) then click add to menu. Once it's on the menu open it and remove the url you assigned and save. If you don't put the url initially WordPress won't let you add it to the menu. On your pages you will be able to hover over it and the drop down children will appear but you wont be able to click on the parent "place holder".
Note: This answer is from the same question on WordPress Answers
Click me
I am supposing the menu you are talking abou is an automatic one.
I would use jQuery to prevent the default action of the link.
<script>
$("menu-item-123").click(function(event) {
event.preventDefault();
});
</script>
I have a treeview control where I am dynamically selecting a node depending on user interaction. when a node is selected I want to be able to have the scrollbar go to the location of that selected node in the tree. The scrollbar is simply made by overflow:auto in the div tag where the treeview is located. Can someone give me some detailed code to accomplish this? Thanks in advance.
If the scrollbar is a browser default triggered by overflow:auto, you'll probably need to use javascript. See if the answer below works for you:
Programmatically scroll to an Anchor Tag
In other words, you will need to figure out the ID of the selected node (or insert an element with an ID into the text of the node), then insert a snippet of javascript into the page (using, for example, a Literal control) that will scroll to that element when the page is loaded.
It's hard to give specific examples without seeing your code, but let's say your selected node is called ActiveNode and you've inserted a literal control called litScript. Then you could do something like this:
ActiveNode.Text = ActiveNode.Text & "<a id='TVSelectedNode'></a>"
litScript.Text = "<script type='text/javascript'>document.getElementById('TVSelectedNode').scrollIntoView(true);</script>"
I'm using Views dropdown filter (with tags) and it works great. However I would like to customize it in this way:
1 - remove button "Apply" and automatically update Views (at the moment I'm updating it with Ajax)
2- allow my customer to change the order of the dropdown items (specifying top items)
3- select multiple items without having to press the SHIFT button on keyboard (do not unselect other items if new items are selected)
http://dl.dropbox.com/u/72686/viewsFilter1.png
Let's suppose the items in the image are tags... something like this:
http://dl.dropbox.com/u/72686/viewsFilter2.png
thanks
Use jQuery to .hide() the Apply button, and then set a handler on the filter fields so that whenever one of them is changed (i.e., by the user), the Apply button registers a click.
Hmm, can't help with this one. You might be stuck writing a custom module that hooks into the Views API.
Sounds like the Sexy Exposed module would solve this problem?
I'm using the following code to keep the items selected and it works.
$('#edit-tid option').click(function() {
$(this).toggleClass("selected");
$("option:not(.selected)").removeAttr("selected");
$("option.selected").attr("selected", "selected");
//submit request
$('#edit-submit-Portfolio').click();
});
When a request is submitted the page is refreshed. The selected items are still selected (class="selected") but the javascript code do not keep them selected.. I don't understand why, since they have the correct class attribute.
So.. it doesn't work after refresh, even if the html code is the same (the same class="selected" attribute is assigned to the same items).
thanks
I've solved point 1 and 2, installing better exposed filter module from drupal website.