I am trying to build an application. I want to allow users to create their own menu (with submenus also). I want to make this with JavaScript to be "live" (something like: to click add a button and then drag and drop to order etc).
Do you think is there any jQuery/JavaScript/etc menu builder already for download?
I have tried to search menu builder javascript/jquery but I only found online menu builders (not to download).
Any type of code is accepted (related to js) - jquery, js, mootools etc
Thanks a lot!!! If the question isn't asked in the right place I will delete.
Edit: I don't need custom styles like "select a design for menu". It only needs t generate HTML <ul> and <li>
Try using jQuery UI alongside with jQuery (you must put jQuery UI script after jQuery and you must include a CSS theme e.g UI lightness). Start off with a <ul> and give it an ID (e.g #menu). Put all the base <li>s inside of it with the default values and the drag-and-drop <ul>s in a different element, e.g #items. Then in your script file, put:
$(function() {
$( "#menu" ).menu();
});
This will turn the ul into a menu. Now you want to make the items drag-and-droppable. In the same function, add this underneath $( "menu" ).menu();:
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
This will let you sort the menu items. To let you move them from place to place, add this to your function underneath ...disableSelection();:
$( "li" ).draggable();
$( "#menu li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#items" );
}
});
$( "#items li" ).droppable({
drop: function( event, ui ) {
$( this )
.appendTo( "#menu" );
}
});
Related
I'm trying to add/remove classes with jQuery to HTML elements generated by JavaScript dynamically. More specifically, to prettyPhoto's HTML in a WordPress theme. I need to add/remove a class to prettyPhoto's main parent div based on the class of a deep child link. This class gets changed by prettyPhoto. And all this HTML appears only when you click on an image on the page. I don't want to fiddle with the actual prettyPhoto script (included in the theme core files), so trying to do it with a jQuery function.
The HTML generated is (roughly) like this:
<div pp_pic_holder>
<1st level child>
...
<6th level child>
<a pp_expand>
And my current js is like this:
<script>
jQuery( 'body' ).on('change', 'div.pp_pic_holder', function() {
jQuery( "a.pp_expand" ).parents( "div.pp_pic_holder" ).addClass( "contracted" ).removeClass( "expanded" );
jQuery( "a.pp_contract" ).parents( "div.pp_pic_holder" ).addClass( "expanded" ).removeClass( "contracted" );
});
</script>
This doesn't work. I've tried with different options with .on and .live following examples from about 15 similar questions here on Stack Overflow, but nothing... I almost don't know js, so reading through the event delegation documentation only broke my brain.
Please help.
Thank you!
UPD:
Thanks to #Pete for his suggestions.
The code that finally made this work is this:
<script>
jQuery( 'body' ).on( 'DOMSubtreeModified', function() {
jQuery( "a.pp_expand" ).closest( "div.pp_pic_holder" ).addClass( "contracted" ).removeClass( "expanded" );
jQuery( "a.pp_contract" ).closest( "div.pp_pic_holder" ).addClass( "expanded" ).removeClass( "contracted" );
});
</script>
I am trying to use Sortable Widget to create a connect list where I have two containers one with available items and the other one where to drop items into.
I need to be able to do something when the item is moved from the left container to the right container.
This is my code to create both containers.
I tried to capture change event but that does not tell me if the item was added or not.
$( "#sortable").sortable({
connectWith: ".connectedSortable_1"
});
$( "#selected_sortable").sortable({
connectWith: ".connectedSortable_1",
change: function(e,i){
console.log(e);
}
});
What event can I fire to figure if the Item was moved from the left container to the right container?
You want to listen for the receive event of Sortable.
$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
I have this so far: http://jsfiddle.net/u5vhS/54/ .
What I want to be able to do is drag an app row to the dropdown menu to create a 'favorites bar' of sorts. I was looking at table drag and drop to do the table manipulations but I have no idea how I could make the dropdown menu 'accept' the new favorite. Any plugins or suggestions would also be much appreciated.
Something like this should get you started: http://jsfiddle.net/u5vhS/68/
JS: Using jQuery UI 1.8.16
$('#links_table a').draggable({ revert: true, helper: "clone" });
$('ul.dropdown-menu').droppable({
drop: function( event, ui )
{
$( "<li></li>" ).html( ui.draggable.clone()).appendTo( this );
}
})
$('a.dropdown-toggle').dropdown();
what I want to do is to know where (not in terms of position (x, y), but a reference to the DOM element) an object was dropped.
I have a grid made up with divs where you can drop various items and I need to know which div on the grid was the item dropped on (getting its id would be fine). The callback function
function(event, ui) { //code here }
has just that ui object who doesn't apparently contain any information about this, but only about the draggable item or its helper.
What you need to use is the jQuery Droppable class, which you can read about in the jQuery docs.
Basically, for every element that you wish to be able to drop a draggable element on, you create a Droppable object, which will trigger once another object is dragged onto it. This is the example from the jQuery docs:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
The $(this) in that example is the element you are looking for.