I am using jQuery Autosize to enable automatic height for textarea elements.
When I focus the textarea it works great.
If I blur the texture I would like to remove the height to the texture to resize the height to the default value.
I would like to know what should I do on blur action in order to keep the textarea to the default value.
Here is what I am trying to do on javascript console to test my script.
When I load the page the textarea is on blur state:
$('#announcement').css('height'); // "36px"
If I focus the textarea:
$('#announcement').css('height'); // "90px"
$('#announcement').removeAttr('height');
$('#announcement').css('height'); // "90px"
// why do I continue to get this value even if I removed the Attribute height?
I know I can simply fix my problem simply making on blur action
$('#announcement').css('height', '36px');
but I would like o avoid to set css properties in javascript code.
Any ideas?
You can clear the style.height set directly on the element with this:
$('#announcement').css('height', '');
See working example here: http://jsfiddle.net/jfriend00/LXspR/
In your example, removeAttr() works on attributes, not style properties like style.height. .css("height") works on style.height.
Related
I am trying to get the width of a line of text enclosed within a div tag. However when i compare the width value returned by jQuery's .width, it is different from the values shown by chrome's element viewer.
The console printed value is 238px, however the chrome's element viewer shows 283px
The div tag is part of the shadow DOM of a custom polymer element, could this be the reason?
Is there any solution to this issue?
This is the tag for the line of text
<div id = "label" class={{buttonLoc}}>{{label}}</div>
The javascript calling the jQuery .width() function
console.log($(this.$.label).width());
Thanks!
Use the CSS jQuery method, specifying only the CSS value you want
var width = $('div').css("width"):
console.log(width);
Specifying only the first parameter gets the value, setting a second value in .css() will overwrite the value of the css property specified in the first parameter.
Maybe you have some box-sizing set which is changing the rendered value
You can also try innerWidth() / outerWidth() methods to obtain exact widths..
Just write :
$('div').outerWidth():
A more detailed explanation can be found in this answer
I'm trying to dynamically change the css properties of a jquery masonry plugin box.
Essentially, I'm going to make the box expand, i've this code, but it yields no results.
$container.click(function(){
var elem = document.getElementById($container);
elem.style.width="500px";
});
I expect for the width of the block to change to 500px when I click on it, but it doesn't.
Any insight on dynamically changing css via javascript would be great. Thanks!
All you need is:
$(this).css('width', '500px');
in the "click" handler. (That's assuming that the "container" is the box whose size you want to change.)
Change the handler internals to
$container.css({width:"500px"});
I have a problem - I want to DELETE the div's rather than just hide them with css on my web page. I'm newbie in Javascript and I can not say for sure whether this is but I think that should be used function removeChild(). Here's the script:
http://jsbin.com/ufoyor/edit#javascript,html/
It works like this:
1) "X" button hide pronto and crossClose divs due to the fact-purpose style of "hidden" these blocks.
2) The script sets a specific value in a cookie if the value matched the block is not shown (with style = "visibility: hidden;").
Yes, you can remove the element together with its subtree with removeChild().
However, for I suggest setting style display: none. It won't display at all (won't occupy the space as visibility:hidden does).
In plain JavaScript use removeChild(): https://developer.mozilla.org/En/DOM/Node.removeChild
In jQuery you have method remove(): http://api.jquery.com/remove/
I am looking for a method with jQuery (or plain JS) in which to build a conditional on whether a div has a specific CSS characteristic.
For example, I want jQuery to add position:fixed to an element's CSS when another element is set to display:none, though change back to position:relative on the first element when the second element changes to display:block.
Any ideas?
If your change is event driven you just add the code to your event handlers
so if element one is made hidden by a click - make element 2 position fixed
$("#element_one").click(function(){
$("#element_one").hide();
$("#element_two").css({"position":"fixed"});
})
if you just want to watch elements you will need timers (although I cannot really imagine a scenario where you do not trigger the change by either an event of programaticaly)
watchInterval = setInterval("watchMe()",10)
function watchMe(){
if ($("element_one").is(":hidden") ) {
$("#element_two").css({"position":"fixed"});
}
}
$('#elOne').css('display') == 'none' ? $('#elAnother').css({'position':'fixed'}) : $('#elAnother').css({'position':'relative'});
Would that do the trick?
or perhaps :
$('#elOne').is(':hidden') ? $('#elAnother').css({'position':'fixed'}) : $('#elAnother').css({'position':'relative'});
There's not any nice way of doing this as you cannot "spy" on CSS changes, though jQuery does have a watch plugn which can monitor changes on certain properties. Your best bet is to use getComputedStyle which will get the real CSS values used for any object and act accordingly.
I need to set some special style for an element if some other element is visible (which is indicated by a special css class and can change dynamically). I need to do this because the page rendering and it's behavior is fully controlled by some framework's code and I don't want to change it. I can put any content anywhere in the body of the page. Is there a non-hacking way to do it?
My only idea was to use some plug-in like "watch" for jquery, but it's very ugly.
try using the properychange/attributemodified event
$("object-in-question").bind("DOMAttrModified propertychange", function(e) {
if($(this).is(":visible")).... etc
});
http://jsbin.com/abece4