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);
}
Related
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'm having a problem with a website I'm working on displaying correctly on the stock browser on Android. I know that the stock browser isn't as reliable as Chrome, however I need to get it working on the browser as the client insists on this as well as the fade in.
The issue occurs on mobile when pressing the Menu at the top. What should happen is the page should fade out and then the menu page fades in. The problem occurs with the fade in not working and the page appearing as a black page even though the links are still use-able.
I've done some testing and have found that by changing the jQuery from:
jQuery(document).ready(function(){
to
$(window).load(function(){
solves the issue, however this doesn't look very nice at all as all the page elements finish loading and display and then the fade in happens. So this isn't a solution, but suggests that the stock browser is launching the fadein before the page has finished loading.
I've also tried moving the .js file from the head in the header.php to the bottom after the Menu html. This again results in the menu html loading and appearing and then the Javascript runs and fades in the menu. Again not optimal as it doesn't look very good.
Here's the Javascript affecting it:
function transitionPage(){
$('body').css('opacity', '0').fadeTo(1500, 1,'swing');
$('.menu_open').css('opacity', '0').fadeTo(1500, 1,'swing');
$('a.transition').click(function(event){
event.preventDefault();
linkLocation = this.href;
$('body').css({zIndex:99}).fadeOut(3000, redirectPage);
$('.menu_open').css({zIndex:99}).fadeOut(4000);
});
function redirectPage() {
window.location = linkLocation;
}
}
Any help would be gratefully appreciated!
Start the page already opacity 0 then use jQuery to change it on document ready. I used CSS3 transitions as it is simpler but it could also be done with jQuery and the display: none property.
// CSS
body {
opacity: 0;
transition: opacity 1.5s;
}
// JS
$(function() {
$('body').css({opacity: 100});
});
http://jsbin.com/qecaha/1/edit
// CSS
body {
display: hidden;
}
// JS
$(function() {
$('body').fadeIn(1500);
});
http://jsbin.com/qecaha/2/edit
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.
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;
}