Develop Reference

Vertical Scrolling Issues on Mobile

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.

How to set indicator position on active link

Good afternoon,
I'm trying to make jquery lavalamp effect working, but I've got stucked at one point. When I click on an item, it's marked as active, it changes color, but the arrow under menu doesn't stay under the active one and every time returns out of the page. There is my code, where is set what happens with arrow while hover and while active. I must edit settings for active, but I have no idea how...
Thanks for all your advices! (btw. page with problem - www.idealcars.cz)
EDIT: OK I've solved problem with arrow place after click, but there is still issue that arrow doesn't change her place during scrolling.
Here is my code now, the "scroll" part doesn't work.. Any help please?
var foundActive = false, activeElement, indicatorPosition, indicator = $('#cssmenu #menu-indicator'), defaultPosition, storage;
$("#cssmenu > ul > li").each(function() {
if ($(this).hasClass('active')) {
$(this).addClass('active');
activeElement = $(this);
foundActive = true;
} else {
}
});
if (foundActive === false) {
activeElement = $("#sipka").first();
}
defaultPosition = indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
storage = defaultPosition;
console.log(activeElement);
console.log(activeElement.position().left);
console.log(activeElement.width());
indicator.css("left", indicatorPosition);
$("#logo").hover(function() {
activeElement = $("#sipka");
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
indicator.css("left", indicatorPosition);
},
function() {
indicator.css("left", defaultPosition);
});
$("#logo").click(function () {
//reset the selected item
activeElement = $("#sipka").first();
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
defaultPosition = indicatorPosition;
});
function scrollOn(event){
var scrollPos = $(document).scrollTop();
$('#cssmenu > ul > li').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
activeElement = currLink;
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
defaultPosition = indicatorPosition;
}
else{
}
}
);
}
$("#cssmenu > ul > li").hover(function() {
activeElement = $(this);
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
indicator.css("left", indicatorPosition);
},
function() {
indicator.css("left", defaultPosition);
});
$("#cssmenu > ul > li").click(function () {
activeElement = $(this);
indicatorPosition = activeElement.position().left + activeElement.width()/2 - 5;
defaultPosition = indicatorPosition;
});

Hi #Hynek I have done some fixes in your script as per your previous question (that was deleted)try with the following script hope this might help.
<script>
var is_click = 0;
var anchor_name = '';
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
is_click = 1;
anchor_name = $(this).html();
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
$('#cssmenu ul li').on('click', function (e) {
is_click = 1;
anchor_name = $(this).find('a').html();
});
$('a[href^="#"]').blur(function() {
addPointer();
});
$('#cssmenu ul li').blur(function() {
addPointer();
});
});
function addPointer(){
$('#menu-indicator').removeAttr('style');
$('.menu-indicator').removeAttr('style');
if(anchor_name == 'O nás'){
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 622px;');
$('.menu-indicator').attr('style', 'left: 622px;');
}else if(anchor_name == 'Ceník') {
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 713.5px;');
$('.menu-indicator').attr('style', 'left: 713.5px;');
}else if(anchor_name == 'Služby'){
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 809px;');
$('.menu-indicator').attr('style', 'left: 809px;');
}else if(anchor_name == 'Kontakt'){
$('#menu-indicator').stop();
$('.menu-indicator').stop();
$('#menu-indicator').attr('style', 'left: 912px;');
$('.menu-indicator').attr('style', 'left: 912px;');
}
}
</script>

Jquery scroll script - menu to sit on top of section not inside it

I have this code which I have had help with: http://jsfiddle.net/spadez/2atkZ/embedded/result/
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
} else if (currentScrollTop <= init && isFixed === true) {
isFixed = false;
$select.css('position', 'relative');
$('body').css('padding-top', 0);
}
//active state in menu
$('.section').each(function(){
var eleDistance = $(this).offset().top;
if (currentScrollTop >= eleDistance) {
var makeActive = $(this).attr('id');
$('#select a').removeClass('active');
$('#select a.' + makeActive).addClass('active');
}
});
});
$(".nav").click(function (e) {
e.preventDefault();
var divId = $(this).attr('href');
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
Currently the seconds are defined when the yellow bar is fully inside that section. I want to make it so when I click on a section on the yellow bar to go to, the yellow bar sits on top of it, rather than inside it at the top. Is there a simple and elegant way of doing this, whilst still allowing the code to set the active state on the section which sits below it.

This will do the work:
HTML
Instead of the anchors, use this:
<span data-sec="#posting" class="nav posting">posting</span>
<span data-sec="#distribution" class="nav distribution">distribution</span>
<span data-sec="#application" class="nav application">applicantions</span>
JS
$(function () {
var $select = $('#select');
var $window = $(window);
var isFixed = false;
var init = $select.length ? $select.offset().top : 0;
$window.scroll(function () {
var currentScrollTop = $window.scrollTop();
if (currentScrollTop > init && isFixed === false) {
isFixed = true;
$select.css({
top: 0,
position: 'fixed'
});
$('body').css('padding-top', $select.height());
} else if (currentScrollTop <= init) {
isFixed = false;
$select.css('position', 'relative');
$('#select span').removeClass('active');
$('body').css('padding-top', 0);
}
//active state in menu
$('.section').each(function(){
var eleDistance = $(this).offset().top;
if (currentScrollTop >= eleDistance-$select.outerHeight()) {
var makeActive = $(this).attr('id');
$('#select span').removeClass('active');
$('#select span.' + makeActive).addClass('active');
}
});
});
$(".nav").click(function (e) {
console.log('hej');
var divId = $(this).data('sec'); console.log(divId);
$('body').animate({
scrollTop: $(divId).offset().top - $select.height()
}, 500);
});
});
jsFiddle demo

jquery scroller mousewheel with keyboard

I currently have a site that is a scroller
Here is the article i am trying to add the keyboard keys up and down to below code
[http://jsfiddle.net/roXon/r3x7r/1/]
Control page scroll animation with mousewheel
kindly any one let me know if this is possible..

Hope this will help you,
http://jsfiddle.net/r3x7r/274
Added keyboard shortcut for scrolling in the page sections.
// OUR CODE
var winH = $(window).height();
$('.page').height(winH);
var c = 0;
var pagesN = $('.page').length;
var activePage=0;
$(document).bind('mousewheel', function(ev, delta) {
delta>0 ? --c : ++c ;
if(c===-1){
c=0;
}else if(c===pagesN){
c=pagesN-1;
}
activePage = c;
var pagePos = $('.page').eq(c).position().top;
$('html, body').stop().animate({scrollTop: pagePos},{easing: 'easeInCirc', duration: 1200});
return false;
});
$(document).bind('keyup', function(event){
console.log(event);
if(event.which == 40) {
activePage = activePage+1;
var pagePos = $('.page').eq(activePage).position().top;
$('html, body').stop().animate({scrollTop: pagePos},{easing: 'easeInCirc', duration: 1200});
} else if(event.which == 38) {
activePage = activePage-1;
var pagePos = $('.page').eq(activePage).position().top;
$('html, body').stop().animate({scrollTop: pagePos},{easing: 'easeInCirc', duration: 1200});
}
return false;
});

JQuery: Fade In Only Specific Element (IE and Opera)

I'm facing a bit of a jQuery conundrum, and I'd appreciate someone helping me to solve it.
I want to fade in a web page, using jQuery, after all the text and images have loaded. So I set body style inline as "display:none" and then fade in the body using this basic snippet:
<script type="text/javascript">
$(window).load(function() {
$('body').fadeIn(300);
});
</script>
This achieves exactly what I want in Firefox, Safari and Chrome. However, Internet Explorer and Opera present a challenge: when the body fades in, all the elements of the JQuery gallery, included in the page, appear simultaneously, instead of rotating, as they do in "normal" browsers.
I'm posting the entire gallery script here:
/* Gallery */
jQuery.fn.gallery = function(_options){
// defaults options
var _options = jQuery.extend({
duration: 600,
autoSlide: false,
slideElement: 1,
effect: false,
fadeEl: 'ul',
switcher: 'ul > li',
disableBtn: false,
next: 'a.link-next, a.btn-next, a.next',
prev: 'a.link-prev, a.btn-prev, a.prev',
circle: true
},_options);
return this.each(function(){
var _hold = $(this);
if (!_options.effect) var _speed = _options.duration;
else var _speed = $.browser.msie ? 0 : _options.duration;
var _timer = _options.autoSlide;
var _sliderEl = _options.slideElement;
var _wrap = _hold.find(_options.fadeEl);
var _el = _hold.find(_options.switcher);
var _next = _hold.find(_options.next);
var _prev = _hold.find(_options.prev);
var _count = _el.index(_el.filter(':last'));
var _w = _el.outerWidth(true);
var _wrapHolderW = Math.ceil(_wrap.parent().width()/_w);
if (((_wrapHolderW-1)*_w + _w/2) > _wrap.parent().width()) _wrapHolderW--;
if (_timer) var _t;
var _active = _el.index(_el.filter('.active:eq(0)'));
if (_active < 0) _active = 0;
var _last = _active;
if (!_options.effect) var rew = _count - _wrapHolderW + 1;
else var rew = _count;
if (!_options.effect) _wrap.css({marginLeft: -(_w * _active)});
else {
_wrap.css({opacity: 0}).removeClass('active').eq(_active).addClass('active').css({opacity: 1}).css('opacity', 'auto');
_el.removeClass('active').eq(_active).addClass('active');
}
if (_options.disableBtn) {
if (_count < _wrapHolderW) _next.addClass(_options.disableBtn);
_prev.addClass(_options.disableBtn);
}
function fadeElement(){
_wrap.eq(_last).animate({opacity:0}, {queue:false, duration: _speed});
_wrap.removeClass('active').eq(_active).addClass('active').animate({
opacity:1
}, {queue:false, duration: _speed, complete: function(){
$(this).css('opacity','auto');
}});
_el.removeClass('active').eq(_active).addClass('active');
_last = _active;
}
function scrollEl(){
_wrap.animate({marginLeft: -(_w * _active)}, {queue:false, duration: _speed});
}
function toPrepare(){
if ((_active == rew) && _options.circle) _active = -_sliderEl;
for (var i = 0; i < _sliderEl; i++){
_active++;
if (_active > rew) {
_active--;
if (_options.disableBtn &&(_count > _wrapHolderW)) _next.addClass(_options.disableBtn);
}
};
if (_active == rew) if (_options.disableBtn &&(_count > _wrapHolderW)) _next.addClass(_options.disableBtn);
if (!_options.effect) scrollEl();
else fadeElement();
}
function runTimer(){
_t = setInterval(function(){
toPrepare();
}, _timer);
}
_next.click(function(){
if(_t) clearTimeout(_t);
if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.removeClass(_options.disableBtn);
toPrepare();
return false;
});
_prev.click(function(){
if(_t) clearTimeout(_t);
if (_options.disableBtn &&(_count > _wrapHolderW)) _next.removeClass(_options.disableBtn);
if ((_active == 0) && _options.circle) _active = rew + _sliderEl;
for (var i = 0; i < _sliderEl; i++){
_active--;
if (_active < 0) {
_active++;
if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.addClass(_options.disableBtn);
}
};
if (_active == 0) if (_options.disableBtn &&(_count > _wrapHolderW)) _prev.addClass(_options.disableBtn);
if (!_options.effect) scrollEl();
else fadeElement();
return false;
});
if (_options.effect) _el.click(function(){
_active = _el.index($(this));
if(_t) clearTimeout(_t);
fadeElement();
return false;
});
if (_timer) runTimer();
});
}
$(document).ready(function(){
$('div#gallery').gallery({
duration: 2000,
effect: 'fade',
fadeEl: 'ul.gall-inner > li',
next: 'a#next-btn',
prev: 'a#prev-btn',
autoSlide: 6000,
switcher: '.brands-list ul > li'
});
});
Could some knowledgeable person please help me to find a solution or a workaround? I'd be truly grateful!