I'm developing a website that heavily uses FullpageJS:
http://dev.oxplore.surge.online/
On the very first section, I've got a horizontal scrolling section with six slides. I can scroll between them all the way to the last-but-one slide. After that, the plugin loops back to the first slide, despite loopHorizontal being set to false.
The issue is most likely caused by a problem in my own CSS/JS, since making a from-scratch demo of Fullpage horizontal scrolling works fine. But I can't figure out what's interfering, so I thought I'd ask here for help.
*Note: a lot of JS re-arrangement of the page structure happens before Fullpage is called. However, the HTML is definitely in the right structure when Fullpage is called, so it should work.
*Note: the site is developed on a Drupal back-end (not my choice), but that shouldn't be affecting the plugin.
Steps to reproduce it
Scroll horizontally through the slides in the first section
After reaching slide 5, press right-arrow again.
Instead of advancing to slide 6, we loop back to slide 1 again.
Versions
Chrome, Firefox, IE, Mobile, etc
Related
could you please help me out with the following problem?
context:
Let me start of saying I'm a amateur / hobbyist webdesigner, far from anything professional. I've been busy making a website for my business. The portfolio section contains a horizontal mousewheel scrolling section, so the images read from left to right.
I have made the website with muse, and implemented some custom CSS and JS code in there to make the horizontal scrolling happen. my knowledge of JS is limited.
problem:
Everything works fine, except in safari. Here the horizontal scrolling doesn't work. This has to do with overflow-y:hidden I have set at html and body. If I remove this, the scrolling works in safari BUT without the overflow-y: hidden, the website will not show properly in responsive mode as it will exceed the content height, showing a big blank space underneath the content where the user can swipe down to. I tried a lot of things but unfortunately I feel I'm at a dead end. Could anyone please help me out?
goal:
desktop mode: allow horizontal mousewheel scrolling in safari
responsive mode: don't show big empty space beneath content
website URL:
http://www.jellevdvegt.nl/kam.html
Testing this current project I'm working on (http://hp1.icorp.net/datatv/mwc/index.html) and it's fine on desktop but on my iPhone 6, the page loads but I can't seem to swipe downwards for more content. I'm wondering if it's because I'm using the Skrollr JS scripts to add parallax and other animated effects to the site.
The good news is that the navigation does work, so it does point down to the right portions of my one pager, but because there are animation opacity effects added, I can't see my content without swiping.
Never mind. I found out to make it work on iOS, you have to add another div or section tag with the class of 'skrollr-body' to make that work. Sneaky!
I have a website (http://file-new.com/client/vequity5/). The whole website is in the jQuery Malsup's Cycle2 plugin. Everything seems to be working fine and as expected except one little thing. When you click on the last page (contact) the slide transition has a little white flash. It's more pronounced in safari that any other browser but it's still visible almost any browser. My observation of the effect are leading me to the conclusion that it has to do something with the synchronization of the animation of the slides.
Any advice/thought will be much appreciated.
I've implemented the following tabbed widget in the sidebar of my blog (Blogger hosted): http://mylpgb.blogspot.com/2013/04/how-to-add-5-tabbed-widget-for-blogger.html
It works just fine in Chrome and Firefox (the submit box is a bit wonky in Firefox, but whatever), but in Internet Explorer, I've got some problems. When the content under a tabber tab gets a little long, it overlaps the other gadgets on my sidebar. Actually, it looks like the rest of the gadgets/content are properly pushed down, but the image directly below the tabber just gets run over. There's nothing special about that image--it's just a simple image tag.
I tried setting the table height to 100%, but no dice. I'm kind of learning as I go, so I'd be very grateful for any troubleshooting tips. Thank you.
I am developing a website that will have a carousel on a page using iScroll 4. I noticed a strange problem on Android 2.2 and 2.3 devices. I did not notice it on Android 2.1 or Android 3 or any non-Android device. This problem happens whether I use iScroll 3 or iScroll 4.
When I press the back or forward buttons, the carousel does not properly update. The images don't scroll, or they only scroll partway. If I press the forward button enough times, it may disappear as if I have reached the end of the list (as a result of my style on the "disabled" class), and likewise with the back button.
If I scroll the page up or down, then the carousel will update and work fine for a while. Does anyone know why this is happening or what to do about it?
You can see an example at http://jsfiddle.net/R4NWE/. If you want to access the example directly using a mobile browser, you can do so at http://fiddle.jshell.net/R4NWE/show/.
I figured out a solution. I put this in the "scroll" option that I am passing to CarouFredSel:
onAfter: function() {
var transform = $("#scroller").css("-webkit-transform");
$carousel.closest("#scroller").css("-webkit-transform", transform);
}