peachananr / onepage-scroll Goto Github PK

Trying to figure out a way to use moveBottom to build a scroll to bottom button.

Has anyone been able to do this?

Currently I am using
$("#scroll_bottom").click(moveBottom());

With no luck

It seems to scroll about 20% of the time when I swipe on my phone.

Galaxy S4 using mobile chrome.

Hello. I wanted to use onepage-scroll in my project, but I've noticed that whenever I drag an element with native HTML5 Drag'n'drop (it's essential in this project), it disappears. You can see it even when you select some text and try to drag it (on other pages a ghost of the element is opaque, but visible). I'd be glad if you could examine this issue and suggest a solution different than dropping onepage-scroll :)
Best regards,
Mikołaj

Hi,

It seems the default of the plugin on trackpad (& mighty mouse) swipes is to scroll vertically even if you trackpad swipe horizontally. Is there a way for me to deactivate this function on the plugin so that horizontal swiping does not trigger the vertically scroll snapping?

In my layout you can see why this is a problem for me. I'm hoping to use onepage-scroll to trigger the vertical snapping of sections and horizontal will allow for free scrolling.

http://chrisriesner.com/cnyn-webzine-experiments/snap-scroll-ONEPAGESCROLL-NICESCROLL-cnyn/snap-scroll-ONEPAGESCROLL-NICE-clean.html

I appreciate any help!
thanks,
-chris

Would be great to have up/down and pageup/pagedown support as well :)

If you are on a machine such as a Mac which allows you to use two fingers to navigate backwards by swiping this site seems to break that. Every time you try to swipe to go back it just seems to scroll up and down.

hello pete + hello folks,

this is very well done! is there any wordpress using this great jquery plugin?

thanks oli

Here you can see, there are 8 pages i've defined in the DOM, but the script has added 6 extra. What gives?
http://testing.apliiq.com/designyourowngift

Scenario: afterMove fires a class change that causes another transition inside the page. This causes another afterMove to fire.

Scrollbar and header bar work correctly, but the main content does not change.
Version 12.16
Build 1860

Is it possible to use multiple instances of onepage-scroll. For example on the main page and then within a lightbox which appears above? A demo of such functionality would be really helpful.

I cant't link exp. < a href ="brouchure.pdf"target ="blank">download < /a>

Thankyou

Is it possible to create the same effect with left <-> right browsing?

It redirects to http://www.webs.com/frozen.htm?uname=thepeachdesign

I've just noticed that beforeMove is triggering not just once, but incrementally. So after first scroll its triggering once, on the second slide twice and so on. If I go back from the second slide, then it will trigger this event 3 times. I guess that this is not the expected behaviour? Any ideas how to sort it out?

I am encountering an issue where, if I have any content after the main slideshow, i'm not able to view it. Is there a way to have content after you main slideshow, similar to the iphone-5s website's footer section?

when you scroll the page , nothing happened .

Now this patch fixes problem when doesn't work.

function touchstart(event) {
  var touches = event.originalEvent.touches;
  var touchedObject = touches[0].target;
  if (touchedObject.nodeName=='A'){
      $(touchedObject).click();
      return 1;
  }
  if(!(
        typeof($._data(touchedObject, "events")) !== 'undefined' 
        && $._data(touchedObject, "events").click != null
    )){
    startX = touches[0].pageX;
    startY = touches[0].pageY;
    $this.bind('touchmove', touchmove);
  }
  event.preventDefault();
}

I am having issues with scroll and input/forms on iOS devices

www.smartstyle.io

Is anyone else having these issues? Any fixes out there?

When the testing.apliiq.com/designyourowngift loads the first time in browser, scrolling down skips the page it's suppose to go to and jumps to the 3rd page!?
What gives?

Demo on iPhone 5s and the swipe doesn't work properly.
Doesn't go page by page.
Scrolling is flickering.

Hi there,

When you add any element from forms is not working at iOS.. Even in the demo if you add input type text then you are not able to selected..

This has to do something with the touch events...

hi seem to have a problem with link in android device
it's visible on your demo if you have android device
It's impossible to click on any link except bullet navigation.

instead of using those circles, it would be nice to use something like:

<ul class="myNav>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>

Thanks in advance

Hello,
we have just add onepage-scroll to twittstrap resources list
http://www.twittstrap.com/resources/details/one-page-scroll
Under : Javascript
Regards

When setting responsiveFallback to a vaule (e.g. 600), it breaks the possibility to enter characters into input fields in a form I have in one of the sections.

Settings responsiveFallback to false makes it work again.

It would be nice to have the CSS in LESS format so people could include it in their sources and also it's easier to modify stuff..

In order to start / stop animations within slides (as Apple does), it'd be nice to have callbacks functions on events

The "loop" code is missing, no? :)

Scrolling, nor moveToSlide works with Firefox 7. It's just over a year old, so this shouldn't be an issue.

The source code does not include the license. Thus, it may be possible to "download for free" this script, but it is not possible to use it or redistribute it on one's web site.

Here I've defined 8 pages in the DOM but for some reason there are 6 extra pagination views. What gives?

http://testing.apliiq.com/designyourowngift

• peachananr said 'try to swap article for the sectionContainer in the function call'

but that didn't fix the 6 extra page views!?

I'm guessing here

var defaults = {
sectionContainer: "article", <---- here .main > article fixed it!!!!
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false,
responsiveFallback: false
};

What the title says...the scroll doesn't work on my iPhone or when I resize my browser on the desktop.

Confirmed this isn't my mistake as I also experience this issue with the author's demo page.

Fixed and moved to pull request

Hi,

i use the index to trigger some animations. But when I use the moveTo function the index is "undifined"

Am I doing anything wrong?

->

$(".main").onepage_scroll({
    sectionContainer: "section",
    asing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in", "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
    animationTime: 2000, 
    direction: 'horizontal',
    afterMove: function(index) {
            console.log(index);
            if (index == 1) {
                // do something
            }
            if (index == 2) {
                // do something
            }
            if (index == 3) {
                // do something
            }
    },
});
$("#link").click(function() {
    $(".main").moveTo(2);
});

If you have a touch device & click and do not move on an empty space, and then do a touchmove, the pages changes for the amount of times you clicked.
On Touch only.
I used some onClick function and they didn´t worked, but the pages changed for the amount of onclick.

I added this work around for using onClick methods, but if you click on a "not onClick", it stills do the pagechange bug.

This is my function change:

function touchstart(event) {
     var touches = event.originalEvent.touches;

     if(!(typeof($._data(touches[0].target, "events")) !== 'undefined' && $._data(touches[0].target, "events").click != null)){
          console.log('do move stuff');
          if (touches && touches.length) {
              startX = touches[0].pageX;
              startY = touches[0].pageY;
              $this.bind('touchmove', touchmove);
            }
            event.preventDefault();
      }
 }

Best way to catch every section with Google analytics?

If one slides down, the index updates normally, but somehow it also increases index when going back up (like going from slide 1 to 0 returns index of 2). Another issue is the index doesn't update when using the pagination (rather, the beforeMove/afterMove doesn't fire?).

The 3rd line in onepage-scroll.css file sets (for html, body elements)

overflow: hidden;

IMHO, the overflow: hidden property must be set from within javascript, other wise, the page/site will break down and the user will be restricted to the first section only.

How to remove # for id in urls change?
Thanks

moveUp and moveDown work perfectly, but moveTo is not found. What am I doing wrong?

Other than moveUp and moveDown can I move to a specific page?

This does not work with jquery cycle plugin on ipad.
The links from the cycle plugin are not clickable on ipad, it does not animate the slides.

This is an issue on ios6 and 7.

Hi!

I am using this script for a website and it is one of the few that runs great so far. The only thing is that the code for the pagination is generated in the js, and I'm not so familiar with js. I want to display text (headers) and an image (little arrow thing) instead of bullets. Is there any way to do so? I could not find an option without completely altering the js and I have no idea what I'm doing there.

read the scrolling code, it bind with scroll action for all, looking for a way make it only works in section area which rest of page can be scrolled.

Did you ever look the page without Javascript enabled? You can't scroll down. A fallback solution is highly necessary.

When it comes to have to go to the first page to the last page.
Presses the button to release the first page to the last page you want to put.
How can