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.
Related
I use Googles polyfill dialog and want to increase it's height dynamically depending if a user clicks a dialog button to add more elements (rows) in it.
This is part the javascript which is called when the user cklicks that button :
var mc_dialog = document.getElementById('mc_dialog');
var h = mc_dialog.style.height;
console.log("mc_dialog height = ",h);
but height is simple empty, no value - nothing
While mc_dialog.style.height = "500px" works perfect.
Why do I not get the value of mc_dialog.style.height ?
EDIT :
Ok after the answer of Evil Penguin I set the height initially in the javascript function, which opens the dialog, like this :
mc_dialog.style.height = "500px"
and later when the user clicks to add content to the dialog I can retrieve the height now, so it look like this now :
var mc_dialog = document.getElementById('mc_dialog');
var h = parseInt(mc_dialog.style.height);
mc_dialog.style.height= h+50+"px";
and it works perfect.
But now I have the question why do I have to set the style.height initially ? Isn't it a permanent attribute of that element ? And if not, why ?
Here is similar question.
.style.height only works if you have set the property in the first place.
EDIT:
Here is reference of HTMLElement.style property. It says:
The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute.
So as i understand it, if there is no style="smth" in the element's inline declaration, HTMLElement.style.smth doesn't work.
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 trying to make a result screen in javascript that displays animated scores. For the specific field in the example it's supposed to go from the value to 0 in two seconds, two seconds after the screen appears. Since it's easy to change css values with animate() I thought I could assign the values to some custom css property, then have the element's value take it from there. According to this article I just have to place -- in front of custom css attributes and this one shows me how to use the animate() method. So I tried doing this
$elementSuccess.css('--value', scorePlus);
and it turns out --value's value is undefined. When I display scorePlus somewhere it appears, so it's defined. Is there another way to define a custom value?
Here is the entire code for this element. Will there be any errors with it if a custom attribute is defined correctly?
$elementSuccess.html(scorePlus);
$elementSuccess.css('--value', scorePlus);
setTimeout(function(){
$elementSuccess.animate({
'--value': 0
},
{
duration: 2000,
progress: function(){
$elementSuccess.html(Math.round($elementSuccess.css('--value')));
}
}
);
},2000);
Try this:
var scorePlus=100;
var $elementSuccess=$('.success');
var myObject = {score:scorePlus};
$elementSuccess.html(scorePlus);
$(myObject).delay(2000).animate({score:0},{duration:2000,progress:function(){$elementSuccess.html(Math.round(myObject.score))}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="success"></div>
Based on my understanding of your problem, basically using a pseudo myObject and animating its score property should provide you with the desired effect. Also, instead of setTimeout, I resorted to using delay().
My CSS rule looks like this:
#my-div{
display: none;
position: absolute;
left: -160px;
bottom: -150px;
}
I'm trying to get value of the left-property like this:
document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft
The problem is that both return null. Where is the problem?
The problem is that someElement.style.left only work if you have inline style. Since you apply your styling through a stylesheet, you will not be able to fetch the value the way you expect.
You have a couple of other approaches you could take to get the value through JavaScript:
window.getComputedStyle:
It is possible to get the computed style of an element using window.getComputedStyle, the problem is that it has quite limited support (IE9+). If you still want to use it you could wrap it up in a function to make it a bit easier to get each property:
function getCssProperty(elmId, property){
var elem = document.getElementById(elmId);
return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var left = getCssProperty("my-div", "left");
Working example
jQuery (or some other library):
Another option would be to use a JavaScript library like jQuery (or whatever you prefer), which will provide you with a cross-browser solution to get the value.
With jQuery you could use the .css() method to read the CSS-property of the element.
$(function () {
var left = $("#my-div").css("left");
});
Working example
You should call this
document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft
when document is loaded, if you call it earlier it will return null because element doesnt exists yet. So you can use jQuery to determine when all content is loaded.
$(function() {
//put your code here
});
The problem is that, since CSS is loaded separately from the JS, there's no official way to ensure that the style.left property will be accurate. The style.left property is a different, higher-priority style override.
You'll need to use the getComputedStyle function.
https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
Ex:
var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
Maybe you have to call your functions after document ready.
If you use jQuery you can find left value faster:
$(document).ready(function() {
var $left = $('#my-div').css('left');
console.log($left);
});
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