jQuery page fadein issue on mobile - javascript

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

Related

Skrollr.js Plugin Not Parallaxing Inside Bootstrap Carousel - Fiddle Provided

I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.
I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.
Skrollr Markup
data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"
CSS
.displaying {
display: block !important;
}
JS
var sk = skrollr.init({
forceHeight: false,
beforerender: function(data) {
$(".item").addClass('displaying');
},
render: function(data) {
$(".item").removeClass('displaying');
}
});
EDIT
I made a JSFiddle for it here or you can see it fullscreen for debugging here
Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.
I'm guessing that you need to do a refresh since I notice it works if I resize the browser.
Try this code:
setTimeout(function () {
skrollr.get().refresh();
}, 0);
You can change the timeout to 1000 if necessary to ensure everything loads.

Fade-in pictures on page load with jQuery

I'm currently using this jQuery snippet to produce the effect of picture fading-in one-by-one when the page is loading:
jQuery(document).ready(function($) {
animatePictures('img');
});
function animatePictures(selection) {
elementsToAnimate = jQuery(selection);
elementsToAnimate.hide().each(function(i) {
jQuery(this).delay(i * 500).fadeIn(5000);
});
}
This roughly does the trick, but as you can see, the assets are first loaded, then they are hidden when the DOM is ready and then faded-in in 500ms intervals.
I was wondering if you could tell me how I can make it properly so that pictures really fade-in as the site is loading, and are not first hidden and then faded-in.
I will appreciate all suggestions. Thanks!
First in your css set all your pics to be display:none
img{display: none;}
Then use:
function animatePictures() {
jQuery('img').each(function(i) {
jQuery(this).delay(i * 500).fadeIn(5000);
});
}
jQuery(window).load(function($) { animatePictures(); });
by using the window load all your pictures will be loaded in memory and can be shown separately than the rate of download... You might think of using a lazy loader script instead if you are trying to optimize your page...
Pretty simple solution is to use just css:
img{/*select the selector*/
display: none;
}

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');

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);
}

Page scrolls up using JQuery fadeIn - fadeOut

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;
}

Categories