We Keep Coding

Detecting elements margin-left on click is not working/not showing the right property? Why is that?

I'm trying to build a jquery image slider that is working based on left margin of the ul that holds the images so ul's width is image width * number of images. When i click next i want margin-left of the ul to be changed to marginleft-image width. The problem i have is with this piece of code.
next.click(function() {
if (ml == 0) {
carousel_canvas.css('margin-left', -iw);
} else {
carousel_canvas.css('margin-left', ml - iw);
}
});
carousel_canvas is the ul, iw is the image width and ml is
ml = parseFloat(carousel_canvas.css('margin-left'));
Ok so in the beginnig margin-left is 0 and on click margin-left is updated to -iw. Then when I try to click next again nothing happens since ml is still equal to 0 and in inspector it's clearly updated. Why is it getting the wrong value for margin left?
EDIT: here's jsbin of my problem https://jsbin.com/dohejizica/edit?output

I want to change opacity from 0 to 1 of the element when it's scrolled up to the top of the page

I'm using twitter-bootstrap on my page and I have a video background. It looks like this https://jsfiddle.net/Leytgm3L/41/ . When user scrolls down, the black section starts to appear and first its opacity is set to 0, but when user continue scrolling - it changes to 1 when he reach end of this section. I want to change that, so the section will have the opacity set to 1 when it fully appears on the screen, so the user will see the black background of this component when it's fully visible on the page.
So this is not good: http://i.imgur.com/dBtLqpq.png , but something like this one is: http://imgur.com/a/elZv5
I tried to go with:
$("#black").css("opacity",$("body").scrollTop()/1000);
but it didn't work. Can you help me with that?

Here is some code that changes the opacity as the user scrolls down, starting from opacity 0 at the top of the document, and becoming opacity 1 when they reach the element:
$("#black").css("opacity",1 -($("#black").offset().top - $("body").scrollTop()) / $("#black").offset().top);
It works by comparing the black element's position on the page against the current scroll value. For additional performance, you could cache the jQuery selectors and the call to .offset.
JSFiddle: http://jsfiddle.net/Leytgm3L/45/

How about checking the scrollTop against the height of the video container? Something like this:
$(window).scroll(function(){
$(".move").toggle($(this).scrollTop() === 0);
var videoHeight = $('.video-container2 video').height();
var scrollTop = $('body').scrollTop();
var opacity = scrollTop >= videoHeight ? 1 : 0;
$("#black").css("opacity",opacity);
});
Hope this helps

You can divide the scrollTop of body by the height of the video to get the transition you're looking for
var videoHeight = $('.video-container2 video').height();
var scrollTop = $('body').scrollTop();
var opacity = scrollTop / videoHeight;
$("#black").css("opacity", opacity);

Converting percentage number to marginTop animate in pixels value

I need to take a percentage value, convert it to pixels and move a div upwards using JQuery animate for a progress bar I'm trying to build. The div containing the graphic that needs to move upwards has a 268 pixel height (so that is our 100%).
as an example, I put 38% as the starting percentage value that I need to convert to a pixel value and move div with the id prog_anim to that number of pixels upwards (should be around 101 pixels)
var result = 38 / 100 * 268;
function bgr_animate(result) {
$('#prog_anim').animate({
'marginTop' : result
});
}
and then I have the following link on a button that performs the action:
a href="javascript:;" onclick="bgr_animate(result)"
being a total Javascript noob I have no idea where the above syntax is wrong. Can anyone correct me here? Thanks!

I see a few areas for improvement.
Instead of hardcoding 268, use var graphicHeight = $("#prog_anim").outerHeight();.
You'll need to reverse the direction of the margin top since you want it to move up. marginTop is one way to do that, but setting a CSS position: absolute; and using top instead of marginTop would be better.
So:
var result = -(38 / 100 * graphicHeight);

Try this:
function bgr_animate(percent, height) {
var pixels = percent / 100 * height;
$('#prog_anim').animate({
'marginTop' : pixels
});
}
And your button;
<a href="javascript:;" onclick="bgr_animate(30, 268)">

Try this out
$('#prog_anim').animate({
height: result
top:-=resultInc
}, 5000, function() {
alert("Animated");
});
Where resultInc is the number of pixels by which it grows
Using this you can move upwards and increase the height downwards giving the impression that it grew upwards

jQuery calculation doesn't add up as expected when toggling height

I have the following function for calculating the height of .node. It then takes away the height of a possible image, .node-image, from the height of the .node, and sets a column, .node-content-column to have a height that is the difference (i.e. 500 - 50 = 450; column becomes 450 in height).
function initColumnSizer() {
imageHeight = $('.node-image').outerHeight(true);
resizeHeight = ($('.node').outerHeight() + 75) - imageHeight;
$('.node-content-column').removeAttr('style');
$('.node-content-column').css('min-height', resizeHeight);
$('.node-content-column').css('height', 'auto !important');
$('.node-content-column').css('height', resizeHeight);
}
This function gets called on page load, and resizes .node-content-column as expected.
It also gets called when a div within .node is toggled using jQuery.toggle(), but this calculation returns a larger number everytime, instead of reverting back to the original once this toggle is reverted.
Can anyone see where I am going wrong with this calculation? Or if I am going about it the wrong way?
Thanks in advance!
Karl

1) Maybe the problem is in outerHeight() function (it takes into account padding and border). Try using just height or clientHeight:
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
2) why do you need to cleanup the whole elements' style?
and then you try to assign height = auto, and after that: height = resizeHeight - what's the purpose for that ? check the logic of your code.

outerHeight(true) will return height + padding + border + margin. Possibly, you might want to use height() ?

Most possible is that "larger number everytime" have always constant difference -- for example 75.
May be you just have some dependecies between .node-content-column and .node?
If your nodes like .node-content-column, .node and .node-image are all singles, then it's better to use IDs for them -- not CSS classes.

How do smooth slides work in javascript?

For a while now i have been trying to figure out the algorithms behind smooth slides, fades etc..in javascript. Just to give you an example of what am talking about, I have seen a div with content in it that had a height of 0px and on toggled, it didn't just snap to height, it smoothly and gradually grew to height using some sort of function. What i do know is that the height of this div was being assigned its height value from either a date object that had an interval set or a loop of some sort. I've searched all over the web trying to find tutorials explaining how this works but failed. Can someone please either explain to me how to create my own smooth fades, slides or reference some links that i can read?
PS: I know i can just use jquery, but i want to know how the fades and slides actually work.

It's quite simple actually. All of these animations use a timer (see setInterval) with a short interval, say 100 milliseconds, and every time the timer fires, the property (height or whatever) is changed by a fraction of the total amount instead of all at once.
For example, if you want to slide from a height of 0px to 200px in 1 second, then you could set up a timer that fires every 100 ms and increases the height of the DIV by 20px. That way, in 1 second, the timer would have fired 10 times and the height would be 200px.
A simple example:
function slideOpen(elem, finalHeight, slideTime) {
var count = slideTime * 10; // 10 intervals per second
height = 0, // current height
delta = finalHeight / count; // change in height per interval
var timerId = setInterval(slide, 100);
function slide() {
height += delta;
elem.style.height = height + 'px';
if (--count == 0)
clearInterval(timerId);
}
}

I have never looked at the jQuery code myself, but i'm pretty sure it uses a loop/timeout to increment the top/left/bottom/right css position of the element gradually using the specified easing equation.
You might want to have a look at jQuery source code for the animate() function.

CSS3 makes it trivial.
For non-CSS3 based solution, this is the first Google result for the query "javascript smooth animation": http://www.schillmania.com/content/projects/javascript-animation-2/

I am adding some code from one of my projects to move the div right
belolw xs_tuck() will be called till finalleftpositionval reaches
This code makes the div move to right.
if(xs_endpt<finalLeftPositionVal){
xs_endpt+=5;
xs_pDiv2.style.left=xs_endpt;
setTimeout("xs_tuck();",20);
}