Scroll Sections with Custom Scrollbar (Nice Scroll) -- Animation jerks on fast Scrolling - javascript

DEMO
I am using Scroll Section with Nice Scroll.
Every thing is fine but if i scroll really quickly it start producing these animation jerks.
HTML:
<section id="top" class="root_section">
This is a section 1
</section>
<section id="mid" class="root_section">
This is a section 2
<section id="mid-test-1" class="mid-inner-test-1 root_section"> Mid section </section>
</section>
<section id="bot" class="root_section">
This is a section 3
</section>
CSS:
html, body{
height:!00%;
}
.root_section{
height: 100%;
position: relative;
}
.mid-inner-test-1{
position: absolute;
top: 100px;
left: 100px;
}
JS:
$('section.root_section').scrollSections({
mousewheel: true,
});
$("body").niceScroll({
easing: 'easeOutCircle'
});
What i have tried:
If i declear mousewheel: false on scrollSection() function it starts working fine but it no longer switches the section on single scroll down or scroll up.
Any help will be much appreciated.

Change your JS to:
Demo Fiddle
$('body').scrollSections({
mousewheel: true,
});
$("body").niceScroll({
easing: 'easeOutCircle'
});
You are giving the plugin conflicting information, by instructing two different elements. You are effectively applying it to your body but then detecting the scroll event for mouse wheel on a child seperately.

Related

From smooth scroll to normal one and vice versa

I'll start linking you the website which I'm referring to.
This one instead is an Official website which has this feature already up and working, maybe you'll understand better what I mean hopefully!
I've made 2 sections, and applied a scroll that needs just a single mouse scroll to get automatically to the next section.
But in this page, I have a table in the 2nd section, a long one, so I'd prefer to disable that fixed view of the section and enable the normal scroll in order to see the whole table.
But, I'd like to be able to switch back to the other scroll when I'll scroll up til the end of the second section, ready to go back to the 1st.
This is my JS script:
$(document).ready(function() {
$('#fullpage').fullpage({
css3: true,
scrollingSpeed: 600,
autoScrolling: true,
fitToSection: true,
fitToSectionDelay: 1000,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
//Design
controlArrows: true,
verticalCentered: true,
sectionsColor: ['#ccc', '#fff', '#cfc'],
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
});
});
I am using FullPage to do this, maybe some of you already know it.
EDIT:
This is the body setup, 2 sections, #first and #second, each one inside a div of class .section, and both divs inside the div #fullpage:
<div id="fullpage">
<div class="section" id="first">
<p style="color:#fff; margin-bottom: 50px; font-size: 5em; text-align: center;">Staff</p>
</div>
<div class="section" id="second">
<!-- Capo -->
<table>
...
</table>
</div>
</div>
I can't do much more for you, this is a fiddle! with a hack to your problem, more than a solution, but hope it inspire you to find a much better aproach and solution
jQuery:
var sec=0;
$('#first').on('mousewheel', function(event) {
console.log('scroll, '+sec+", "+$("#fullpage").scrollTop());
if(sec == 0 && $("#fullpage").scrollTop()!=0){
$("#first").slideUp(300,function(){
$("#second").show(function(){
$("#second").scrollTop(1);
});
});
}
});
$('#second').on('mousewheel', function(event) {
if(sec==0){
sec=1;
}
console.log($("#second").scrollTop());
if($("#second").scrollTop() == 0){
sec=0;
$("#second").hide();
$("#first").slideDown(300, function(){
$("#fullpage").scrollTop(0);
});
}
});
and the addition to your CSS:
#first{
margin-top:0px;
margin-left:0px;
height:401px;
overflow-y: auto;
}
#second{
display:none;
margin-top:0px;
margin-left:0px;
height:100%;
overflow-y: auto;
}
#fullpage{
height:400px;
overflow: hidden;
overflow-y: auto;
}
I really love programming, but got my own software to develop and maintain ;)

Webflow and Fullpage.js interfering with each other

I am currently using the fullpage.js plugin on a test website I designed with webflow. Everything worked correctly until I included the plugin. Now, the scrolling interactions of webflow don't work anymore.
I think the two javascript files kind of interfere with each other, limiting functions of the other one to work correctly. I would love to fix this but I really don't know how.
This is the site without the fullpage.js included. This is the site with the fullpage.js included. As you can see, in the first example the paragraphs fade in and out on scrolling. In the second example they don't. The paragraphs simply stay in their initial appearance state which is opacity = 0. I really would love to see the fullpage.js working side by side with the webflow interactions.
_
This is the html code:
<body>
<div class="pagewrap">
<div class="section blue01">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
<div class="section blue02">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
<div class="section blue03">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
</div>
</body>
_
This is the javascript code:
<script type="text/javascript" src="js/webflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.pagewrap').fullpage({
'verticalCentered': true,
'css3': true,
'navigation': true,
'navigationPosition': 'right',
});
});
</script>
_
This is the CSS code:
.section.table,
.slide.table {
display: table;
width: 100%;
}
.tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.easing {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.section {
height: 100vh;
}
.section.blue01 {
background-color: #3cb7e8;
}
.section.blue02 {
background-color: #3ccbe8;
}
.section.blue03 {
background-color: #3ce2e8;
}
html.w-mod-js.w-mod-no-ios *[data-ix="scroll-fade-in"] {
opacity: 0;
}
_
This is where you can find the two included javascript files:
jaroquastenberg.de/_x/help/01/js/webflow.js
jaroquastenberg.de/_x/help/01/js/jquery.fullPage.js
_
Is there maybe anyone who is good at javascript and can find out where the two scripts conflict with each other?
Thanks in advance!
Jaro
You'll find the answer in fullPage.js FAQs:
jQuery scroll event doesn't work
Same answer as Parallax doesn't work with fullpage.js
Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.
And:
Parallax doesn't work with fullpage.js.
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don't want to use the auto-scrolling feature.
Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
If you just want your text to fadeIn or out, I would use the CSS class added to the body on page change. But feel free to use the callbacks as well combined with javascript or jQuery to create your effects.
I solved how to run SCROLL animations in WEBFLOWE if you use FULLPAGE.JS. To scroll ANCHOR, after refreshing for each ANCHOR, refresh the scrolla position as follows:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['01', '02', '03', '04', '05'],
animateAnchor: true,
easing: 'easeInOutCubic',
scrollingSpeed: 600,
scrollOverflow: true,
scrollOverflowReset: true,
//
afterLoad: function(origin, destination, direction){
var loadedSection = this;
//refresh scroll position
$.fn.fullpage.setAutoScrolling(false);
$.fn.fullpage.setAutoScrolling(true);
//
if(origin.anchor == '01'){
}
if(origin.anchor == '02'){
}
if(origin.anchor == '03'){
}
if(origin.anchor == '04'){
}
if(origin.anchor == '05'){
}
}
});
});

Scrolling marquee text wrap on IE9

I am working on a scrolling marquee SharePoint web part. The web part is using the cycle plugin here (http://jquery.malsup.com/cycle/)
The text will scrolling down to the bottom and reappear at the top. It works as expected in IE8. However, in IE9, some string will have problem. (e.g. UAT Testing on 9 May) When the text reappear at the top it wrapped by unknown reason.
fiddle link here:
http://jsfiddle.net/9PK6z/18/
See the picture below:
Here is the part of script:
<div id='ticker_10eb4222-addd-4f86-8d84-94926eae0aa2' class='ticker' style='position: relative; width: 530px; height: 60px; overflow: hidden;'>
<ul class="list-style1"><li><span>UAT Testing on 1 Aug</span></li></ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
for(var i =0; i<2; i++) {
$('#ticker_10eb4222-addd-4f86-8d84-94926eae0aa2')
.find("ul")
.clone()
.appendTo($('#ticker_10eb4222-addd-4f86-8d84-94926eae0aa2'));
}
$('#ticker_10eb4222-addd-4f86-8d84-94926eae0aa2')
.cycle({ fx: 'scrollVert', continuous: 1, speed: $('#ticker_10eb4222-addd-4f86-8d84-94926eae0aa2')
.find("ul:eq(0) li").size() * 3000, delay: 0, easing: 'linear', rev:0 });
});
</script>
String like "UAT Testing at 1 Aug" will not have problem. I have tried many combination still not find the pattern.
What changes in IE9 cause the problem?
Based on your fiddle it seemed to be an issue with the overflow css property.
I found that by switching the overflow from the #ticker element to the ul element, it started to work
.bochk-list-style1 {
background-color:#ffffb6;
overflow: hidden;
}
#ticker {
border:1px solid black;
}
I tested this in Chrome and IE9 and it seemed to work ok
Fiddle

Hidden div is moving when it's shown

+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?

How to fix Google ads that force their way to the top of other divs on webpage?

I have a site on Google App engine written in python/django/html. Site is located at http://perlesloyfer.no
Its a kind of blog that shows some images of people with a kind of bows i make. I have implemented a "sticky header" at the top, and im showing ads in the 9th position of the posts. But when i scroll the list the Google Ads are somehow forcing them self to be on top of the header. Image of this is in the bottom of the question.
What causes this, and is it possible to fix it? I want the ad to scroll like the other posts, but it should not show as it is "over" the header when its at that position.
Sticky header jquery code:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#sticky').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
//$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
$('#sticky').addClass("sticky");
} else {
$('#sticky').removeClass("sticky");
}
});
});
Actual HTML for the header:
<div id="sticky" class="top-area">
<div class="main-header">Perlesløyfer</div>
<div class="main-subheader"><p>Av Håkon Bogen</p></div>
<div class="tabs">
<ul>
<li>Bilder</li>
<li><a class="selected" href="./about">Om</li></a>
<li>Kjøp</li>
<li>Last opp</li>
</ul>
</div>
CSS for sticky:
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
}
Google Ad code:
<div class="commercial" id="page-wrap-ad">
<p id="ads">
<!--- google_ad_client = .... -->
<script type="text/javascript">
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
Not sure if I am allow to post this or not, but here goes:
Find the specific target element (div, class, etc) of the Ad in questions and use CSS to overwrite its positioning.
Example:
#myAnnoyingAd{
position: fixed !important;
top: 0 !important;
left: 0 !important;
}
Just added a greater z-index to the sticky header. Wasn't harder than that.
#sticky {
background-color: white;
position:fixed;
top:0;
width:100%;
z-index:1000;
}

Categories