Develop Reference

how to stop the element at footer line while moving it up and down with scroll

I added an element which moves up and down with scroll, but the problem is its collapsing with footer. Below is the sample code which I am using for it
$(document).ready(function () {
var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#comment').addClass('fixed');
} else {
// otherwise remove it
$('#comment').removeClass('fixed');
}
});
});
Sample HTML code
<div id="commentWrapper">
<div id="comment">
<form>
<!-- take their response -->
</form>
</div>
</div>

I solved it by giving bottom:somevalue and its working fine now

Text effect not working properly if i add more div on page scroll

I have taken a reference of the below site and i want to add text effects ie opacity gets fade on page scroll. The above code is working properly if i use the below reference as it is but if i add many div then it gets faded early not reaching the required div
http://jsfiddle.net/HsRpT/134/
Here is what i have done and the text fade effects goes early without reaching the actual div. Is there any other way of solving this problem?
<div>
fsdfdfsdfffffffffff<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>><br><br><br>
</div>
<div class="block">
<h2>Fade this in / out as scroll down</h2>
</div>
<div class="content">
<div class="headerbar">
</div>
</div>

Try
$(window).scroll(function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 200) {
$('.block').stop(true, true).fadeOut();
}
else {
$('.block').stop(true, true).fadeIn('fast');
}
});
Fiddle

current_div="div1";
$(window).scroll(function() {
current_div = scroll_content();
console.log(current_div);
if(current_div=="last"){
don't fade out
}
});
function scroll_content(){
var winTop = $(this).scrollTop();
var $divs = $('section');
var top = $.grep($divs, function(item) {
return $(item).position().top <= winTop;
});
var cur=top[top.length - 1];
return $(cur).attr('id');
}
You can get the the id of the div which is going out of screen while scrolling. So you can do what ever you want to do with the divs after getting the id .
It worked for me.
Let me know if you any other query.

Center a section when using smooth scroll

I am using Chris Ferdinandi's Smooth Scroll script and I am trying to have it scroll to an element, but land with that element centred. Similarly to what is done at http://www.spotify.com.
I attempted adding the following code to the start of the script:
$(document).ready(function(){
$('.downarrow a').click(elementhref = $('.downarrow a').attr('href'));
var elementheight = $(elementhref).height();
var windowheight = $(window).height();
if (elementheight < windowheight) {
topoffset = ((windowheight / 2) - (elementheight / 2) - 30);
} else {
topoffset = 0;
}
});
I then added the variable topoffset into the script so that it offsets the anchor's position by the correct amount.
var endLocation = _getEndLocation( document.querySelector(anchor), topoffset ); // Scroll to location
It works perfectly for the first section, but when I click on the next .downarrow a element, my code only ever uses the height of first section. But I have several of these links with the same class throughout my HTML.
This is a simplified version of what I have:
<section id="home">
<!--content-->
<div class="downarrow"><a data-scroll href="#about">Scroll Down</a></div>
</section>
<section id="about">
<!--content-->
<div class="downarrow"><a data-scroll href="#portfolio">Scroll Down</a></div>
</section>
<section id="portfolio">
<!--content-->
<div class="downarrow"><a data-scroll href="#contact">Scroll Down</a></div>
</section>
<section id="contact">
<!--content-->
</section>
I was trying to have it change the elementhref variable depending on which element was clicked, but this would obviously not work with my code. I tried giving each downarrow a unique ID but it became too complicated for me.
This is my first time using JavaScript and jQuery, so I'm hoping there's a simple solution I've overlooked.

Try
(function() {
function setStuff(elementhref) {
var elementheight = $(elementhref).height();
var windowheight = $(window).height();
if (elementheight < windowheight) {
topoffset = ((windowheight / 2) - (elementheight / 2) - 30);
} else {
topoffset = 0;
}
}
$('.downarrow a').click(function() {
setStuff( $(this).attr('href') );
});
})();
Only targeting the one you have 'clicked' - this - and making a jquery object of out it so you can access the jquery methods $(this)
Edit/Update - added in the parts to connect the click handler with a function to dostuff

How to make resizable with handle dynamically? without ui

I'm trying to create a function for drag and drop resizing and I have a problem. The script doesn't react to mouse cursor direction changes instantly. If I hold the button down and move cursor right, then left, it will only keep on increasing object's size for a moment.
demo
Javascript:
var re_dragging = false, re_om_x, re_om_y, re_o_x, re_o_y, re_n_x, re_n_y;
function resize(resize_btn){
resize_btn.mousedown(function(e){
e.preventDefault();
e.stopPropagation();
re_dragging = true;
re_om_x = e.pageX;
re_om_y = e.pageY;// origin mouse postion
target_wp = $(e.target).closest('.draggable_wp').find('.draggable_el');
});
$(document).mousemove(function(e){
if(re_dragging){
target_wp.width((e.pageX - re_om_x) + target_wp.width());
}
});
$(document).mouseup(function(e){
re_dragging = false;
});
};
var resize_btn = $('.draggable_btn_resize');
resize(resize_btn);
HTML:
<div class="draggable_wp">
<div class="wp_img">
<img src=""class="draggable_el">
</div>
<div class="btn">
<div class="draggable_btn_resize"></div>
</div>
</div>

You need update re_om_x after reseting width using re_om_x = e.pageX;.
And I add a new variable width, because in target_wp.width((e.pageX - re_om_x) + target_wp.width());, the target_wp.width() will bring in deviation, it is always get a int.
I rewrite mousemove as below:
$(document).mousemove(function (e) {
if (re_dragging) {
target_wp.width((e.pageX - re_om_x) + width);
width = (e.pageX - re_om_x) + width
re_om_x = e.pageX;
}
});
Here is demo. http://jsfiddle.net/U9vre/1/

For simplicity, see the jQuery UI function .resizable(). Just remember that you would then need to add the jqueryui .css and .js scripts to your page. You would then just need to call
$("#some_div_to_resize").resizable();

Mouse scroll - snap to divs

I currently have a page in the form of
<div id="content">
<div id="content-page-1">
<!--content-->
</div>
<div id="content-page-2">
<!--content-->
</div>
</div>
Is there any way to make scrolling either
Stick/snap to divs (these are 100% height and 100% width of the display area)
Auto-scroll to next div when scrolling detected
with jquery?

If you listen for the scroll event on your node, you could easily use a plugin like scrollTo to smooth scroll to the "next div" or previous div (however you define that).
var prevScrollTop = 0;
var $scrollDiv = $('div#content');
var $currentDiv = $scrollDiv.children('div:first-child');
$scrollDiv.scroll(function(eventObj)
{
var curScrollTop = $scrollDiv.scrollTop();
if (prevScrollTop < curScrollTop)
{
// Scrolling down:
$currentDiv = $currentDiv.next().scrollTo();
}
else if (prevScrollTop > curScrollTop)
{
// Scrolling up:
$currentDiv = $currentDiv.prev().scrollTo();
}
prevScrollTop = curScrollTop;
});

I tried different plugins but they all had problem with multiple event firing in mvc, so i came up with this solution using underscore.js
<script type="text/javascript">
$(document).ready(function () {
var isc = _.throttle(function (event) {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
if (event.handled !== true) {
$.post('#path', function (html) {
$('#user-feed').append(html);
});
}
}
}, 300);
$(window).scroll(isc);
});
</script>