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.
Related
I want to show an animating arrow the first time a web page loads, and disable it when the user scrolls.
Normally I could do something like this:
jQuery(window).scroll(function() {
jQuery('.arrow').css("display", "none");
});
However my site has a few plugins to allow horizontal scrolling which I think is preventing this from working.
Is there a way to hide the animation that is not based on scrolling detection?
http://codepen.io/sol_b/pen/ORGKbP
Thanks.
EDIT: the plugins I'm using are jquery kinetic and jquery mousewheel.
You can do the following in your jquery.
jQuery(window).scroll(function() {
document.getElementById("animation").style.WebkitAnimationPlayState = "paused";
});
This will stop your animation while scrolling, but this will cause an issue that the animation won't be played when the scroll is stopped. Fot that you can use this function
$.fn.scrollStopped = function(callback) {
var that = this, $this = $(that);
$this.scroll(function(ev) {
clearTimeout($this.data('scrollTimeout'));
$this.data('scrollTimeout', setTimeout(callback.bind(that),250, ev));
});
};
And then on scroll stop you can start the animation again.
$(window).scrollStopped(function(ev){
document.getElementById("animation").style.WebkitAnimationPlayState = "running";
});
If the plugin, that allows horizontal scrolling, has an official documentation, you should look for a callback method. Like when the users is scrolling this called gets called. In the callback you could then hide the arrow (or .fadeOut() imo)...
I was able to fix this by replacing 'window' with my content wrapper. Like this:
jQuery('#wrapper').scroll(function() {
jQuery('.arrow').css("display", "none");
});
I have a bug in my site and I’m having trouble finding an elegant solution. I bet there’s a simple way to fix this .. I’m just not seeing it. I would appreciate any suggestions.
example: http://robbroadwell.com/portfolio/ios-apps/rainylectures/
The detail pages on my portfolio have a main nav and then below that a sub nav. If the user has scrolled down below the main nav where it’s out of sight, I’m using jQuery to append the href of the left/right arrows with an anchor tag so that the main nav is hidden on the page they navigate to.
The problem is about 25% of the time the browser hits the destination page at the TOP for a SPLIT SECOND before it jumps down to the anchor tag, so you see the top nav for just a second. It looks buggy and bad.
Thoughts… should I use CSS transitions to hide it? Should I pass a value in the URL and then pick up on it on the destination page to set the main nav to display: none, and then if the browser is at the top of the window and the user scrolls up, add it back in?
Any help would be appreciated!
You already pass a value in the url: #local-nav
I didn't test it... But I think this could work:
if(location.hash){
$(".navbar-absolute-top").css("visibility","hidden");
setTimeout(function(){
$(".navbar-absolute-top").css("visibility","visible");
},500);
}
-------
EDIT based on comment
Okay then...
What if you set the non-visibility in CSS?
.navbar-absolute-top{
visibility=hidden;
}
Then we decide when to set it visible.
If there a hash in the url ==> wait... If not ==> Don't wait!
;)
if(location.hash){
// Holds on before setting the main nav visible
setTimeout(function(){
$(".navbar-absolute-top").css("visibility","visible");
},500);
}else{
// Sets the main nav visible right now
$(".navbar-absolute-top").css("visibility","visible");
}
500ms may need to be adjusted
;)
-------
EDIT based on comment
About "choppy effect"... Maybe animate() will give a smoother effect using opacity:
body{
opacity=0;
}
if(location.hash){
// Holds on before setting the main nav visible
setTimeout(function(){
$("body").animate({"opacity":1},200);
},50);
}else{
// Sets the main nav visible right now
$("body").animate({"opacity":1},200);
}
to complete the effect... You should add a $("body").animate({"opacity":"0"},200); in a paddle-nav-item a .click() handler that will redirect on .animate callback:
$(".paddle-nav-item a").click(function(e){
// Hold the click event
e.preventDefault();
// Opacity effect
$("body").animate({"opacity":"0"},200,function(){
// Callback retreive the href and redirect AFTER the animation has completed
redirectTo = $(this).attr("href");
location.assign(redirectTo);
});
});
;)
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');
Hi I use the following code to create a slideshow with multiple DIV elements:
var $ = jQuery.noConflict();
function fadeContent() {
$(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
$(this).appendTo($(this).parent());
fadeContent();
});
}
fadeContent();
The slideshow works properly but there's a problem. When the delay(2000) trigger a fadeIn-fadeOut, the page scrolls up!
What can I do to prevent this?
I think when the element fades out it does not take a real estate on the page. The element beneath it will take its place and you feel like the page scrolled. You can have a wrapper to the element you are trying to fadeIn/fadeOut and provide an appropriate height to this wrapper element. But this is not a good UX because when the element will fadeOut there will be empty section on the page.
Its because the fadeOut method ends op settings display:none; on the element.
If you force display block in css this will not happen:
Css:
.slideshow .asset-abstract:first-child {
display:block;
}
I am making a chat-like interface which can be seen here (best viewed in Chrome right now):
http://qas.im/web/sms.php
The temporary username:password is temp_guest:password
My problem is that when you click one of the chats, it doesnt automatically scroll to the bottom when I use this code:
$(".messages").attr({ scrollTop: $(".messages").attr("scrollHeight") });
What could be wrong? The messages div has a css of:
.messages {
height:400px;
overflow: auto;
}
For people who are wondering: Page isnt HTML validated yet but I will be cleaning it up soon. Most of the page is auto-generated which is challenging to make the code look pretty ;P
If you are using jQuery 1.6 or later, use prop instead of attr.
Working example: http://jsfiddle.net/FishBasketGordo/PNwj3/
I found two issues.
The first is that you were trying to set all .message DIVs to the height of the first DIV, so if the first DIV was hidden, it would never work.
The second was that jQuery's attr function is only for node attributes.
This method works better, and scrolls all the divs correctly:
$(".messages").each(function(idx, node) { node.scrollTop = node.scrollHeight; });
Alternatively, you can improve performance by using this selector:
$(".messages:visible").each(function(idx, node) { node.scrollTop = node.scrollHeight; });
Which works on visible message nodes.