We Keep Coding

Display element only while user is scrolling, without fading quirk

I want to show a table of contents (for a long web document) as a fixed element on the right side of the page.
I got a 'hello world' of this going fairly easily, but I can't figure out how to keep the element from fading in and out during long scrolls.
Scroll around enough on the fiddle and you'll see what I mean.
js fiddle: http://jsfiddle.net/XGY8H/2/
$(window).scroll(function(){
var toc = $('.tableOfContents');
toc.fadeIn();
setTimeout(function(){
toc.fadeOut();
},10000);
});
Thanks!

You cas use clearTimeout to prevent the ToC from fading out.
$(function () {
var toc = $('.tableOfContents');
var fadeTimer;
toc.fadeOut();
$(window).scroll(function () {
toc.fadeIn();
if (fadeTimer) {
clearTimeout(fadeTimer);
}
fadeTimer = setTimeout(function () {
fadeTimer = 0;
toc.fadeOut();
}, 10000);
});
});
JSFiddle

Pause scrolling at certain point for a short while

I'm looking to have the user scroll down the page and when it hits certain points 'stick' for a few moments before continuing scrolling. I have a large vertial page which has content in between large images, when the user hits these peices of content the browser should stop scrolling for a moment then continue scrolling. I'm hoping this will help highlight the content amongst all the images on the page.
I hope this is clear enough :s
cheers

You can try something like this:
$(function () {
var delay = 2000,
//Following var because http://stackoverflow.com/questions/3042651/jquery-scrolltop-not-working-in-chrome-but-working-in-firefox
$scrollEl = $.browser.mozilla ? $('html') : $('body');
selectors = ['#img1', '#img2', '#img3'];
(function scrollPage() {
var $el = $(selectors.shift());
if ($el.length === 0) return;
//animate
$scrollEl.animate({ scrollTop: $el.offset().top }, 2000, function () {
setTimeout(scrollPage, delay);
});
})();
});
Demo: http://jsfiddle.net/aamir/eFmZj/7/show
Play: http://jsfiddle.net/aamir/eFmZj/7/

Activating two jQuery functions with one link

I'm trying to do the following:
Open a div with slideToggle
Move the users window to the top of the div with scrollTop
Then basically reverse the process when the user closes the div.
I have the whole process almost finished, but I am having one problem. When I open the div my window doesn't move to the top of the div. But when I close the div my window does move to where I want it.
Here is my jQuery code:
// Find the location of a div (x, y)
function divLoc(object) {
var topCord = 0;
// If browser supports offsetParent
if(object.offsetParent) {
do {
topCord += object.offsetHeight;
}
while (object === object.offsetParent);
return topCord;
}
}
$("#open").click(function () {
var newInfo = document.getElementById("newInfo");
var location = divLoc(newInfo);
$("#newInfo").slideToggle('slow', function() {
$('html,body').animate({ scrollTop: location }, 2000);
});
});
And I uploaded an example of the problem on jsFiddle: Here

You need change slide function:
$("#newInfo").slideToggle('slow', function() {
var self = $(this)
$('html,body').animate({ scrollTop: self.offset().top }, 2000);
});
http://jsfiddle.net/hSHz5/

Javascript or jQuery slide to element

When a user clicks on the "Contact Me" button, i want the screen to slide to the #contact element, however cannot figure out how to do it. I've tried various different snippets of code and tried to tailor it to my needs, but nothing seems to work.
The site is here; http://dombracher.com/
Simply want the screen to slide to the div mentioned above, rather than quickly snap to it.
Thanks in advance.

$(document).ready(function() {
$("a[href^='#']").anchorAnimate()
});
jQuery.fn.anchorAnimate = function(settings) {
settings = jQuery.extend({
speed : 1100
}, settings);
return this.each(function(){
var caller = this
$(caller).click(function (event) {
event.preventDefault()
var locationHref = window.location.href
var elementClick = $(caller).attr("href")
var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
window.location.hash = elementClick
});
return false;
})
})
}

You can animate window scroll by yourself
$(".menu2").click(function(){
$(document.body).animate({
"scrollTop": $("#contact").offset().top
}, 2000, "swing"); // animation time and easing
return false; // preventing default jump
});
Fiddle: http://jsfiddle.net/M8JE2/
Or use jquery plugin like http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html to make any/all local links work with animation.

Here it is , scrolls to the bottom of the page since your contact form is there:
jQuery(function () {
jQuery('#nav1 li.menu2').click(function (e) {
jQuery("html, body").stop().animate({
scrollTop: jQuery(document).height()
}, 1000);
e.preventDefault();
return false;
});
});

Why doesnt this script animate (jquery) 3 seconds after page loads?

I'm trying to animate a banner (width 100%, height 150px) that is hidden (position relative, top -150px) at the load of document. I want to show it after 3 seconds, what am I doing wrong? This seems pretty straight forward?
$(function() {
var t = setTimeout(popmenu(), 3000);
function popmenu() {
$('#bcktop').animate({
top : "+=150"
}, 150
);
}
});

You are calling popmenu rather than passing the function:
var t = setTimeout(popmenu(), 3000);
should be:
var t = setTimeout(popmenu, 3000);

You want to pass a function reference into the setTimeout function. By sending the function like this(), you're sending the return value of that function to setTimeout.
Change this:
var t = setTimeout(popmenu(), 3000);
to this:
var t = setTimeout(popmenu, 3000);

You can also use the jQuery .delay() function:
$('#bcktop').delay(3000).animate({
top: "+=150"
}, 150);

Adding quotes around popmenu() and placing function popmenu() outside the $(function() { }); fixes it:
$(function() {
var t = setTimeout("popmenu()", 3000);
});
function popmenu() {
$('#bcktop').animate({
top : "+=150"
}, 150
);
}