I'd like to have elements on my page that expand on mouseover events. That's working great already, but when the elements are too close to the edge of their containing div, parts of the expanded section aren't visible (or show up outside the container).
How can I calculate a corrected position that would put the expanded element completely within the div? The expanding elements can have an arbitrary size, and so can the surrounding div.
If this code is static you can simply manually set the width of the containing and the contained div manually with CSS. However, if size of the containing div is variable based upon content you may want to use javascript (I like jQuery) to grab the width of the containing div and use that value as the final expand point of the contained div.
$('.contained_element').css("width", $('.container_element').width());
that jQuery will set the width of the contained element to the width of the containing element. jQuery's $(element).width(); can be used to grab the width of any element and use that value elsewhere in your code.
Related
How do I get the height of the following statement - angular.element('content') ?
I don't want to place it on the DOM, just get the height. Can I do this?
If I have to place it on the DOM first, how would I then get it?
I don't want to place it on the DOM, just get the height.
You see, this is a thing, we can't talk about height of the content independently of DOM, because what gives text a dimensions is the fact that it is a part of DOM, with some styles applied, being affected by other elements maybe, etc.
So if you need to get a height of the text you need to do following:
create empty element, e.g. div and append text content in it:
var div = angular.element('<div>content</div>');
append this element into DOM, probably setting styles which makes it "invisible"
div[0].style.cssText = 'position: absolute; top: -1000px;';
document.body.appendChild(div[0]);
calculate height
var height = div[0].offsetHeight;
remove element if you don't need it anymore.
document.body.removeChild(div[0]);
angular.element is just an alias for the jQuery function. So to answer your question, no, you cannot get the height of an element without placing it in the DOM. You can't even get the height of an element, if you add it to the DOM but don't show it.
If you want to get the height of an element, you can simply add it to the DOM, get the height and remove it again. This proccess happens so fast users won't notice it.
I am working on a dashboard where user can drag and drop elements to create html pages.Now,he can have multiple images using an image component.We have managed to calculate the z-index of the images and they can be adjusted using up-down keys.
Issue:
The issue we are facing is when we select a image component we attach a dotted layer above it for helping the user to easily drag and resize it.If the user places the images as shown in the image below
we are not able to select the inner image again because the z-index of the selection div(the one with the blue dots) is(has to be) the highest(highest bcoz we have to use it for all components).So if I try to select the inner image now it cannot be selected.How can I handle the situation? For reference it works on this site as expected.
I believe we have get the element under the parent when it is clicked.But not sure how!We are using javascript,jquery to handle the events.
You can use JavaScript or jQuery to get the position of the inner image, and when the user clicks on the outer image, check to see whether the mouse position lies within the range of the smaller image. The range can be calculated with the position, width, and height of the inner element.
To get the element's position: use jQuery .offset() or .position() (The former is relative to the document, the latter to the parent).
To get the mouse position: http://docs.jquery.com/Tutorials:Mouse_Position
You could consider hiding the masking element quickly in order to gather the coordinate for your underlying element, when done, you could re enable visibility for the masking element. Use document.elementFromPoint() in order to get the DOM item from mouse coordinate.
An example:
http://jsfiddle.net/s94cnckm/14/
Alternatively you can use The CSS property pointer-events: none; on the masking element.
Related:
https://developer.mozilla.org/de/docs/Web/CSS/pointer-events
How to detecting a click under an overlapping element?
Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.
If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/
You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method
If you have a document full of absolute positioned items and you set a document click handler (document.onclick = handler). Is it possible to get all objects that share the mouse position? i.e. two div boxes overlapped, not only the top one
Use the following algorithm:
find out the x and y coordinates of mouse.
Use document.elementFromPoint, add returned element to array.
Hide that element using display:none
Go to 2 until returned element is document.body
Display all hidden elements.
I want to insert an image tag into a block of text so that the image is, say, 100 pixels down in the DIV.
<div>
A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
</div>
So, the tag above is put in the text block to be floated so that it is positioned at 100px DOWN in the DIV. Now, this can't be done statically, it has to be done in javascript since 100px down in the div may be represented by different text depending on font rendering issues and such.
So, is there a way to find what "word" in a text block that is 100px down in the DIV? jQuery perhaps?
The short answer is no
Basically it comes down to the DOM doesn't give a way for you to get an elements pixel position. There are sort of hacks you can do for some browsers, but good luck getting a solution working.
If you cannot get the position of the containing div, you are not going to get the position for the text within.
Leaving aside the no, if you were to find a way to get the div's pixel height, I would follow a procedure similar to the following.
Get the text from inside the div and store it in a local var.
Inside a loop for each word in the text:
Insert a div tag into just before the word.
Get the pixel position of the div tag.
Use this to determine the closest word to pixel pos 100 down.
Once you have the closest position, create a document fragment to build up your new inner for the div
Replace the div's content with the document fragment.