How to find element with biggest z-Index? - javascript

I have a lot of dynamic created elements, anytime it getting z-Index++, so that the latest element is anytime on top. When one other of them will be clicked, he get his z-Index max+1. So i need to get the element, that is on top, how can i do it?
Native JS Only please. Thank you

Don't try to find it - you would need to iterate all your DOM. As you are creating them dynamically, just save a reference to it and update it each time. Or just store the current highest z-index value in a max variable.

http://jsfiddle.net/h4ets/
assuming you are only applying z-index in the style attribute
var elems = document.body.getElementsByTagName("*");
var largest;
var check = 0;
for(i=0;i<elems.length;i++){
if(elems[i].style.zIndex > check){
check = elems[i].style.zIndex;
largest = elems[i];
}
}
// largest is the element
// check is the z-index value of the element with largest z-index
getting the computed style of elements seems to be an issue in webkit browsers such as chrome, and safari as it returns auto, this is a major isssue as chrome especially now is a popular and widely used browser. so for now i would suggest if you want to do this apply the z-index in a style attribute until the bug is fixed

This a best solution
$(function(){
var maxZ = Math.max.apply(null,$.map($('body > *'), function(e,n){
if($(e).css('position')=='absolute')
return parseInt($(e).css('z-index'))||1 ;
})
);
alert(maxZ);
});

Related

offset() of zoomed element

jQuery documentation for offset() states:
Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
However, is there a way I could calculate the correct offset in browsers in touch environment when using spread to zoom in the contents of a page?
I created a small sample demonstrating the issue: https://jsfiddle.net/dhykgsmp/4/ (open in Chrome). Please scroll down and click zoom in. The offset of the autocomplete input is wrong.
Thank you.
I had the same problem and found a workaround.
You need a root child element with zero offsets to make this work.
$.fn.oldOffset = $.fn.offset;
$.fn.offset = function () {
var c = $.fn.oldOffset.apply(this, arguments);
// root child element with zero offset
var wrc = $('body').children().first().oldOffset();
var needToFix = wrc.left > 0 || wrc.top > 0;
if (needToFix) {
return {
left: c.left - wrc.left,
top: c.top - wrc.top
};
} else {
return c;
}
}
I'm not sure what the intended functionality of this code is, but if you'd like the 'autocomplete input' element to be positioned relative to the 'autocomplete container' I would suggest using the .style.top attribute, or getting the location with Element.getBoundingClientRect() and setting the position accordingly in your positionDropdown() function.

Javascript - Get the width of an undefined element

I have a div element, that has no defined width or height. It holds other elements, and molds on their size.
I need to get the final size of the div, without being able to check the sizes of the elements inside of it (dynamic elements).
I tried parsing all the properties of the object, but found nothing, all were "undefined".
Any thoughts?
Many thanks
Later edit:
I have
<div id="xxx" style="position:relative;">
aaaa
</div>
I tried:
var a = mydiv.style.width;
But it did not work.
I also tried:
var getKeys = function (obj) {
var keys = [];
for(var key in obj){
document.write(key+"="+obj.key+"<br>");
}
return keys;
}
getKeys(mydiv.style);
To show all the properties, but none had any info.
The jQuery solution works perfectly, but getComputedStyle was what I was looking for, as I can't use jquery here.
Sorry for the short information.
Based on no information whatsoever about what you were doing, I'd suggest that you should (if possible) use the window.getComputedStyle() approach, which finds the properties of an object as rendered by the browser:
var elem = document.getElementById('elemId'),
properties = window.getComputedStyle(elem, null),
height = properties.height,
width = properties.width;
If you have jQuery available, then you can simply use the width() and height() (or outerWidth()/outerHeight()) methods:
var height = $('#elem').height(),
width = $('#elem').width();
You don't give a whole lot of information. I'd suggest you edit your post with the actual code you tried using.
However, with JQuery:
$(DOMElement).width() //-- Element width.
$(DOMElement).innerWidth() //-- Element width + padding.
$(DOMElement).outerWidth() //-- Element width + padding & border.
$(DOMElement).outerWidth(true) //-- Element width + padding, border, and margin.
$('div').width() will return the width...

js style properties returns blank

I am trying to receive the original CSS width value of an object using JavaScript. However, if I use:
var originalWidth = document.getElementById(<idOfObject>).style.width;
It always returns blank. I've also noticed that any property I access using this syntax will return blank. I know for sure that the given element exists, since
alert(document.getElementById(<idOfObject>));
does shows me the right object.
Can anyone help me to solve this problem?
You probably try to get the value which was set in stylesheet, not directly like this:
document.getElementById(<idOfObject>).style.width = '100px';
If you want to get the width of the element you can use innerWidth property:
var width = document.getElementById(<idOfObject>).offsetWidth;
None of the previous answers were right.
The property you are looking for is clientWidth, but not in "style"
document.getElementById('idOfObject').clientWidth;
That will work both on "width" set with external css, style seccion or even inline style="width:80px"
General note: don't use <div width="500"> as it has no effect
The mentioned offsetWidth is the second best choice, but it does not return the exact width set in css, but that width plus border width
Other options like innerWidth that works with window object didn't work for me on divs.
This bizarre issue of realizing style.width not working properly, wasted 2 hours of my precious time :-), hope this answer shorts that time for anyone else in the future.
<div style="width:10%" id="mydiv" >
OR
<div style="width:10px" id="mydiv" >
var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;
alert(curr_width);
This works for me
I tried it and I can get the value
http://jsfiddle.net/xyd95/
Well, unless the width has no unit
http://jsfiddle.net/xyd95/1/
I believe this will work
function getWidth()
{
x = document.getElementById(<idOfObject>)
return x.offsetWidth;
}

Check if size has been set with JavaScript in IE

I was wondering if there was a way in JavaScript to check if the size of an element has previously been set? Even though this obviously wont work, this is kind of what I need to happen.
if(element.style.width === undefined)
element.style.width = 'auto';
I was wondering if this might work due to a non set opacity returning full. Maybe the same applies to...
element.style.width = element.style.width; // If not set then it will set it to default value?
Thanks in advance.
EDIT
Using this code I have managed to get it working in IE8. IE7 and 6 still are not working though, any suggestions?
element[e].style.width = element[e].style.width;
element[e].style.height = element[e].style.height;
if(element[e].currentStyle)
{
element[e].style.width = element[e].currentStyle.width;
element[e].style.height = element[e].currentStyle.height;
}
In IE, you can check an element's width using
var width = element.currentStyle.width;
The default value (i.e. if the width has not been set by any style rule or script) is auto.
Okay, my post sort of dropped of the radar, I eventually fixed it by applying this property.
zoom: 1;
It then worked in IE6, IE7 and IE8.
Thanks anyway.

Div absolute position relative to static elements

I have a div element which I'm using as a pop-over search field which I want to have appear under the element which is being filtered. However, it seems that I cannot use the style.bottom and style.left of the element I want the field to be relative to as this element is static.
Example is here: http://www.is-epic.co.uk/example/example.html
Clicking the Header 2 link will have the input box appear, in the top-left corner of the table. I would like it to appear roughly where Data 1.2 is. How do I achieve this?
(Code in example.html is on one page, in live dev CSS and JS are in separate files)
Set the element you wish to position the other element with respect to to position: relative.
This will make it the containing block for any descendants that are position: absolute (unless an element between the two is also position: not static).
this works in FF and Google-Chrome
var head = document.getElementById("header_2");
var filter = document.getElementById("search_filter");
filter.style.display = "";
filter.style.left = head.offsetLeft + 'px';
filter.style.top = head.offsetTop + head.offsetHeight + 'px';
it should work with IE as well..
i used variables filter and head to cut down on typing :)
The problem is that for header_2 both style.left and style.bottom are 0, so that
document.getElementById("search_filter").style.left =
document.getElementById("header_2").style.left;
document.getElementById("search_filter").style.top =
document.getElementById("header_2").style.bottom;
is equivalent to
document.getElementById("search_filter").style.left = 0;
document.getElementById("search_filter").style.top = 0;
which is exactly what happens. You have to find out header_2's actual position, e.g. using jQuery.

Categories

Resources