I have a div, inside that i have dynamically created another div.I need to move the dynamically created div and have to place it in desired position..Please Help.
I am having one main div. i am creating multiple divs dynamically using javascript and appending with main div as it's child.I have to move the dynamically created divs inside the main div on dragging on each div.I am able to get id of currently selected div(created dynamically)
Have you checked out jqueryUI's draggable?
After you have have loaded jquery and jquery ui on your page, you can make any dom element draggable with a code like this
$('div.inside').draggable();
If you want to constraint the draggable movement you can pass the wrapper into containment option, like this
$('div.inside').draggable({containment : 'div.outer'});
Or specifically if you want to contain it to the parent div just pass parent in the option, like this:
$('div.inside').draggable({containment : 'parent'});
Here is the fiddle
Related
I'm trying to retrieve an element inside a material dialog container so that I can use it's position.
I am using Material Angular, and specifically the Dialog.
So far I have tried the getBoundingClientRect() after getting the element with it's associated id.
Using document.getElementById(elementId).getBoundingClientRect() returns {"x":0,"y":0,"width":0,"height":0,"top":0,"right":0,"bottom":0,"left":0}
Where elementId is the id of the button that is inside the mat-dialog.
For anyone that comes across this from my stupidity, the answer is that the element I was looking for was hidden and had no position.
I had two buttons with the same id, and it just got the first one that was in the DOM.
Changing the id of the button fixed that.
I have a div which I need to empty excluding a couple of divs inside it, the problem is, I have got it to work but the div's lose there jquery click functionality.
I have a stage which will have items dragged on them but I need to be able to empty these items but retain the click buttons which are also on the stage and stored in a div called keep.
I found this and it works but the things inside #keep still appear but they lose their jquery .click().
var $stage = $('#stage'), $noRemove = $stage.find('#keep');
$stage.html($noRemove);
This is because they are being removed and then re-added.
You either have to remove the children. OR Rebind the click method afterwards.
So for example:
$noRemove.click(function(...){});
See the Fiddle here : http://jsfiddle.net/r98dj/1/
Also, as a note. Make keep a class. Otherwise you'll end up with multiple divs with the same ID and this will cause you to fail W3C validation.
I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.
I'm trying to make an jQuery toggle menu for a mobile website.
Since it is a wordpress site I would like to make this as dynamic as possible. I want to create a custom WordPress menu.
Now the tricky part comes.
I want it to check if the menu item has children (or child ul) and then toggle between:
<div class="plus">+</div> and <div class="min">-</div>.
When a item has no childeren nothing should happen at all.
So far I've managed to do this, please see my experiment at http://jsfiddle.net/jfvandekamp/9Dvrr/2/
You can use the jQuery function $.contains() to Check to see if a DOM element is within another DOM element.
http://api.jquery.com/jQuery.contains/
So in your example, you'd check to see if the menu item that was clicked contains another UL element
$jQuery.contains($(this), '<ul>');
I would use $.has() to filter out the collapsible items.
I've updated your jsFiddle: http://jsfiddle.net/9Dvrr/5/
How can I adjust the background color of a listview item in jquery mobile? Basically I'd like a user to click a item and have it and only it highlight, very simple, so I thought.
I thought this might achieve it (.groupList is an unordered list with that class). The event is fired but nothing changes.
$(".groupList li").bind('click', function() {
logger.debug("list row click");
$(this).closest("li").siblings().attr("data-theme","a");
$(this).parents("li").attr("data-theme","e");
});
I think the reason this is broken has to do with the fact I can't seem to set data-theme dynamically at all on listviews. I also can't use the background-color css with any luck.
It seems li tags can only have their data-theme set before appending to a list, once appended I can't get it to change.
The logic I've described here works on table rows just fine. Just bind the click event to tbody tr. The jquery functions closest, siblings and parent help us turn on/off the css for the background color. Again, not entirely sure why a listview breaks this.