I wish to get the right position of an element. I have tried attr('right') and I have read the API document regarding .position().right which is non existent (I believe).
http://jsfiddle.net/xavi3r/vcuq7/
Is an example I wish to alert the right value for.
You want to find the value of the CSS right property?
$('#foo').css('right');
In plain Javascript:
document.getElementById('foo').style.right;
But, if you want to find the calculated distance from the right edge of an element to the right edge of another one, then you'll have to do that yourself, combining .position().left and .offsetWidth
It looks to me that this works:
jQuery('#elem').offset().left + jQuery('#elem').width()
Fiddle:
http://jsfiddle.net/adamovic/fcyL5sg0/
$(document).width() - ($('#elem').offset().left + $('#elem').width());
should get you the space on the right side of the element which you can then set as the value for the 'right' property of the element's position;
The CSS value is only valid if it's set via style or $.css().
But if you need to get the right position of an object, you should do it using javascript / jquery.
Although there are some valid solutions, it's important to note that $.fn.width() doesn't take padding and borders in account. So it's better to use outerWidth().
Example:
$(document).width() - ($('#elem').offset().left + $('#elem').outerWidth());
You can even create a $.fn function to get the value:
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
And then use it:
$('#elem').right();
you can try .css
.css("right");
As noted by #avernet in comments, the equivalent of an hypothetical .position().right would be expression like this:
$('#foo').offsetParent().width() - ($('#foo').position().left + $('#foo').width());
for pure js you can use
document.querySelector('.your-class').getBoundingClientRect().left
Related
This is a really annoying error and there seems to be various questions about this console error. It doesn't give me a whole lot to work with in the console using chrome.
/**
* Dropdown menu positioning
*/
loc.dropMenuPositioning = function (){
var dropMenu = $('.js-dropdown-item-wrap');
var mainNavigationOffset = $('.js-nav-container > ul').offset();
var mainNavigationPosition = mainNavigationOffset.left;
dropMenu.css({'left' : mainNavigationPosition - 60});
};
Sorry, i don't have much more to go with on this question. Any help would be greatly appreciated. Thank you.
You are reading the property left from an object returned in the previous row. The line that fails is:
var mainNavigationPosition = mainNavigationOffset.left;
The error means that mainNavigationOffset is undefined.
Because mainNavigationOffset is set as:
var mainNavigationOffset = $('.js-nav-container > ul').offset();
it is possible that jquery was not able to get the offset of the element $('.js-nav-container > ul').
As stated by the jquery documentation:
Note: jQuery does not support getting the offset coordinates of hidden
elements or accounting for borders, margins, or padding set on the
body element.
While it is possible to get the coordinates of elements with
visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
Check that the element is actually visible.
Another option (that seems what really happened) is that the jquery expression:
$('.js-nav-container > ul')
is not returning any element.
To see if the element is visible, you can use the chrome dev tool:
display must not be equals to none
visibility must be equals to visible
Or you can simply execute in the console:
$('.js-nav-container > ul').css("display");
$('.js-nav-container > ul').css("visibility");
Try this, jQuery doc
dropMenu.offset({ left: mainNavigationPosition - 60 });
Otherwise, you might need to set the position to absolute or relative:
link
Check if your jQuery version is up to 1.2, the .offset() method may not work in older versions.
jQuery 1.2 change log
I'm currently making a basic drag and drop system and need to retrieve the top and left properties of the element being moved. If I do this:
var mover = document.getElementById('mover');
alert(mover.style.top);
Will alert nothing ( ' ' )
Is there any way of retrieving CSS values (in JS) without having to define them with JS first?
You will need to use getComputedStyle if you wish to retrieve properties that are computed rather than defined.
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
FROM the MDN link...
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
You can get the position of the element as position().top, The css values can be retrieved as .css("margin-top") or .css("top")
alert($('#mover').position().top);
alert($('#mover').css("margin-top"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mover'>dasdasD</div>
Since you dislike jQuery, here is the solution in pure JS
Update :
var mover = document.getElementById('mover');
alert(window.getComputedStyle(mover).getPropertyValue('margin-top'));
<div id='mover'>dasdasD</div>
There are three possible tops to worry about:
The actual top position. Every element has a top resulting from the page layout, whether or not it has a computed value for the top property. Get this with getBoundingClientRect.
The computed value of the CSS property top. Get this with getComputedStyle, as mentioned in other answers
The current style value set on the element for top. Get this with elt.style.top as you attempted.
var mover = document.getElementById('mover');
alert(mover.offsetTop);
alert(mover.offsetLeft);
Using JS Can get the height of an asp.net panel
var test1 = $$('ViewFeatureProperties')[0].offsetHeight;
if (test1<500)
{
//change height of panel to 275
$$('ViewFeatureProperties')[0].offsetHeight = 275px;
}
could get the value in test1, but wouldnt update to 275 if test1<500, any advice? ta
The offsetHeight property is read only, use height instead.
Your first line of code and if statement are, at least syntactically, correct examples of how to use it. To set it change your code to read:
$$('ViewFeatureProperties')[0].style.height= '275px';
Notice I've also wrapped my value with ' so that I'm assigning it a string.
Alternative:
Since you're using jQuery it seems, you can use jQuery to set the height:
$('ViewFeatureProperties').eq(0).height(275);
No massive difference, it's just that you now still have your jQuery object if you want to chain more functions.
I want to set the color of "val" in the link in below code.
var link = $('' + val + '<br><br>');//this is the link
link.style.color="red";//this is how iam trying to set the color of "val"
SO HOW TO EXACTLY DO IT.
You can do this:
link.css({ color: 'red' });
But the correct and nice way would be:
$(".parent_element").prepend(''+val+'<br><br>');
$(".parent_element > a:first").css({ color: 'red' });
Try this:
$(link[0]).css({ color: 'red'});
The reason for this is that link is not an <a> element - it's a set of elements: <a>, <br> and another <br>.
Another approach would be:
link.css({ color: 'red' });
but this will set this CSS to not only <a>, but both <br>'s as well (not a big deal though).
If you are using jQuery(which it does seem like) go ahead with this,
jQuery
link.css("color","red");
Otherwise,
JavaScript
link[0].style.color = "red";
What you did doesn't work because link is an array. Before applying a style to it, you have to first select the first element by link[0] and then operate on it.
You could use link.style.color="red" if link was an HTMLElementNode, but it isn't. It might be a jQuery object, but if you are using an older version of the library then it will return undefined.
First you need to fix your jQuery call. You can't create multiple elements at the top level. (You can skip this bit if you are using a sufficiently new version of jQuery).
Since there is no good reason to use a double <br> (it shouts "Use CSS to add a margin instead"), I've taken them out:
var link = $('' + val + '');
Now you have a jQuery object so you can either use the jQuery method of setting CSS:
link.css("color", "red");
or get the HTMLElementNode from the jQuery object and use that:
link.get(0).style.color="red";
link.css("color", "red")
However, I think it would be better to create a css class for that and set up the color there. In Javascript/jQuery I would just add the class to the tag when needed. It is more elegant.
Trying to implement something similar to qtip, but using a table that compares the features of different things instead, and am running into an issue positioning the hidden elements I want to show on mouseover. Any help would be much appreciated. http://jsfiddle.net/2HMjQ/
Instead of event.pageY, I tried to use $(this).position().top and an offset of 50 to position is right below the link. See below,
content.on('mouseenter',function(){ //Used .on instead of bind
var index=content.index(this);
if(index<0){
stop();
}
else{
content.eq(index).css("font-weight","bold");
display.stop(true,true);
display.eq(index).css("top",+ $(this).position().top + 50); //Changed
display.eq(index).fadeIn('slow');
}
}).on('mouseleave',function(){ //Used .on instead of bind
var index=content.index(this);
display.hide();
content.css("font-weight","normal");
});
DEMO: http://jsfiddle.net/2HMjQ/13/
display.eq(index).css("top",+event.PageY);
needs to be:
display.eq(index).css("top",+event.pageY); - notice the lowercase 'p'.
It looks like there's a simple problem with case. event.PageY should be event.pageY.
I've fixed this and made some minor CSS changes tinkering around with your code here: http://jsfiddle.net/2HMjQ/11/