We Keep Coding

inline style height not updating

Really not sure what I'm missing here, but the height of the inline style just wont update.
Here is the code:
var rightSideHeight;
var optionsHeight;
$(".quickViewContent .selectboxit-container").live("click", function() {
rightSideHeight = $(".quickViewPopup .product-details-page .overview").height();
optionsHeight = $(this).find(".selectboxit-options").height();
var newHeight = rightSideHeight + optionsHeight;
$(".quickViewPopup.active .quickViewContent").css("height", newHeight + "px");
});
$("#product_childattribute_size_#(Model.Id)").bind({
"close": function (ev, obj) {
console.log("rightSideHeight = " + rightSideHeight);
$(".quickViewContent").css("height", rightSideHeight + "px");
// Tried
//$(".quickViewContent").removeAttr("style").css("height", rightSideHeight + "px");
//Tried
//$(".quickViewContent").get(0).style.setProperty('height', rightSideHeight + 'px');
}
});
So when a button is clicked I adjust popup height which works fine <div class="quickViewContent product-details-page" style="height: 653px;">
In the bind handler I want to revert the style, I can confirm the bind works because it's logging the original height. But the inline style just won't update which I thought was strange as it seems so simple.
Console output rightSideHeight = 365 so I expect <div class="quickViewContent product-details-page" style="height: 365px;">
Also there are no console errors.
Why won't it update ?
Thanks

Can you replace your last line of code with the following and see if it works>
$(".quickViewContent").css("height", rightSideHeight + "px");

Omg so I figured it out, basically it was because I was using the click event for the selectboxit button to set new height, but then using the close event for selectboxit to try and revert the height.
But because I was clicking on the button to close the dropdown, it was cancelling each other out. So the click event was cancelling the bind event.
Here is what I needed to do.
var rightSideHeight;
var optionsHeight;
$("#product_childattribute_size_#(Model.Id)").bind({
"open": function (ev, obj) {
rightSideHeight = $(".quickViewPopup .product-details-page .overview").height();
optionsHeight = $(this).next().find(".selectboxit-options").height();
var newHeight = rightSideHeight + optionsHeight;
console.log("newHeight = " + newHeight);
$(".quickViewPopup.active .quickViewContent").css("height", newHeight + "px");
}
});
$("#product_childattribute_size_#(Model.Id)").bind({
"close": function (ev, obj) {
console.log("rightSideHeight = " + rightSideHeight);
$(".quickViewContent").css("height", rightSideHeight + "px");
}
});
So basically use the open and close bind events, and set my heights using them. Doh sometimes this stuff drives me mad lol.
Thanks everyone

Use your code like this and it will work
$("#someElement").css({'height': setHeight+"px !important" });

How to detect margin-left of element with jQuery

Wird, I thought this is obvious but not necessarily, can anybody tell me how to detect margin with jQuery? I have this and in console i have good result but it's not working on page:
var margin_left = circle.css('margin-left').toLowerCase();
circles_container.css('margin-left', -margin_left + 'px');
Much thx for help.

I would say this should be more accurate:
var margin_left = circle.css('margin-left');
circles_container.css({marginLeft: '-'+margin_left});

OK i have this and also it's work:
var margin_left = l_circle.css('margin-left').replace("px", "");
container.css('margin-left', -margin_left + 'px');

Try this -
var marginLeftVal = circle.css('marginLeft');
marginLeftVal = parseInt(marginLeftVal)*-1;
circles_container.css({
marginLeft: marginLeftVal
});

YOu could also start using the JSizes library.
Found on this page:
http://www.bramstein.com/projects/jsizes/
Allows you to easily retrieve or set a property of margin, padding, or other attributes.

DOM element position based on view

How can I get position of an element based on view? So as viewer scroll I get different values.
jQuery is prefered.

Do you mean relative to the viewable window?
If so, you can use something like this:
$("#element").offset().top - $(window).scrollTop()
That will return a positive number until it is scrolled off the window, at which point it will return a negative number.

$(function() {
$(window).scroll(function() {
var pos = $('#button_id').offset(),
top = pos.top - $(window).scrollTop(),
lft = pos.left - $(window).scrollLeft();
$("#where").html("Top: " + top + "\nLeft: " + lft);
});
});
Try it out with this jsFiddle
HTML something like the following:
<div id="button_id">Button ID</div>
<div id="where"></div>

Maybe something like this?
(jQuery)
var pos = $('#button_id').position();
alert("POSITION: \nLeft: "+pos.left + "\nTop: " + pos.top);
Source:
http://blog.ekini.net/2009/01/30/jquery-find-position-the-exact-position-of-an-element-in-the-browser-window/
Good luck, if you edit your question maybe I´ll be able to helo you better

Different background position every click

Im trying to build sort of slide where when click on link ".animate" will change it position ( every time 100px more)
This:
$(function(){
$('#m-main').click(function(){
$('slide').animate({top : "100px"}, {duration:500})
})
});
will work only once.
How can I make this working?
Many thanks for your help.

$(function() {
$('#m-main').click(function(){
$(this).data($(this).data('pos') + 100);
$('slide').animate({top : $(this).data('pos') + 'px'}, {duration:500})
})
});

When it runs it sets the top padding to 100px, so after the first time it's just setting it to the same value it already has. You need to increment the value each time.
$(function(){
$('#m-main').click(function(){
var current = $('slide').css('top');
current = current + 100;
$('slide').animate({top : current+"px"}, {duration:500})
})
});
code above untested

Try using a counter instead of just top : "100px". It is just doing it once because essentially your setting top to 100px and then setting top to 100px again which is just keeping it where it is. You want it to move to 200px and then to 300px, etc.
Try this:
var fromTop = 100;
$(function() {
fromTop = fromTop + 100;
$('#m-main').click(function() {
$('slide').animate({top : '"' + fromTop + 'px"'}, {duration:500})
})
});

It looks like you've got some error in the query string in the click handler. $('slide') will select all <slide> elements, which I assume you have none, perhaps $('.slide') or $('#slide') is what you're after?
If you just keep a reference of the position you'd like the element to move to and increase that by 100 each time (see chaos's answer) then you should be right.

$(function(){
var pos=100;
$('#m-main').click(function(){
$('slide').animate({top : pos+'px'}, {duration:500});
pos=pos+100;
});
});

Try this:
$('#m-main').click(function(){
var slide = $('.slide', this),
posY = parseInt(slide.css("background-position").split(" ")[1]);
slide.stop().animate({backgroundPosition: "0 "+(Math.ceil(posY/100)*100 + 100)+"px"}, {duration:500});
});

How can I change one value in style attribute with JavaScript?

I have a div defined with a style attribute:
<div id="div1" style="width:600;height:600;border:solid 1px"></div>
How can I change the height of the div with JavaScript?

<script type="text/javascript">
function changeHeight(height)
{
document.getElementById("div1").style.height = height + "px";
}
</script>

Judging by his example code he is using the dojo framework. Changing height in dojo would be done with something similiar to the following:
dojo.style("div1", "height", 300);
http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.style

document.getElementById("div1").style.height = height + "px";

var d = document.getElementById("div1");
d.style.height = "300px";

Here is how it might look with jQuery:
<div id="div1" style="width:600;height:600;border:solid 1px"></div>
Change height to 300
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#div1').css('height', '400px');
return false;
});
});
</script>

Just replace your comment with:
node.style.height = height;
Oh, not sure if just passing 300 to your function will make it work, perhaps you'll have to pass "300px" like suggested in the other posts...

In dojo, you would do it like this:
dojo.style("div1", "height", "300px");
Having the units on the height is important, as mentioned in the docs.