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 ;)
Related
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'){
}
}
});
});
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
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.
I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.
I am trying to make a sort of "scales" look, where two divs will slowly animate up and down like being weighed on a scale. I could use some help with the functions though please, I can not get two to animate simultaneously on page load, and I need them to go up, then back down, then up, etc... Make sense? Here is what I have so far, I am kinda new to jquery obviously, :)
Thanks for any help!
<style type='text/css'>
body {
background: #262626;
}
.main
{
margin: 20px auto;
position:relative;
height:400px;
width:300px;
}
.content
{
float: left;
position:absolute;
bottom: 10px;
left: 100px;
height:40px;
width: 100px;
}
.content2
{
float: left;
position:absolute;
top: 10px;
left: 100px;
height:40px;
width: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".content").animate({top:'10px'},{ queue:true, duration:3000 }),
$(".content2").animate({bottom:'10px'},{ queue:true, duration:3000 });
});
</script>
<div class="main">
<div class="content">
<img src="pixel.png" alt="" />
</div>
<div class="content2">
<img src="functional.png" alt="" />
</div>
</div>
If you want them animated simultaneously, you should set queue to false.
document.ready does not wait for images to download. So use window.onload instead. And you should not be queueing if you want them to animate simultaneously. Also, I think in your animation you need to reset the top/bottom values respectively, so they don't interfere with each other...
$(window).load(function() {
$(".content").animate({top:'10px', bottom:0}, 3000);
$(".content2").animate({bottom:'10px', top:0}, 3000);
});
I think there should be a semicolon instead of a comma at the end of this line:
$(".content").animate({top:'10px'},{ queue:true, duration:3000 }),
That would explain why the next line is not being called.
For anyone looking for a solution. The queue: true statement kind of worked, but not really so I created another one.
If you're running the same animation, the best way to execute the command is to put them within one statement.
Use a comma to separate classes/ids.
ie) .content, .content2.
$(document).ready(function() {
$(".content, .content2").animate({top:'10px'},{ duration:3000 }),
done :)
Here is what I came up with, with help from various sources. This give the "teeter totter" effect on page load which I was going for.
<script>$(document).ready(function(){
$("#box1").animate({top:'+=150px'},3000 );
$("#box2").animate({top:'-=150px'},3000 );
$("#box1").animate({top:'-=150px'},3000 );
$("#box2").animate({top:'+=150px'},3000 );
$("#box1").animate({top:'+=100px'},4000 );
$("#box2").animate({top:'-=100px'},4000 );
$("#box1").animate({top:'-=100px'},4000 );
$("#box2").animate({top:'+=100px'},4000 );
$("#box1").animate({top:'+=50px'},5000 );
$("#box2").animate({top:'-=50px'},5000 );
$("#box1").animate({top:'-=20px'},5000 );
$("#box2").animate({top:'+=20px'},5000 );
});
</script>
I'm afraid this may be too "brute force", but I don't know of a better, smoother way to do this.