We Keep Coding

(js) moving div x pixels smoothly with jquery or similar?

I have an image that when clicked should move a div up ~200px, I have it set through jquery to modify css without isssue but it doesn't look as 'clean' or smooth as i've seen on other websites.
Forgive me but i've been searching for a few hours and can't find the function/method to do this, I figured fadein/out would do this but i'm fairly sure it cannot.
Could anyone take a moment to point me in the right direction? Thank-you.
EDIT: After writing this I thought maybe I should quickly incrementally change the css via jquery to simulate a low-fps 'glide' .. hopefully there is an easier way
EDIT2: Currently use this, looking for a way to do it 'smoothly' if that even makes sense
$('#Table_Topbar').hide();
var pix = "px";
var fix = $('#Table_Middle1').css('top');
var fix2 = fix.replace('px','');
var fixsub = (fix2 - 200);
var fixstring = fixsub.toString();
var fixconca = fixstring.concat(pix);
$('#Table_Middle1').css('top',fixconca);

If you want to do this using only Javascript, you could also simply use an interval to update the css every xx number of milliseconds, for 60fps you'd use 16. (This is not the best way)
var i = parseInt($("#Table_Middle1").css("top"));
var animationLoop = setInterval(function() { i += 10; $("#Table_Middle1").css("top", i + "px"); }, 16);
A simpler way would be to use jQuery's animate api: http://api.jquery.com/animate/. (this is the most cross-browser friendly way)
$('#Table_Middle1").animate({top: "-=200px"}, 1000); // take 1 second to move up 200px
You could also use a CSS3 transition to accomplish the same thing, and reduce your JS to a simple class toggle (This is the most "modern" way)
jQuery:
$('#Table_Middle1").addClass("class-to-trigger-animation");
css:
#Table_Middle1 { top: 500px; transition: top 1s ease; }
#Table_Middle1.class-to-trigger-animation { top: 300px }
If you want more complex animations, you could consider a library like Greensock.

You could use a combination of js (jQuery) and CSS here, eg.
CSS:
.switch {position: absolute; top: 0; left: 0; transition: top 1s}
.switch.active {top: 160px}
jQuery:
$('.switch').click(function(){
$(this).toggleClass('active');
});
Check out the fiddle here: http://jsfiddle.net/pavkr/Lu7q2c1r/1/
You would need to adjust the parameters however, this is just a quick example.

How to create a transparent region (div) over semi-transparent background?

I want to create a 'magnifying lens' ui for a web page. Anything on the page directly below the lens should be visible, while everything else should be made semi-transparent. In other words, I want to create a semi-transparent layer (which blocks the entire page) with a transparent 'hole' (lens) in it. I should be able to move the lens around, and possibly, resize the lens as well. I have thought of a solution that involves covering the entire page with 3x3 divs, making all the divs semi-transparent except for the middle one which will host the lens and will be completely transparent. I would then handle resize & move of the lens-div (and other divs around it) in javascript. I am looking for alternate, simpler solutions to this problem.
Thanks in advance!

Nice question! Consider this simplified implementation:
var $helperLeft = $('.helper-left'),
$helperRight = $('.helper-right'),
$helperTop = $('.helper-top'),
$helperBottom = $('.helper-bottom'),
$view = $('.view').draggable({
drag: onDrag
}),
viewWidth = $view.width(),
viewHeight = $view.height();
function onDrag(event, ui) {
$helperLeft.css({width: ui.position.left});
$helperRight.css({left: ui.position.left + viewWidth});
$helperTop.css({
width: viewWidth,
left: ui.position.left,
height: ui.position.top
});
$helperBottom.css({
top: ui.position.top + viewHeight,
left: ui.position.left,
width: viewWidth
});
}
onDrag(null, {position: $view.position()});
That's it! Very short and simple. I think resizing is straightforward too.
Demo: http://jsfiddle.net/j74A9/

Apple-like website section-by-section scrolling behavior

I'm trying to figure out how to make the main visible content area expand to the height of the browser-- it's responsive in a sense. If you extend the browser, more of the content shows. If you scroll down, it scrolls to the next div and repeats the behavior.
I have no idea what this behavior is called or referred to as, so I'm not sure I can give an accurate title.
My guess is that this is done with Javascript, but I'm not well-versed in the language by any means. Can someone help me out here?
Examples:
http://theartofraw.g-star.com &
http://www.apple.com/iphone-5s/

I've done this with Jquery. Basically you get the height of the window and then set the height of each slide to that value.
var origheight = $(".slide").height();
var height = $(window).height();
if (height > origheight) {
$(".slide").height(height);
}
http://jsfiddle.net/uYXvF/

They have sections, that are CSS "height: 100%";
Then they detect scrolling and, do a CSS3 Transform with CSS3 Transition:
Transform: Y: 0%
Scrolling Detected
Transform: Y: 100%
So they are basically preventing actual scrolling and instead move the whole content by 100%.
Edit (2):
In this post they show how to disable scrolling:
How to disable scrolling temporarily?
function wheel(e) {
preventDefault(e);
document.getElementById("mainContainer").style.webkitTransition = "-webkit-transform 1s";
document.getElementById("mainContainer").style.webkitTransform = "translateY(-100%)";
}
This is a simplified version from what i use on my own page.

If you want to accomplish the same as in the example sites you posted, then you could make use of a jQuery plugin called fullPage.js.

JQuery animated banner

So I previously asked a question about how to create a banner like the one shown here and I got a really good answer to start me off. I have been working on it since and I'm having a lot of problems getting the animation to slide back to it's original position.
Here is my animation: http://jsfiddle.net/43nCF/ (don't click the green block first)
Issue: After the first time you toggle a block, clicking another block will not move it to the left.
I also have some other minor issues which I would be grateful if someone helped me with.
How do I get the width and the moving of the blocks to animate simultaneously like in the banner animation I am trying to replicate?
How do I get the block to slide back to the original position instead of just kind of 'transporting' there?
I am only beginner at jQuery so any help would be amazing.Thanks.

As for the positioning problem: you need to drop the left declaration in your second function.
Regarding making the animation act simultanous: animate both the right and the width property for each element, in one call:
function() {
var position = $.data(this, 'position');
var ind = $(this).index();
//moves image back to original position
$('#container div').each(
function() {
$(this).animate({
right: "",
width: 100
});
});
});
Working example here.

I see you have a response.
In case this version is of any help to you:
http://jsfiddle.net/vCbcz/
Instead of altering the divs other than the one being affected, I wrapped them all in a #slider div and adjusted that one's left margin to push it to the left.
$('#slider').animate({
marginLeft: '-' + ind * 105 + 'px'
});
and back
$('#slider').animate({
marginLeft: 0 + 'px'
});

There is a much easier way altogether of doing this. By using jQuery's scrollTo plugin, this can be done in a mere few lines of code, without using indices, calculations, or anything of that nature.
Live Demo http://jsfiddle.net/Jaybles/WEzny/

jQuery and margin: 0 auto

So, this is a problem that's been asked before, but I'm hoping we can lay it to rest: I'm using jQuery 1.4. If I define the style
#obj { margin: 0 auto; }
and then do
$('#obj').css('marginLeft');
the result is the computed value in pixels. Is there any way to tell whether those pixels come from the auto calculation or not, without parsing document.styleSheets?

This solution would also be triggered if the margins were set to percentages, but it might be good enough for your purposes. Basically, you record which margins change on resize. So you'd record the margins before resize to an array:
var aMargins = [];
$('.yourObjs').each(function(i,obj){
var objML = $(obj).css('marginLeft');
aMargins.push(objML);
});
Then resize the window, see which margins changed (these will be either 'auto' or %), do what you need to do to them and return he window to original size:
var wW = $(window).width();
var wH = $(window).height();
window.resizeTo(wW - 5, wH);
$('.yourObjs').each(function(i,obj){
if ($(obj).css('marginLeft') != aMargins[i]) {
// your centering code here
}
}
window.resizeTo(wW,wH);
If your centering code just adjusts the left margin then this should work fine for % based margins too. I can't test this code or provide an example because I'm on the road and writing from my phone, but hopefully this works or helps you come up with something that will.

You can't get the auto from the element itself, because styles are cascading, what if you had this?
#obj { margin: 0 auto; }
div #obj { margin: 0 10px; }
Which is it? Depends on the page and how it cascades, the basic concept is you're getting the calculated style properties on that element, what's in the stylesheet doesn't matter, there could be 20 stylesheets, etc.
Basically it boils down to this: getting auto vs 000px is a really rare request and would required a lot of extra code to figure out, so much so that it's an easy case of "no, this doesn't belong in core". However, there are plugins to do CSS parsing.
Short answer: jQuery core cannot (doesn't have code to) do this, jQuery with plugins, or just JavaScript in general yes you can.