movable items

Freeway
1

see this from an earlier post

http://www.deltadesign.co/odds/draggable.html

is there a way to make this work on an iOS device also?

Or at all possible?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Well first, you could wait until later this month or early next, when
iOS 5 comes out. MobileSafari in iOS5 will support position:fixed
natively. But if you can’t wait, there is a checkbox in the Action to
make it support MobileSafari – the only downside to this is that the
result is kind of herky-jerky, similar to what you would see in IE <
9. While you are scrolling, the sticker element hops along,
repositioning itself every moment or so, rather than the perfect
illusion of position:fixed.

Walter

On Sep 1, 2011, at 9:40 PM, Justin Easthall wrote:

see this from an earlier post

http://www.deltadesign.co/odds/draggable.html

is there a way to make this work on an iOS device also?

Or at all possible?

Thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thats great news Waltd I can wait until next month!

Cheers!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I think there is some confusion here

My example page has nothing to do with fixed positioning

It is about draggable content!

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Right draggable content is there a way to do this on an iOS device?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Try this. Draw an HTML box on the page, make it fairly large so it’s a
good finger target. Make note of the name Freeway assigned it in the
Title field.

Apply Protaculous to the page, choose scriptaculous-packed from the
library picker. Click the top Function Body button and add the
following (editing to replace the made-up ID below with the actual one
Freeway assigned):

new Draggable('item42');

Preview, and you should be able to drag the resulting box around the
screen. Try it on the iDevice and see if it works there.

Walter

On Sep 2, 2011, at 11:25 AM, Justin Easthall wrote:

Right draggable content is there a way to do this on an iOS device?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Yep thats what I did here - no go on iOS device

cheers

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I’d love to be able having draggable items which also work on iOS, but the above-mentioned method only works on desktop browsers…
I am using FW 7 Pro

regards
Tom

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

This link shows what I would like to achieve:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

This is the place to start - Getting Started with GSAP - Learning Center - GreenSock

But without knowing specifically what you are trying to achieve thats about all I can offer apart from telling you that usage in FW is much the same as any extra JS.

ie - Link to the main JS file (usually in the Head of your Doc)

Instantiate the function and set the parameters (usually before end Body)

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Thx for your reply!

What I was trying to do is what Walter described in his last post:

"Try this. Draw an HTML box on the page, make it fairly large so it’s a good finger target. Make note of the name Freeway assigned it in the Title field.

Apply Protaculous to the page, choose scriptaculous-packed from the library picker. Click the top Function Body button and add the following (editing to replace the made-up ID below with the actual one Freeway assigned):

new Draggable(‘item42’);

Preview, and you should be able to drag the resulting box around the screen. Try it on the iDevice and see if it works there."

This works on my Mac in the browser (except for an html text layer??) but not on an iPad. Also nice if it would be possible to exclude a certain screen width from dragging around objects (like an iPhones’).

My link to an example-page:
www.reclamers.nl/nieuw3

One warning: I’m not a code expert (hence Freeway :-)) so I’m sorry but need to know what to paste where… (like what Walter did).

Thx for your (or anyone’s) advice!

Tom

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Nice. What is it good for?

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

To add to the playfulness of the design, and thus (hopefully) giving the visitor a longer lasting impression of the site and my work

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Whoa, that’s a really old one if it’s still using Protaculous and not Protaculous2. And even if it was, it would still not have any direct support for iOS. Scriptaculous (the open-source effects library) went into a sort of maintenance mode a couple of years ago, and definitely didn’t get any/many updates besides browser compatibility fixes for IE9 before that. It was never updated to include touch-centric features, so anything that builds on it will not be able to get those effects “for free”. My Action(s) are still supported, but they can only do what Scriptaculous gives them.

You may want to look around for a JS library or CSS recipe that builds on the modern (native in the browser) draggable property. Try one or more of the following:

In Freeway, click once on your element so the corner handles are showing, and then choose Item / Extended. In the

tab, click new, and add the following name/value pair:

draggable    true

Publish that and try dragging it around the screen with a finger. If it doesn’t work, then add the following to the Item / Extended, in the

tab:

-webkit-user-drag    element

Publish that and try again. If it still doesn’t work, then remove the first one (I have no idea if these work together).

Finally, when you get things working to your liking, you can abstract this out to a style that includes a move cursor (you’ll still have to add the draggable attribute manually) and you can apply the style to each box that you wish to drag around.

But on iOS, it’s really not all that handy to drag things around, unless you’re on a larger screen like an iPad. On the phone, you really want to avoid any sort of interaction that relies on precise touch events, because they really aren’t that precise.

Walter

On Apr 20, 2015, at 9:48 AM, Tom Lamers email@hidden wrote:

Thx for your reply!

What I was trying to do is what Walter described in his last post:

"Try this. Draw an HTML box on the page, make it fairly large so it’s a good finger target. Make note of the name Freeway assigned it in the Title field.

Apply Protaculous to the page, choose scriptaculous-packed from the library picker. Click the top Function Body button and add the following (editing to replace the made-up ID below with the actual one Freeway assigned):

new Draggable(‘item42’);

Preview, and you should be able to drag the resulting box around the screen. Try it on the iDevice and see if it works there."

This works on my Mac in the browser (except for an html text layer??) but not on an iPad. Also nice if it would be possible to exclude a certain screen width from dragging around objects (like an iPhones’).

My link to an example-page:
www.reclamers.nl/nieuw3

One warning: I’m not a code expert (hence Freeway :-)) so I’m sorry but need to know what to paste where… (like what Walter did).

Thx for your (or anyone’s) advice!

Tom

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Okay, will try your suggestion tonight, appreciate it!

Maybe off topic: I haven’t been using Freeway (or building websites for that matter) for a couple of years. Almost feels like starting all over again, but regarding Freeway: I think it’s very hard to find comprehensive information to building websites with freeway and its new techniques without stumbling over old infos and outdated actions and solutions. Even Softprss’s own ‘Using_Freeway_2014-01.pdf’ should be read in symphony with its ‘Extended_Reference_For_FW7.pdf’. And then find that a lot of practical information has to be found elsewhere: Walter Davis, Thomas Kimich, Paul Dunning, Tim Plumb (?)…
It is almost driving me mad already, searching for bits and pieces and trying to determine what is useful information and what not…

But in spite of all this, I’m thankful for all the help I (can) get! And I try to keep on smiling :slight_smile:

Tom

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

I tried this briefly, and found it didn’t work with both, but I didn’t investigate further. Traveling today, so I won’t have another chance for a while.

Walter

On Apr 20, 2015, at 12:21 PM, Tom Lamers email@hidden wrote:

Okay, will try your suggestion tonight, appreciate it!

Maybe off topic: I haven’t been using Freeway (or building websites for that matter) for a couple of years. Almost feels like starting all over again, but regarding Freeway: I think it’s very hard to find comprehensive information to building websites with freeway and its new techniques without stumbling over old infos and outdated actions and solutions. Even Softprss’s own ‘Using_Freeway_2014-01.pdf’ should be read in symphony with its ‘Extended_Reference_For_FW7.pdf’. And then find that a lot of practical information has to be found elsewhere: Walter Davis, Thomas Kimich, Paul Dunning, Tim Plumb (?)…
It is almost driving me mad already, searching for bits and pieces and trying to determine what is useful information and what not…

But in spite of all this, I’m thankful for all the help I (can) get! And I try to keep on smiling :slight_smile:

Tom

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

To add to the playfulness of the design, and thus (hopefully) giving the visitor a longer lasting impression of the site and my work

Is that a good reason to go to such trouble for an effect that will only be effective for certain users?

Now if you had a particular use case I could see the benefit.

I would think that you could achieve something as memorable using animate.css or similar.

Alternatively here is an article I found that might point you in the right direction. Not sure that it is iOS compatible though but as has been discussed is iOS the right place for that sort of effect?

http://www.webdesign.org/how-to-create-an-html5-drag-and-drop-component.22289.html

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

Thx David but maybe it is best for me to stop here. You don’t always know upfront if some refinement could be as easy as the first step, but in this case it’s obviously not.

Btw, the link you provided doesn’t seem to result in effective code, not even in safari 8.0.5…

Thx for all the help and insights

Tom

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Hi Tom,
Here’s a quick example of how you can do this using jQuery and jQueryUI;
http://www.freewayactions.com/test/dragging/
Here’s the Freeway 7 file;
http://www.freewayactions.com/test/dragging/dragging.zip

Have a play with the CSS styles as I’ve set the image opacity and cursor states when the images are dragged and you may want to do something entirely different.
Regards,
Tim.

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

the link you provided doesn’t seem to result in effective code, not even in safari 8.0.5…

Works for me even in Safari 5.1.10

http://deltadesign.co/FW7Test/draggable.html

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options