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.
Related
Here is my js where i already did a swipeleft and swiperight events in order to show a toolbar on the left. (it is for a smartphone app, with touch events)
I wanted to add the drag event on it, to keep control on the bar (like on menu bar of Facebook, Tinder..
Do you know how i can do it ?
$(function(){
var page = document.getElementById("page");
var sidebar = 0;
Hammer(page).on("swipeleft", function(e) {
if (!sidebar){
return true;
}
$(page).animate({left: "-=300"}, 500);
sidebar = 0;
});
Hammer(page).on("swiperight", function(e) {
if (sidebar){
return true;
}
$(page).animate({left: "+=300"}, 500) ;
sidebar=1;
});
})
I already tried this but it doesn't recognize drag and e.gesture.direction...
Hammer(page).on("drag", function(e) {
if ( e.gesture.direction === "right" && !sidebar){
$(page).animate({left : e.gesture.deltaX + "px"}, 0);
}
});
The event is called pan not drag. See the docs.
Hammer(page).on("panright", function(e) {
if (!sidebar){
$(page).animate({left : e.gesture.deltaX + "px"}, 0);
}
});
Ok, I found it! You were right, #Cristy :)
Here is the working answer:
$(function(){
var page = document.getElementById("page");
var sidebar = 0;
Hammer(page).on("swipeleft", function(e) {
if (!sidebar){
return true;
}
$(page).animate({left: "-=300"}, 500);
sidebar = 0;
});
Hammer(page).on("panleft", function(e) {
if (!sidebar){
$(page).animate({left : e.deltaX + "px"}, 0);
}
});
Hammer(page).on("swiperight", function(e) {
if (sidebar){
return true;
}
$(page).animate({left: "+=300"}, 500) ;
sidebar=1;
});
Hammer(page).on("panright", function(e) {
if (!sidebar){
$(page).animate({left : e.deltaX + "px"}, 0);
}
});
})
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.
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'm making a quick animated drop down. I have it working great when you mouseover and mouseout on the initial button. I just cant get the HTML div that drops down to "hold" when you're hovered on the dropdown itself. here is a fiddle of what I'm doing: http://jsfiddle.net/kAhNd/
here's what I'm doing in the JS:
$('.navBarClickOrHover').mouseover(function () {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '200px'
});
}).mouseout(function () {
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
} else {
var targetDropDown = $(this).attr('targetDropDown');
var targetDropDownHeight = $('#' + targetDropDown).height();
$('#' + targetDropDown).animate({
'height': '0px'
});
}
});
It works, but the element doesn't stay dropped down when you have your mouse over it. I added in
if ($('.dropdownCont').is(':hover') || $('.navBarClickOrHover').is(':hover')) {
}
to try to make it do nothing when you're hovered over '.dropdownCont'.
Having a hard time explaining it. I'm sorry, I hope I make sense. Any help would be awesome! here's my Fiddle: http://jsfiddle.net/kAhNd/
Here is your code transformed http://jsfiddle.net/krasimir/kAhNd/3/
var button = $('.navBarClickOrHover');
var isItOverTheDropdown = false;
var showDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '200px'
});
targetDropDown.off("mouseenter").on("mouseenter", function() {
isItOverTheDropdown = true;
});
targetDropDown.off("mouseleave").on("mouseleave", function() {
isItOverTheDropdown = false;
hideDropDown();
});
}
var hideDropDown = function() {
var targetDropDown = $('#' + button.attr('targetDropDown'));
var targetDropDownHeight = targetDropDown.height();
targetDropDown.animate({
'height': '0px'
});
}
$('.navBarClickOrHover').mouseover(function () {
showDropDown();
}).mouseout(function () {
setTimeout(function() {
!isItOverTheDropdown ? hideDropDown : '';
}, 500);
});
I guess that this is what you want to achieve.
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');
});
});