Fullpage.js. How to disable delay between normalizing elements? - javascript

Pacient: http://demo.imatte.us/fomru/landingpage.html
Problem: http://gyazo.com/031fe1c5413550e6e68aceef2740cefc
When window's size is changing, then we can see content of other slide. But after release the window's border, elements moving to right places with animation after small delay. How to disable this delay and animation, and force elements to stay on right positions constantly?

As #flybear pointed out, you would need to modify the plugin for it.
You would also need to change the scrollingSpeed of the plugin by using $.fn.fullpage.setScrollingSpeed(0). But this will only work if you use css3:false.
You should change the current event resize for this one:
//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
// rebuild immediately on touch devices
if (isTouchDevice) {
$.fn.fullpage.reBuild();
} else {
$.fn.fullpage.setScrollingSpeed(0);
$.fn.fullpage.reBuild();
$.fn.fullpage.setScrollingSpeed(700); //default one
}
});
If you want to make it work with css3:true as well, you would need to deal with the css3 animations defined in the .fp-easings class. You probably can create another CSS class to overwrite the .fp-easings one defining a transition with 0 seconds:
//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function () {
// rebuild immediately on touch devices
if (isTouchDevice) {
$.fn.fullpage.reBuild();
} else {
$.fn.fullpage.setScrollingSpeed(0);
$('.fp-easings').addClass('.fp-no-transitions');
$.fn.fullpage.reBuild();
$.fn.fullpage.setScrollingSpeed(700); //default one
$('.fp-easings').removeClass('.fp-no-transitions');
}
});
CSS
.fp-no-easing {
-webkit-transition: all 0s ease-out !important;
transition: all 0s ease-out !important;
}
Just take into account that on every resize event, which can be fired hundreds of times when you resize the browser's window, will execute the reBuild function of the plugin, which will take care of resizing sections, updating the inner containers and scroll all the sections and slides of your site to fit the new position.
Firing this hundreds of times can cause some problems in slow computers and will slow down the page.

Related

jquery: a better way to tie an animation to scrollbar position

var AddFootnoteScrollIndicator = function(){
$('.mobileFootnote').on('scroll touchmove', function (event) {
var scrollTop = that.$mobileFootnote.scrollTop();
if (scrollTop <= 20){
var opacity = 1 - (scrollTop/20);
$('.scroll-down-indicator').css({'opacity': opacity });
}
});
};
As the user scrolls down, the indicator slowly fades out until it is gone. They scroll back up, the indicator slowly re-appears. They stop in the middle, the indicator is half-visible.
Code works fine, but modifying the opacity via .css() seems expensive. Is there a more clever way of doing this via css or...
I don't want to delay the .on() polling because the animation needs to respond quickly to the scroll.
Any ideas?
When it comes to scroll events, modifying the css via javascript is the only way to go. There is not a way with pure CSS to detect scroll positions like you can with media queries and screen sizes.
The jquery css() function is setting the element.style.opacity property under the hood. You are only one short abstraction layer from the actual element property, so it is not "expensive".
The most costly part of that call would be the $('.scroll-down-indicator') selector, as it has to perform a DOM traversal to find elements with the class name.

Mouseenter and Mouseleave giving undesired results

Im having an absolute nightmare with a plugin im trying to integrate.
Im trying to make X elements on my page flip on hover, and then on mouseout revert back.
Im using the flip function, and it works fine if i hover over an element, wait a few seconds for the flip to finsih animating, and then move my cursor. If i hover quickly however, my flip happens but messes up completely, and you cant quickly move your mouse across multiple elements.
I've tried using stop() to no avail so thought I'd ask on here, I've attached a fiddle, when looking at my fiddle, quickly run your mouse across all elements and you will see what I mean
http://jsfiddle.net/5JyVC/
$('.sec-con').prepend('<div class="target" style="width:100%; height:100%; z-index:999999; cursor:pointer;top:0; left:0; display:block; position:absolute; "></div>');
$('body').on({
mouseenter:
function () {
$(this).stop(true, true).next('.sector').flip({
direction:'rl',
color:'#2d6995',
speed: 200,
content:'<span class="all-vacancies">View all Vacancies <br />in this sector.</span><span class="read-more">Click here to read more.</span>'
});
},
mouseleave: function () {
$(this).next('.sector').revertFlip();
}
}, '.target');
It's something to do with the flipLock data attribute. If you mouseout too soon flipLock is true and the revert flip wont happen causing the next mouseover to start with the wrong content. So from then on you're flipping back and forth between the same content.
If you remove the flipLock detection and return false and add stop to the animation call in flip it will revert properly.
The animation looks a bit wonky though, I'm not sure what can be done about that.
This works for me: http://jsfiddle.net/5JyVC/5/ If you move fast enough it will still mess up, not sure why that is, maybe multiple mouseover events? This is what the original flipLock intended to prevent I guess.
Maybe flipLock should be more complex, when flipped, only allow flip backs and vice versa. The current implemenation of flip and revertFlip doesn't allow for this though.
Here is an alternative way in pure css (as requested)
the javascript is here just to add the elements faster
Anyway i modified the function sothat you can add HTMLElements direct to the function that adds the various divs that needs to be flipped.
A & B, where A is the front and B is the back.
in this example i add 6 elements to the page.
here is the javascript to test the elements
var D,
flip=function(A,B){// HTMLElement,HTMLElement - no text
var box=D.createElement('div');
box.appendChild(D.createElement('div')).appendChild(A);
box.appendChild(D.createElement('div')).appendChild(B);
return box;
},
init=function(){
D=window.document;
for(var i=0,f=D.createDocumentFragment();i<6;i++){
var a=D.createTextNode('Front '+i),
b=D.createTextNode('Back '+i);
f.appendChild(flip(a,b));
}
D.getElementsByClassName('flip')[0].appendChild(f);
}
window.onload=init;
As you can see no eventlisteners or complex code as if you use css3 you totally can put the :hover on the divs without the need of javascript (mouseenter,mouseleave).
to add this animation to every element i added a class for the container of the elements.
html,body{width:100%;height:100%;margin:0;padding:0;} /* important */
.flip{
width:100%;height:100%; /* in this case the perspective center */
-webkit-perspective:1200; /* is in the page center */
}
.flip>div{
width:200px;height:160px; /* width && height of the flip box */
float:left;
margin:16px;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 600ms ease;/* animation speed is 600ms */
}
.flip>div>div{
width:100%;height:100%; /*to fit the flip container*/
-webkit-backface-visibility:hidden;/* hide the back side */
line-height:160px;text-align:center;/*center the text*/
background-color:grey;/* both sides color */
}
.flip>div>:nth-child(2){
-webkit-transform:rotateY(180deg);
margin-top:-160px;/* hack so no need for position absolute*/
}
.flip>div:hover{
/*-webkit-transition:all 1000ms ease 1000ms;
want to close it slowly with a delay? */
-webkit-transform:rotateY(180deg);
}
/* no position relative or absolute which slows down ios */
this is writtenfor webkit browsers (chrom, safari, android, ios)
i made it for my ipad.
to use it with firefox and the latest ie's that support css3 you need to duplicate this -webkit styles with the -moz,-ms,-o prefixes and check the support.
this example is based on 3d so the container has also a perspective value.
and the elements flip in real 3d and so you trigger the HW GPU acceleration on the various browsers.
the html just needs that container with the class flip
using classallows you to add multiple containers with multiple flipping elements.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flip</title>
//add here the links to css3 or the <style>
//add here the the script or link to the script
</head>
<body><div class="flip"></div></body>
</html>
so this is very simple as you can see but from this base you can create veri impressive animations just changind the flip css.
if you need some more advanced features you can handler that with javascript event
transitionend
if you want to add the boxes manually this is all you need to write.
<div class="flip">
<div>
<div>Element1 Front</div>
<div>Element1 Back</div>
</div>
<div>
<div>Element2 Front</div>
<div>Element2 Back</div>
</div>
</div>
Want to triggerthe animation on click/mouseevent/dragevent/scrollevent whatever?
replace .flip>div:hover with .flip>div.flipped
and in javascript on event
this.parentNode.classList.toggle('flipped')
or
this.parentNode.classList.add('flipped') & this.classList.remove('flipped')
Now this is all about modern browsers and uses modern javascript&&css3 but as you want to flip something you anyway need a modern browser.
also jQuery can't flip something in ie6
like always
javascript handle the events or adds multiple elements
css to create the style of the page
html just for a basic structure.
for any other questions just ask
fiddle (test with chrome)
http://jsfiddle.net/gNB3z/2/

jQuery height change not working in Safari

I have a JS feature on the following site that is working just fine in Firefox but not in Safari: http://rossbolger.com/kids/light-stories/
The feature slides out a grid of thumbnails called #image-thumbs when the mouse hovers over the container called #hit-area. It works (at least in Firefox) by first changing #image_thumbs height from '48px' to 'auto', the height is then measured using jQuery's height(). This height is stored in a variable and then using jQuery's css() it is given back to the #image-thumbs when the mouse is over.
The code on the site looks a little something like this:
// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');
// Slide Up Thumbs
(function revealThumbs() {
// On hover let the thumbs become their full height
$('#image-thumbs #hit-area').hover(function(){ // Mouse over
// Get the unrestricted height of the thumbs
thumbs.css('height', 'auto');
thumbs_height = thumbs.height();
// then put it back to what it was so we can animate it using CSS3 transition
thumbs.css('height', 'inherit');
// delay 0.1s before triggering the change in height (time for the calculations to complete)
setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );
}, function(){ // Mouse out
hideThumbs();
});
})();
// Hide thumbs
function hideThumbs(){
thumbs.css('height', thumbs_original_height );
};
The reason for measuring the unrestricted height and passing it back as a pixel value, rather than simply setting the height to 'auto', is to create a sliding effect via CSS3 (i.e. transition: height 0.5s). The transition only takes place if the affected attribute goes from one numeric value to another.
Thanks for any help bug testing this. I haven't even looked at other browsers yet.
All the best,
Laurence
Okay, so I've worked it out...
In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9!
I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.

MooTools Tween Stutter/Hiccup

I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.

CSS image wrap issue - depends on browser zoom level

I'm trying to create a panel of 5 images across a DIV where a jQuery animate() expands each image in succession until all 5 images consume 100% of the width of their container without wrapping
Here is the link to the problem:
The initial blockUI displays fine, but once its expires and the normal page is shown, the same five images will display perfectly under some resolutions (I use ctrl-+/- in either FF or IE to test) and others it causes the last image to wrap.
The code to animate the resizing is below, and its purpose is to resize each image up to 20% of the width of the container. I've tried to see if it had to do with rounding and have come up empty. I've looked into CSS options trying some/all of the following:
overflow:hidden;
white-space: nowrap;
display:inline-block;
$(".service_img").each(function (i)
{
// if the image in question's width is > 20% of its container then re-adjust it to be 20% so it will fit
if($('#'+this.id).outerWidth() > Math.floor((($('#services_imgs_container').outerWidth()/5)))){
$('#'+this.id).width(Math.floor(($('#services_imgs_container').outerWidth()/5)));
}
else {
$('#'+this.id).animate({width:(Math.floor(($('#services_imgs_container').outerWidth()/5)))},{duration:500, queue:false});
//$('#'+this.id).animate({width:'19.2%'},{duration:500, queue:false});
$('#'+this.id).show();
}
})
You can write a function after the resize, and check to see if #services_imgs_container is twice the height of div.service_img:eq(0). If it is reduce the size of each .service_img by one pixel at a time until the statement is no longer true.
something like this
while($('#services_imgs_container').height() >= ($('.service_img:eq(0)').height() * 1.5))
{
$('.service_img').css('width': '-=1');
}

Categories

Resources