Im using Fullpage.js and trying to make it work with wordpress, and its going forward. However, I'm trying to figure out how to be able to scroll trough a slide with content higher then the active slide. The plugin comes with a scroll overflow function, but that vill make a scrollbar that scrolls trough your content, and keeps going to the next slide.
Ideally a constant scrollbar that stops at the current slide would be the best option for me, but i dont know if this is possible.
Been fiddling with this for a while, so if anyone has any ideas how to solve this i would be thankful. My site:
http://www.svenssonsbild.se/Fullscreen/
Edit: Realize that what i want should be able to achieve by setting scrolloverflow: true in the plugins setting. Just didnt realize it didnt work for me.
So, if anyone hav any ideas why it wont work for me then it would be great. I suspect it have something with having the scripts hardcoded in the header and not enqueued, which i havent been able to figure out how to, since the supercontainer the script creates duplicates.
anyhow, any pointers will be very appriciated.
I struggled with this myself, then went to read through the documentation again. Here what it states:
scrollOverflow: (default false) defines whether or not to create a
scroll for the section in case its content is bigger than the height
of it. In case of setting it to true, it requieres the vendor plugin
jquery.slimscroll.min and it should be loaded before the fullPaje.js
plugin. For example:
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
Not loading SlimScroll.js was the issue here.
Then set your $.fn.fullpage({ }) config accordingly.
$('#fullpage').fullpage({
scrollOverflow: true
});
Just to add a little info that mighht help out others, I've been using both plugins (fullpage.js and slimscroll.js) but found issues with slimscroll when using it on mobile devices (momentum and lag issues).
It is possible to set scrollOverflow to false and add this next bit to the afterSlideLoad function to get native scrolling if content is too long:
$('.slide .active').css('overflow-y','auto');
Related
I used display:none for one of sections so its visible only on devices with less than 576px. And anchors are wrong, and scrolling jumps from second to first section. How to fix it?
This is the
page
According to GitHub's plugin docs, this is still an open issue that needs to be fixed by the lib's developer. What he mentioned as a workaround is destroying fullpage.js and reinitializing it again without the faulty section. (Whenever you are going to do that is up to you to find appropriate, whether on screen width resize, page loads, etc etc)
As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.
I'm using fullpage.js (which is brilliant), but I haven't been able to get a few of its options to have any effect. For example, the navigation won't appear, nor is the content vertically centered. Here is a link to the code I am using. These are the options that aren't taking effect so far:
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
verticalCentered: true
});
If anyone familiar with fullpage.js could take a look it would be much appreciated.
I did never use fullpage.js but I just checked out the source and your example.
This is what I came up with:
The "navigation" option doesn't work because fullpage.js can't append the section navigation items to the element with the id #fp-nav. That's probably because it sets the "nav" selector before it adds this element to the body. You can see that it was correct in a previously tagged version: https://github.com/alvarotrigo/fullPage.js/blob/v.2.2.8/jquery.fullPage.js vs https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.js
I'm not sure what's up with the "master" branch, but it seems like this is broken (or it only works with a specific version of jQuery).
You could however dirty-fix the navigation problem by adding a
<div id="fp-nav"><ul></ul></div>
somewhere in your body.
The vertical alignment seems to work for me.
It looks like your settings are being applied, but you are expecting the results to be different. for example, verticalCentered is working as you can tell by inspecting the page and seeing that vertical-align:middle is happening.
and your navbar is there, just not visible for some reason (maybe you need to pass in more settings? Not sure on this one.)
I am not sure what you are looking for it to look like exactly, but I would use chrome devtools if you aren't already to help check if things are actually changing.
I hope I'm not violating any written or unwritten rules by asking for help on my business' site.
http://www.gnarlyweb.com/wrladv/
So I'm using Flexslider (but have tried at least 3 others) to handle showing multiple pieces of work on portfolio items. If you scroll to the Portfolio section, each item is clickable, and a flexslider appears. The Flexslider js is obviously working because the nav shows up, the images will animate if I have slideshow: true, but the arrows on the side do not make it move to the next piece.
I've been working on this for weeks now and can't figure it out. Does anyone know why only half of the Flexslider library works in this situation?
I know it's not Flexslider's fault, because I can put together a jsfiddle with the sources from the portfolio area and have it work perfectly.
I see all your images are in one flexslider container and they are dynamic.
I think this may cause this problem.
But i'm not pretty sure.
My suggestion is: different flexsliders for different images
You're not giving anything for the flexslider script to reference in your html. Looks like your basic html setup for your flexslider is:
<div class="portfolio-slides">
<ul class="slides">
<li><li>
</ul>
</div>
By default, the flexslider script searches for the flexslider class. You can either go into your flexslider script and add,
$(document).ready()
$(window).load(function() {
$('.portfolio-slides').flexslider({
});
});
or change your div class name to flexslider. The issue you're going to run into is that you have multiple flexsliders so you're going to have to create unique tags and have jquery call on each one otherwise all the flexsliders sync up.
OK doing a "fixed height design" microsite for a client;
Situation
At present I have built it in HTML with normal hyperlinks as Nav.
Underneath the fixed height content is a scrollbar, as they want to be able to have Carousel slidy through the pages from the homepage.
Obviously on visiting the omepage, I'm going to need to AJAX in the next possible pages. Clicking on a hyperlink nav, will slide the carousel to that page content.
Despite my objections for many reasons they want to proceed with the idea.
Mission
Has anyone tried this idea for a slidy flash site but in HTML?
What jQuery carousel plugins can be bastedised? My experience with Carousel is it needs all the elements in the page to initialise, how will ajaxing in new elements be handled...
I'm not quite as experienced coder to do my own carousel plugin with the complexity of AJAX and error handling.
Anyone got an ideas how they would tackle it or direction as to where to start?!?
P.S. Sorry this is vague, anhd may be more of a discussion than a Q and A.
Cheers, Will
For the carousel, in my experience jQuery Cycle plugin works with AJAX-content. I've used it, liked it. http://jquery.malsup.com/cycle/
With Cycle plugin you have arrows for page-changing. It seems to have a parameters
pager: null, // selector for element to use as pager container
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
pagerEvent: 'click.cycle', // name of event which drives the pager navigation
So it might work for your needs.
I'm not sure I understand your layout exactly, but if you just need to scroll it sideways, just give a container a fixed width & overflow-y: scroll.