change jquery masonry css with javascript - javascript

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"});

Related

Getting the width of a newly added element

I need to get the width of a newly added item using JavaScript or jQuery. I know if I need to bind an event to a newly added element I can use event delegation or the .on() method in jQuery. But in this case I’m not binding an event I just need to get the width of that element. How can I do that?
$('#box').width(); // won’t work
document.getElementById("box").width; // won't work either
To get the width
You can just use jQuery's .width() method:
$('#box').width() // Should give you the pixel width with no px/rem/%
// Or plain ol' Vanilla JS
document.getElementById('box').offsetWidth
// Or mix it up
$('#box')[0].offsetWidth
Possible issues
Make sure your element has been created, it is visible and you added it to the DOM.
Your element contains floated elements or absolutely positioned elements and therefore has not gained any width.
You're trying to retrieve the elements width prior to the DOM rendering.
Make sure your element is not affected by any stylesheet and has somehow become inline.
Loading issue
Make sure that your script is on the bottom of the page and/or you are using jQuery's .ready() method:
$(document).ready(function(){
$('#box').width();
});
// Shorthand for the above
$(function(){
$('#box').width();
});
Demos
VanillaJS Demo
jQuery Demo
If anyone can think of other issues or solutions please contribute to the answer.
Try this:
var box = document.getElementById('box');
alert(window.getComputedStyle(box).width);

How to add jquery .not() in a div inside the body when the body is the one being affected?

$('#button').click(function(){
$('body').css('-webkit-filter', 'blur(4px)');
});
When button is clicked, body is turned blur, but i don't want the div inside the body to turn blurred as well. How to do that? can i do that with the .not() jquery function?
No, the not([selector]) function is used for discarding elements from the current jQuery selection. It can't be used for exempting an element from an effect that is applied to one of its ancestor elements.
You could try to apply the blur to everything inside the body, except the div itself.
$('body').children().not('div').toggleClass('blur');
Fiddle
I would use something like this.
$('#button').click(function(){
$('body').css('-webkit-filter', 'blur(4px)');
$('body').find("div").css('-webkit-filter', 'blur(0px)');
});
Maybe I misunderstand the question, but couldn't you just add
$('#DIV').css('-webkit-filter', 'blur(0px)');
(where #DIV is the div you don't want blurred) and turn off the blurring on that specific element?
Edit: They were saying in the above answer that it couldn't be done, so maybe something like a container for everything except the div?
http://jsbin.com/eDIPoYU/1/

How to remove an css style from a div ?

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.

jQuery add class based on CSS characteristics

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.

How to make style of an element dependent on another element's style

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

Categories