How to check the visibility property with javascript - javascript

I tested the visibility of the following div:
<div id="div1">div</div>
with the style defined separately
#div1 {
visibility:visible; //or hidden
}
If the style is defined inline as <div id="div1" style="visibility:visible">div</div> there it's easy to check the visibility in the element.style.visibility property. But the problem is when the style is defined separately (as shown above - #div1, .div1 or div).
And so where can one check the visibility property using only pure javascript? jQuery returns correct style everytime (I dunno how to track it), so how did they do it? Here is one fiddle with my unsuccesful attempts, no tests except jQuery's work:
alert($(el).css('visibility')); // jQuery works well - returns correct property
alert(el.style.visibility); // not works - always empty string
alert(el.offsetWidth > 0 || el.offsetHeight > 0 ? 'yes':'no'); // also not working - always true - http://stackoverflow.com/questions/1343237/how-to-check-elements-visibility-via-javascript
alert(el.getComputedStyle); // undefined - http://stackoverflow.com/questions/4795473/check-visibility-of-an-object-with-javascript
alert(el.getAttribute('visibility')); // not works - of course null
Any ideas on how to succeed? Tested in latest Firefox 15.

getComputedStyle is a global method. Use it as follows:
window.getComputedStyle(el, null).getPropertyValue('visibility');

You are using getComputedStyle wrong:
getComputedStyle( el ).visibility
//"visible"
Demo: http://jsfiddle.net/hMFry/1/
In internet explorer you would use:
el.currentStyle.visibility;

getComputedStyle(el).getPropertyValue('visibility');

Related

JavaScript error: Uncaught TypeError: Cannot read property 'left' of undefined

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

Change height of panel form javascript

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.

loop over li's in prototypejs and get padding-left of each element

I'd like to display the padding-left of each li element but the hasLayout() method does work on the elements?!! All I get in the chrome console is:
Uncaught TypeError: Object #<HTMLLIElement> has no method 'getLayout'
Here is a jsFiddle to illustrate the issue: http://jsfiddle.net/nerdess/pax59/
<ol>
<li>onion</li>
<li>tomato</li>
<li>carrott</li>
</ol>
$$('li').each(function(li) {
var liLayout = li.getLayout();
console.log(liLayout);
});
I am using prototype 1.6.1.0 and the latest version of chrome (28.0).
The getLayout method does not exist in v 1.6.1 - you probably want to update your lib or use getDimensions.

Javascript - getting the background color of the hovered element

I'm currently making a google chrome extension and am using this javascript to change dynamically the background color of the hovered element:
var bindEvent = function(elem ,evt,cb) {
//see if the addEventListener function exists on the element
if ( elem.addEventListener ) {
elem.addEventListener(evt,cb,false);
//if addEventListener is not present, see if this is an IE browser
} else if ( elem.attachEvent ) {
//prefix the event type with "on"
elem.attachEvent('on' + evt, function(){
/* use call to simulate addEventListener
* This will make sure the callback gets the element for "this"
* and will ensure the function's first argument is the event object
*/
cb.call(event.srcElement,event);
});
}
};
bindEvent(document,'mouseover', function(event)
{ var target = event.target || event.srcElement;
/* getting target.style.background and inversing it */
});
bindEvent(document,'mouseout', function(event)
{ var target = event.target || event.srcElement;
/* getting target.style.background and inversing it */
});
and when used with static values, like target.style.background = #FFFFFF; when the cursor hover an element and target.style.background = #00000; when the cursor leave the element, it works perfectly. However, when I try to get the value of target.style.background or even target.style.backgroundColor, I always get rgb(255,255,255), no matter what the background color of the element is.
I know how to convert rgb to hexa and how to inverse it, but if I can't get the initial value of the background, it's useless.
So, my question is: why do var foo = target.style.backgroundColor; always return rgb(255, 255, 255) and how do I get the correct value?
Additional notes: the extension will be ported to other browsers later, so a cross-browser solution would be nice if it is possible.
In my experience, target.style is only populated with inline styling. To get style including css definitions just use the getComputedStyle method. For example
//instead of this
target.style.backgroundColor
//try this
getComputedStyle(target).backgroundColor
*Note that using the getComputedStyle method returns a read-only object, and target.style should still be used to set the background color.
You can't use .style to get settings that haven't been defined using .style or style="". Most browsers implement other ways for getting at current style calculations, these are a minefield of oddities however.
Internet explorer has .currentStyle, whereas the rest tend to implement .getComputedStyle. It would be a good idea to read up on these two subjects, to see their implementation — however, as I have said retrieving style settings is a much more complicated process than it first seems.
Even jQuery's css method only returns settings that have been specifically determined on that element i.e. no inheritance.
The following could be of use however:
http://upshots.org/javascript/jquery-get-currentstylecomputedstyle
The only reliable way I know of is to associate a CSS class or ID with a colour, then extract that from an anchor in a hidden element, or simply from empty anchor tag with the class applied. Otherwise it really is about knowing what that colour is and having it already stored as a value somewhere. My HTML would be the following for this solution:
<style>
a:hover,
a#yourChosenIdName {
background-color:#00FF00;
}
</style>
<!-- -->
<script>
var el = document.getElementById('yourChosenIdName'),
getStyle = el.currentStyle ? el.currentStyle : getComputedStyle(el),
hoverBackgroundColor = getStyle.backgroundColor;
//do something with background-color
</script>

How to detect text direction of element using Javascript?

What's the best way to detect the text direction of an html element using Javascript? I would expect to get either "rtl" or "ltr".
<div dir="ltr" id="foo">bar</div>
<div style="direction:ltr" id="baz">quux</div>
<div dir="ltr"><div id="jeez">whiz</div></div>
How would I test for the direction on "foo", "baz" or "jeez"?
getComputedStyle is available in modern browsers (IE9+ and the others).
getComputedStyle(document.getElementById('foo')).direction
http://jsfiddle.net/m8Zwk/
Reference to getComputedStyle on Mozilla Developer Network
Try this
document.defaultView.getComputedStyle(document.getElementById('baz'),null)['direction'];
OR
style = document.defaultView.getComputedStyle(document.firstChild,null);
console.log(style.direction);
#explosion-pills answer is correct. I did some more research for IE compatibility and came up with the following:
function getDirection(el) {
var dir;
if (el.currentStyle)
dir = el.currentStyle['direction'];
else if (window.getComputedStyle)
dir = getComputedStyle(el, null).getPropertyValue('direction');
return dir;
}
This should even work on Firefox 3.6 which requires null as the second parameter to getPropertyValue.
Since this gives more information I thought I would post it in case it helps someone.
You can simply use the style object:
console.log(document.getElementById('baz').style.direction);
DEMO
Take note that this object of the DOM only represents the in-line styles of an element, it doesn't apply to any css style sheets.

Categories