If you consider the following Pen: http://codepen.io/jhealey5/pen/Lqyhu - And click the Left/Right buttons, you should see that while left works fine, there's a slight delay on the right one.
I understand there's a little more happening with the right button, it's having to move it before it animates, but is there any way to alleviate the problem? Other than purposely delaying the left animation that is.
And any other improvements are a bonus.
jQuery code:
var $left = $('#left'),
$right = $('#right'),
$images = $('.items img'),
isAnimating = 0;
$left.on('click', function(){
if (isAnimating) {
return false;
} else {
var $item = $('.items img:eq(0)');
$item.velocity({'margin-left': '-100%'}, 400, 'easeOut', function(){
$(this).appendTo('.items .wrapper').css('margin-left', 0);
});
isAnimating = 0;
}
});
$right.on('click', function(){
if (isAnimating) {
return false;
} else {
isAnimating = 1;
var $item = $('.items img:eq(0)'),
$lastItem = $('.items img:eq('+($images.length-1)+')');
$lastItem.prependTo('.items .wrapper').css('margin-left', '-100%').velocity({
'margin-left': 0
}, 350, 'easeOut');
isAnimating = 0;
}
});
Cheers.
Instead of using "-100%" try to do it in px.
$imgWidth = $images.width(); // Add this variable
$left.on('click', function(){
if (isAnimating) {
return false;
} else {
var $item = $('.items img:eq(0)');
$item.velocity({'margin-left': -$imgWidth},
400, 'easeOut', function(){
$(this).appendTo('.items .wrapper').css('margin-left', 0);
});
isAnimating = 0;
}
});
$right.on('click', function(){
if (isAnimating) {
return false;
} else {
var $lastItem = $('.items img:eq('+($images.length-1)+')');
$lastItem.prependTo('.items .wrapper')
.css('margin-left', -$imgWidth).velocity({
'margin-left': 0
}, 400, 'easeOut');
isAnimating = 0;
}
});
The integer in the second variable of the velocity function needs to be decreased to speed this up.
Try for example changing 350 to 100 to see the response rate increase.
Related
So I'm having scrolling issues on my site when viewing on mobile browsers. For some reason, scrolling is sometimes stopped or frozen and there is a weird vertical scrolling bar line that appears randomly in the middle of the browser. I have no idea what this could be, I figure it's a js issue between the menu and the project container but not sure if it may be css overflow issue. The link is johnavent.net/projects if you want to view yourself.
Here's my JS for the menu:
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
And here it is for my project contianers:
$('.cd-single-project').bgLoaded({
afterLoaded : function(){
showCaption($('.projects-container li').eq(0));
}
});
$('.cd-single-project').on('click', function(){
var selectedProject = $(this),
toggle = !selectedProject.hasClass('is-full-width');
if(toggle) toggleProject($(this), $('.projects-container'), toggle);
});
$('.projects-container .cd-close').on('click', function(){
toggleProject($('.is-full-width'), $('.projects-container'), false);
});
$('.projects-container .cd-scroll').on('click', function(){
$('.projects-container').animate({'scrollTop':$(window).height()}, 500);
});
$('.projects-container').on('scroll', function(){
window.requestAnimationFrame(changeOpacity);
});
function toggleProject(project, container, bool) {
if(bool) {
container.addClass('project-is-open');
project.addClass('is-full-width').siblings('li').removeClass('is-loaded');
} else {
var mq = window.getComputedStyle(document.querySelector('.projects-container'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, ""),
delay = ( mq == 'mobile' ) ? 100 : 0;
container.removeClass('project-is-open');
project.animate({opacity: 0}, 800, function(){
project.removeClass('is-loaded');
$('.projects-container').find('.cd-scroll').attr('style', '');
setTimeout(function(){
project.attr('style', '').removeClass('is-full-width').find('.cd-title').attr('style', '');
}, delay);
setTimeout(function(){
showCaption($('.projects-container li').eq(0));
}, 300);
});
}
}
function changeOpacity(){
var newOpacity = 1- ($('.projects-container').scrollTop())/300;
$('.projects-container .cd-scroll').css('opacity', newOpacity);
$('.is-full-width .cd-title').css('opacity', newOpacity);
$('.is-full-width').hide().show(0);
}
function showCaption(project) {
if(project.length > 0 ) {
setTimeout(function(){
project.addClass('is-loaded');
showCaption(project.next());
}, 150);
}
}
});
(function($){
$.fn.bgLoaded = function(custom) {
var self = this;
var defaults = {
afterLoaded : function(){
this.addClass('bg-loaded');
}
};
var settings = $.extend({}, defaults, custom);
self.each(function(){
var $this = $(this),
bgImgs = window.getComputedStyle($this.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', ');
$this.data('loaded-count',0);
$.each( bgImgs, function(key, value){
var img = value.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
$('<img/>').attr('src', img).load(function() {
$(this).remove();
$this.data('loaded-count',$this.data('loaded-count')+1);
if ($this.data('loaded-count') >= bgImgs.length) {
settings.afterLoaded.call($this);
}
});
});
});
};
Will post CSS if the issue does not lie within the JS but everything is what you would think and how it behaves on desktop.
I have a navigation bar that repositions after scrolling down. It works with position:fixed, but while scrolling I want it to move up like all the other content that follow on the site . I the user stops scrolling it should reposition on top:
Heres a demo:
http://jsfiddle.net/gvjeyywa/7/
But I want it to be position:absolute (especially for the scrolling on the Ipad)
http://jsfiddle.net/gvjeyywa/5/
How do i let the JS overide my CSS? Here is my JS:
var isInAction = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!isInAction){
isInAction = true;
$( "#navigation" ).animate({
top: "-" + $("#navigation").innerHeight() + "px"
}).delay(1000).animate({
top: "0px"
}, 800, function() {
isInAction = false;
});
}
}
lastScrollTop = st;
});
In the first look i think it's impossible but after some tries this code was created.
I spent long time to write this code and use several techniques and hope to be helpful.
Maybe there are simpler solutions too !!
var bitFlag = false;
var lastScrollTop = 0;
var timeoutId;
$navigation = $("#navigation");
$(window).scroll(function (event) {
var intWindowTop = $(window).scrollTop();
var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
if (intWindowTop > lastScrollTop) {
if (!bitFlag) {
$navigation.css("position", "absolute").css("top", intWindowTop + "px");
bitFlag = true;
}
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function () {
if (intWindowTop > intElementBottom) {
intDelayTime = setTimeout(function () {
$navigation.animate({
top: intWindowTop + "px"
}, 800);
}, 500);
}
}, 100);
} else {
$navigation.css("position", "fixed").css("top", "0px");
bitFlag = false;
}
lastScrollTop = intWindowTop;
});
The }, 500); section control Delay time in milliseconds and the }, 800); section control the slide down animation speed.
Check JSFiddle Demo
I cant get my head around this, been trying many many different ways but no luck.. Basically, I'm trying to pause the animation on mouseOver and resume it on mouseOut. I was able to make it pause by simply using clearTimeout() but I have no idea on how to resume it back on. Please kindly advise me with a correct solution and syntax.
Thank you in advance!
(function ($) {
$.fn.simpleSpy = function (interval, limit) {
limit = limit || 3;
interval = interval || 3000;
items = [];
return this.each(function () {
$list = $(this),
currentItem = 0,
total = 0; // initialise later on
var i = 0;
smplet = $list.clone();
smplet.css("display","none");
$("body").append(smplet);
total = smplet.find('> li').length;
$list.find('> li').filter(':gt(' + (0) + ')').remove();
$list.css("display","");
height = $list.find('> li:first').height();
$list.wrap('<div class="spyWrapper" />').parent().css({ height : 55, position:"relative", overflow:"hidden" });
$('.close').click(function(){
clearTimeout(timec);
if(currentItem == 0 && smplet.length != 1)
delitem=total;
else
delitem=currentItem - 1;
smplet.find('> li').eq(delitem).remove();
currentItem--;
var temp=smplet.find('> li').eq(currentItem).clone();
var $insert = temp.css({
"margin-top":-height-height/3,
opacity : 0
}).prependTo($list);
// fade the LAST item out
$list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
$(this).remove();
});
$insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
currentItem++;
total=smplet.find('> li').length;
if (currentItem >= total) {
currentItem = 0;
}
if (total == 1){
simpleSpy.stop();
}
else if(total == 0){
$("#topbar").hide();
}
timec=setTimeout(spy, interval);
});
currentItem++;
function spy() {
var temp=smplet.find('> li').eq(currentItem).clone();
var $insert = temp.css({
"margin-top":-height-height/3,
opacity : 0,
display : 'none'
}).prependTo($list);
$list.find('> li:last').animate({ opacity : .5 ,"margin-top":height/3}, 500, function () {
$(this).remove();
});
$insert.animate({"margin-top":0,opacity : 1 }, 500).animate({opacity : 1},1000);
$insert.css("display","");
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
timec=setTimeout(spy, interval);
}
timec=setTimeout(spy, interval);
});
};
$('ul.alerts')
.mouseover(function(){
clearTimeout(timec);
})
.mouseout(function(){
timec=setTimeout(spy, interval);
});
})(jQuery);
Call
$(document).ready(function() {
$('ul.alerts').simpleSpy();
});
jsfiddle with html and css
http://jsfiddle.net/1781367/3eK4K/3/
I changed the timeout, which you were setting over and over, to an interval, which you only need to set once. Then I added a "paused" property that is set to true on mouseover and back to false on mouseout.
var paused = false;
$list.mouseover(function() { paused = true; });
$list.mouseout(function() { paused = false; });
Then we just check that property before the rotation animation occurs:
if (paused) {
return;
}
http://jsfiddle.net/3eK4K/6/
I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!
http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)
There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)
I have been trying to applying flipping box just like on http://demo.rickyh.co.uk/flipping-crazy-css3/
I try to modified it a little but it doesn't work even i try to copy paste the source code it doesn't work at all.
so where did i do wrong? do i have to install specific javascript?
note: i'm just trying it on jsfiddle
here is the code
Javascript
var effectSpeed = 250;
function loadDemo(){
var vendor = (Browser.Engine.gecko) ? 'Moz' : ((Browser.Engine.webkit) ? 'Webkit' : '');
if(vendor == "Webkit"){
loadWebKit();
}
else if(vendor == "Moz"){
loadFox();
}
}
function loadWebKit(){
var newStyles = new Hash({
'webkitTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
// elements.setStyle("left", "0px");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('webkitTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'webkitTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'webkitTransform': 'skew(0deg, 20deg)'
});
});
});
}
function loadFox(){
$("webkit").getElement("span").innerHTML = "This ones webkit only"
var newStyles = new Hash({
'MozTransform': 'skew(#deg, #deg)'
});
$extend(Element.Styles, newStyles);
var elements = $("main").getElements(".flips");
elements.setStyle("MozTransform", "skew(0deg, 0deg)");
$("main").getElements(".flips").each(function(item, index){
var currentStyles = item.getStyles("position", "left", "width", "height", "top");
var toggle = false;
item.addEvent('click', function(){
var extraT = 0;
var extraP = 0;
if(this.id == "flip4"){
extraT = 150;
}
if(this.id == "flip4"){
extraP = 500;
}
this.setStyle("overflow", "hidden");
var tp = this;
this.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:in', onComplete: function(){
if(!toggle){
toggle = true;
item.addClass("toggleTrue");
}
else{
toggle = false;
item.removeClass("toggleTrue");
}
tp.setStyle('MozTransform','skew(0deg, -20deg)');
tp.set('morph', {duration: effectSpeed+extraT, transition: 'Sine:out', onComplete: function(){
}});
tp.morph({
'width': currentStyles.width,
'left': currentStyles.left,
'MozTransform': 'skew(0deg, 0deg)'
});
}});
this.morph({
'width': 0,
'left': parseInt(currentStyles.width)/2 + parseInt(currentStyles.left)+extraP,
'MozTransform': 'skew(0deg, 20deg)'
});
});
});
}
Here's a simpler, cleaner way
DEMO http://jsfiddle.net/kevinPHPkevin/UC6fK/
$(document).ready(function(){
// set up hover panels
// although this can be done without JavaScript, we've attached these events
// because it causes the hover to be triggered when the element is tapped on a touch device
$('.hover').hover(function(){
$(this).addClass('flip');
},function(){
$(this).removeClass('flip');
});
});