We Keep Coding

make footer disappear when scroll is active

I'm using jQuery mobile.
How can I make footer disappear while scroll is active?
When scrolling stops I want to show footer again.
HTML snippet looks like this:
<div id="footer" data-role="footer" data-position="fixed" data-corners="false">

Use $.scroll to hide the footer whilst scrolling and setTimeout to show it again once scrolling stops:
var scrolling;
$(window).scroll(function() {
clearTimeout(scrolling);//clear any existing timeout
$("#footer").hide();
scrolling = setTimeout(function(){$("#footer").show();},100);//set the timeout to hide the footer (will be cancelled if scrolling continues)
})
http://jsfiddle.net/c6uqdhjo/1/

Use the jquery scroll event.
You can find information in the docs: http://api.jquery.com/scroll/
Something along the lines of (not tested!):
$(window).scroll(function() {
$("#footer").hide();
});

See Test Page
var pageIsScrolling = (function(){
var timer, body = $(document.body);
return function(){
clearTimeout(timer);
timer = setTimeout(scrollEnd, 250);
body .addClass('scrolling');
}
function scrollEnd(){
timer = null;
body.removeClass('scrolling');
}
})();
$(window).on('scroll.scrolling', pageIsScrolling);
Now whenever you start scrolling, the body has the class scrolling and you can target that in your CSS, like so:
.scrolling > footer{ opacity:0; }
or even add transition for your footer so it would look smoother.
(I'm pretty sure this should also work with jQuery mobile)
notes:
I could work directly on the footer element from javascript, but I believe working with general state classes is a better way to change states across an application, and then you can derive from that whatever you want in your CSS, so, here, the desired state class was "scrolling".
I am using custom event namespace here, which is a good practice
using element caching (body)
scrollEnd function is separated and isn't directly written inside the setTimeout for better readability.

Disable page scroll until page loads - JQuery

I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).
I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?

If you want to fade in when all images are loaded, you can try this
var images = $('img');
var images_nbr = images.length;
images.load(function() {
images_nbr--;
if (images_nbr == 0) {
$('body').css('overflow','auto');
$('...').fadeIn();
}
});

Set
#mydiv {
overflow:hidden
}
in your parent div in CSS. Then, in your document, add this...
$('#mydiv').css('overflow', 'auto');
...in the function that fades in your content.
Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.

.scrolldiv{
overflow:hidden;
}
$(window).load(function(){
$(".scrolldiv").css("overflow","auto");
});

You can try like,
initially add the below css on body
body {overflow:hidden;}
and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like
$('body').css('overflow','auto');

Page jumps when fadeIn() and fadeOut() of two overlapping elements occurs

I've created something in jQuery, I have a problem when clicking the images though. If you scroll down entirely to the bottom of the page and then click, you'll see it jumps. I've tried multiple methods to prevent jumping but its not working.
Here is my code:
$('.author').click(function(e) {
var name = $(this).attr('id') + '-info';
   $('.author-info article').hide();
   $('#' + name).fadeIn();
$('.author').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
here is the live link - http://sites.lukespoor.com/author/
any help is appreciated

It is jumping because, when the first element fades out the height of the page changes. So, it scrolls to the bottom of the page. You cannot fix it with e.preventDefault.
Set a fixed height for the parent element.
.author-info {height:200px;}
fixes the problem.
Another solution will be
.author-info {position:relative;}
.author-info article {position:absolute;top:0;left:0;opacity:0;}
Instead of using .fadeIn set the opacity to 1 and instead of .fadeOut set the opacity to 0. You can use CSS transition or .animate for the fade effect.

How to fadeout image, then make it appear on another position in jquery?

my image is at some div, and it's z-index is the highest
When i click on something, I want it to fade out, and fade in on another, specified position. Below the image of another class : ) It's an "aaa" class.
I was doing it like that:
$('img.classy').fadeOut();
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
It's embedded to click event. When I run it and click the area, img.classy FIRSTLY changes it's position, then on new position it fades out and fades in. I want obviously to make it that way: fade out -> change position when invisible -> fadein on new position. how to do it?

This will do:
$('img.classy').fadeOut(function() {
$('img.classy').css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});
Because fadeOut and fadeIn are asynchronous functions, the script continues to run, those causing your img to change its position immediately.

You need to wait until the fadeOut is complete. I added a callback function for you.
$('img.classy').fadeOut('slow', function() {
$(this).css('top',$(el).find('img.aaa:last').height()+60);
$('img.classy').fadeIn();
});

this will clone the img, remove it and append it anothor wrapper:
.aaa {position: relative}
.classy {position: absolute; right:0; top:0}
$('img.classy').fadeOut(
cloned = $(this).clone(true);
$(this).remove();
$("img.aaa:last").append(cloned);
$(".classy").fadeIn();
);

disable mouseover-ability on page load for 3 seconds

I've looked at some similar posts regarding interaction delay after page load, but I can't seem to find anything regarding the classical a:hover disable.
The problem is that JS will load most likely slower than the CSS, and hacking CSS isn't going to work for this problem.
Situation
I have a home page animation. On page load, i have a stack of images coming in from the left and a div of absolute anchor tags coming in from the right (~ 2 cases per line), which both slide and meet in the middle. After page load, I set a timer to go through the stack of images, and the corresponding anchor tag highlights.
The problem is that this timer is broken when the user hovers over any of the anchors tags, and when this happens, the corresponding image fades in. And this interaction could be right on page load.
Is there any possible way of disabling anchors tags a:hover on page load/delay?
What I've tried
I cannot simply remove the a:hover class and replace it with another one of background-color:transparent, because my JS still picks up the onHover function (I could target onHover only for that changed class maybe..)
I am able to target each of the anchor tags on page load with an alert on mouseenter when accidentally hovering over:
//on page load, disable mouse-over ability on anchor tags
var disableOnLoad = function (ev) {
var target = $(ev.target);
var casesId = target.attr('id');
//if mouse is over one of the cases
if (target.is(".cases")) {
//disable CSS a:hover
$(this).removeClass('homeText a:hover');
}
}
Another thing I might be able to try is calling setTimeOut(function(){ onHover()) so that there is a delay, but that will effect after page load as well.
Any suggestions?

CSS:
#blocker{
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
right:0;
bottom:0;
z-index:9999;
}
JS:
setTimeout(function(){
$('#blocker').remove();
}, 3000);
HTML:
<body>
<div id="blocker" ></div>
<!-- your stuff -->
make sure the blocker div is close to the body tag to insure no capture/bubbling issues.

What if your page started out with your links as NOT wrapped with anchor tags, and you use a setTimeout onLoad to append the tags 3 seconds later?

Have not tested this but prevent default may work for you"
$("a").mouseover(function(event) {
event.preventDefault();
// Run any other needed code here
});
(function(){
$("a").unbind('mouseover');
}).delay(2000); // delay 2 seconds
Better to run the unbind code after you know all images are loaded
you may also want to modify the selector from all a tags to a.class

Bit late to the discussion, but in case it helps anyone else, I solved my problem by adding pointer-events: none to the body element in CSS (using a class called pointer-none, and then removing it with JavaScript after a delay.
var timeout;
window.onload = function(){
timeout = setTimeout(function(){
document.querySelector('body').classList.remove('pointer-none');
}, 1500);
}