So you want Parallax Scrolling on iOS iPad, iPhone and iPod

parallaxparallaxSwipe for all touch and web browsers including iOS touch screens.
This week I looked at a jQuery parallax plugin by Jonathan Nicol at f6design. So, I grapped it and then spent hours designing a page to use for an iPad project for a car manufacturer. It worked OK in my browsers and my Android touch pad but not at all on my Apple iPod.

I then Googled the problem and got a link to a forum on css-tricks that explained Apples problems. Next, I saw a link on the forum to a Nike page that said the Nike jumpman23 parallax page actually worked on his iPad. See jumpman23 (really nice effect).

Well, you guessed it: I looked at the Nike source code and saw a billion js files. So, rather then sift through them, I though: ‘Hey, my mouseSwipe plugin (bottom of page) could do it by adding top layers and looping though them setting different speeds per layer.’

My mouseSwipe plugin does not use browser scroll functions, just math to position its swipe page. I then removed the panel swipe code and other features to leave just the swiping code I wrote for the plugin. Next, I only added three lines of code using the jQuery each() and an array to hold the speed of each parallax layers. My CSS file took care of the positioning.

Here’s the Demo: I used the images and layout from f6Design but shrunk them and re-arranged the layout to explain the code better.

And here’s the code in a zip file.

Have fun!
Apple can send me a donation, as I’m still looking for work.

Posted in jQuery mouseSwipe | Tagged , , , , | 18 Comments

jQuery selectSwipe Select option Scroller

selectSwipeHere’s an ipad/android style menu option select scroller that should work on all browsers and touch pads.

(except ie6 and ie7 due to css incompatibility! e.g. position: absolute, fixed and pointer-events: none; for overlaying glass image)

It might not look to impressive at first look. However it was the first swipe code on the internet that worked on both touch and desktop browsers (In under 100 lines and not using css3 web-kit). I’m sure others will copy the routines to drop about a 1000 lines off their poorly coded crap.

I’ve included the selectSwipe.js file uncompressed at 5kb (should be under 1kb when minimized). I didn’t included the auto Horizontal css code and removed the physics code used in mouseSwipe as apposed to using jQuery animate use in this demo).

My javascript file should give all the jQuery answers to how to adjust swipe panels. I’m posting this in a hope that jQuery plug-in designers will finish this prototype off and post additional updates and other swipe controls to me.

I’ve done most of the browser compatibility code and mouse vs touch events. I do not have the time to answer questions on this code so please take some of your time to understand the under-laying code (it’s really small to begin with).

I wrote this in about a day, using some code from my mouseSwipe plug-in. So lots of inprovemnets and changes can be added or shared here.

I used extra blank panels at the front and end as padding to center the dates. However, there has got to be a better way to do this. Best to work this out in order to get a panel number and the innerHTML dates during the update() function. I’m still looking for full-time work so I have no time at present. Cheers!

Demo of selectSwipe here

Download Zip file of selectSwipe.

Posted in jQuery mouseSwipe | Tagged , , , , , , , | Leave a comment

HTML5 Canvas example

canvasHere a re-post of my fancy ball reflection code using canvas on enabled HTML5 browers.
Everything can be viewed in the page source of Demo

Click here for Demo

Posted in html5 | Tagged , , , | Leave a comment

mouseSwipe Jquery Touch Content Slider Plugin

mouseSwipe is a jQuery content slider with tablet touch or mouse drag navigation. It weights in at under 4kb in size.

Uploaded new zip with complete original source Dec. 24th 2012.
Sorry, I will not be replying to questions on this plugin as I’m too busy.

mouseSwipeWhy? Because your panel swipes should work all your devices including the desktop browser. (not just ccs3 devices).

It’s also great to add as a fixed container in jquery mobile and other mobile html pages. I used it on a Honda jquery mobile phone app I developed to display huge horizontal grid tables on a small screen (fake iframe).

features:

  • Tablet touch swipe or mouse drag swipping.
  • Horizontal or Vertical layout.
  • Continuous Scroll with end bounce.
  • Or single panel image swipe.
  • Multiple mouseSwipes on single page.
  • Auto scroll with or without rewind.

April 16 2012 update:
This is version 1.0.2 so any input is welcome (don’t complain, its free)

Leave a comment

Tested on the following browers:

  1. IE9 and IE6,7,8 using IETester.
  2. Firefox 10.0.2
  3. Safari 5.1.1
  4. Chrome 17.0
  5. Opera 11.61
  6. iPod touch and Android touch default browsers

Settings and defaults:

  • HORIZ: true or false – horizontal or vertical display. / default = true.
  • TYPE: ‘mouseSwipe’ – drag scroll or touch swipe one or more panels.
  • TYPE: ‘panelSwipe’- swipe slides one panel length at a time. / default = ‘mouseSwipe’
  • SNAPDISTANCE: number – pixel distance before panel changes. / default = 20
  • DURATION: number – time it takes for next panel to slide in. / default = 250
  • EASING: string – must include jquery.easing.1.3.js types or / default = ‘swing’
  • ARROWS: true or false – display button arrows on sides of panel / default = false
  • FADEARROWS: true or false – do not show first or last panel arrows / default = false
  • SLIDESHOWTIME: number – auto scroll time in milliseconds / default = 4000
  • AUTOSTART: number > 0 – delay before autoscroll starts on load / default = 0
  • PAUSEONHOVER: true or false – stop auto slide on mouseover hover / default = false
  • PAGENUM: string – id of div or element to display page# / default = ‘#pagenum’

The Javascript setup:

We use bind dragstart to stop some browser’s drag & drop features.
panelSwipe example:

$(document).ready(function () {

  $(document).bind("dragstart", function() { return false; });

  $('#panelSwipe').swipe({
    TYPE:'panelSwipe',
    HORIZ: true,
    SNAPDISTANCE:20,
    DURATION:750,
    EASING:'easeOutBack',
    ARROWS:true,
    FADEARROWS:false,
    SLIDESHOWTIME:4000,
    AUTOSTART:100,
    PAUSEONHOVER:false,
    PAGENUM:'#pagenum'
  });
});

mouseSwipe example:
note that TYPE:’mouseSwipe’ does not use any of the other options.

$('#mouseSwipe').swipe({
    TYPE:'mouseSwipe',
    HORIZ: true
});

The CSS Setup:

You only need to match the width and height for the Viewport, mouseSwipe and Panel.

<div id="viewport">
<div id="mouseSwipe">
<div class="panel"><img alt="" src="images/01.jpg" /></div>
<div class="panel"><img alt="" src="images/02.jpg" /></div>
<div class="panel"><img alt="" src="images/03.jpg" /></div>
<div class="panel"><img alt="" src="images/04.jpg" /></div>
<div class="panel"><img alt="" src="images/05.jpg" /></div>
</div>
</div>

Fixes to Date:

December 24 2012: 5:15pm est:
Upload new zip with complete original source.  Do as you wish with it as I have no time.

April 16 2012 : 10:30am est:
Revision: 1.0.2 Had to add e.preventDefault() on touchStart=function(e) for older versions of Android to scroll properly.

February 28 2012 : 1:00 est. new version 1.0.1
1. Removed PERCENTAGE option in favour of SNAPDISTANCE and added a lot more panel swipe options. Improved animate stop() during mousedown.

View Demo

Download mouseSwipe zip file – mouseSwipe.zip  complete source December 24th, 2012

Posted in jQuery mouseSwipe | Tagged , , , , , , | 60 Comments