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.
Related
I am newbie on dojo and trying to setup the tooltip.
I have a element that is generated dynamically and i create a id attribute on the same to attach a tooltip to the element, when user hover on it, Dojo tooltip appears, when user click on it the element get removed and created again dynamically without the id, so the connected Tooltip get remain active and i am not able to close it, is there any way to hide the tooltip if connected id is removed.
Thanks in advance.
So , when you click on the element , that element get removed , so before it get removed get it's (click with event args in claback function ,get the id by event.target.id or this.id if event directly connected to the node)
after getting that Id you can hide the tooltip
var element = dojo.byId(Id);
yourTooltip.hide(element);
Thanks for your efforts bRIMOs Bor, But dojo tooltip uses connected id as a reference where to show the tooltip, we can't close a tooltip by getting element connected id when user mouseover the connected id.
Here is the code which worked for me. I just removed the dijitTooltip Class from the mastertooltip, which make a tooltip visible.
dijit.Tooltip._masterTT.containerNode.innerHTML='';
dojo.removeClass(dijit.Tooltip._masterTT.id, "dijitTooltip");
Thanks once again :)
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.
New to jQuery here. Love it so far, lots to learn!
Challenge: I cannot delete items inside a recently selected element.
Source: I used the jQuery UI Selectable/Serialize example. Works great, I'm able to select multi divs, insert content.
So far: I've tried assigning class and IDs to new element, but when I click on it, it always re selects the container not delete the element. To make matters worse it will place a new element in the child element.
How to select and delete these "child" spans that are created please? Try it here, select jobs or drag name to job, then try to delete the name you just added.
http://jsbin.com/azeqow/1/edit
(tried to add image of problem, I'm too new)
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 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