Before I start, may I just say that I am no web developer. If anyone can help me with this could you please answer in a way a 4 year old child, or Forrest Gump would understand.
I'm having some trouble updating my current website so that it will work on an iPhone and iPad in the same way that it works on a computer.
Below is a link to my site...
www.hagueandhague.co.uk
As you'll be able to see from the homepage, users are able to drag around the icons on the screen, they can also resize them by dragging them from the corner. The main thing though is that by using cookies the size and position of the icons is remembered meaning users can move the icons around, click through to the pages behind the icons or even leave the site and when they return to the homepage the icons are in the same state they were when they left. I was helped a lot in this by me2loveit2 when I built the site, in fact she pretty much wrote all the code.
As much as I like our site I've not been able to get the dragging to work on an iPhone or an iPad. Like the script doesn't work for touch interactions or something. Then I came across this site...
You can see here that the draggable aspect works and works on an iPad. The trouble is that I can't work out how they've done it as it doesn't seem to use normal stuff, probably because of the additional features they've included like filters. It also doesn't remember the position of the icons after they've been moved.
If anyone can help me adapt my current site to work on iOS devices or adapt the code from http://www.colorplanpapers.com/50colours so I can use that on my site I'd be very grateful. Failing that if anyone can point me in the right direction that would be great too.
Initially the page works pretty well. Notice there are three areas of content, a red box containing info, a blue box to close the project, and the images of the project. When you scroll the page, the red and blue box stay in a fixed position while the images of the project scroll. That's what I want. My problem is that if you scroll to the bottom of the page and go to click or drag the red and blue box, they disappear.
The issue doesn't seam to occur in FireFox, but does in Safari and possibly other browsers.