script.aculo.us draggables/droppables?

Wow, I haven't visited the online Pokemon community in a while. However, I do remember the CoD member base to be more knowledgeable with javascript than most other pokemon forums, so I have come here to request assistance.

I am currently building a website primarily focusing on iPhone games, and I need help with the splash page.

My design idea is for the page to simulate the unlock screen UI on iPhones and iPod Touches. You know, where you have to slide the arrow to unlock it? So I'm trying to simulate this with scriptaculous (http://script.aculo.us) to get a visitor to slide the gray piece to enter the main site, just like the iPhone unlocks when the gray thing is slid all the way to the right. It's definitely doable but I do not know enough about javascript to write my needed script correctly.

I have already uploaded all of the pieces of the iPhone screen when it is locked necessary, and I have the image of the bar that says "slide to unlock", as well as an image of the individual gray sliding piece. These are the two script functions one needs to use to complete this task:
http://github.com/madrobby/scriptaculous/wikis/draggable
http://github.com/madrobby/scriptaculous/wikis/droppables

If you scroll down on the second link, you will see a demo where a small square can be dragged freely on the page, and when it hovers over a larger box, the box reacts, and when released over this box, the box reacts differently.

This is essentially what I need to do; However, I need to limit the sliding gray piece to only horizontal movement (you can't drag it off the "slide to unlock" track on the iPhone), and the horizontal movement must be limited to a certain area, because obviously the gray sliding piece can't escape the "slide to unlock track" by going too far left or right either.

If I have you completely confused, this is a picture of the sliding track thingy, on my currently empty website:
http://iphonegamingnetwork.com/media/slidetoenter.png

The gray piece on the left is the "gray sliding piece" and the entire image is the sliding track I'm referring too.

Obviously I would need to make the gray piece it's own image (which I have done here) and make the sliding track an image without the gray piece, which I can do in a minute on Photoshop.

However, from here I am pretty much lost. I know the gray piece has to be it's own div or something for script.aculo.us to work or something, but can someone please help me whip up a code like the one found following the demo on the second page and help me get this to work?

All posts are appreciated :)

Thanks, tennis8668

Your links are all super-broken. Account expired?

In the meantime, I kinda wonder why you're going to so much effort just to build a widget that doesn't do anything but get in the user's way? It would be a cute nod to the platform, I guess, but (a) iPhones aren't the only mobile clients in the world and (b) the lock screen serves a useful purpose whereas this doesn't seem to.

Crap the links are broken. I forgot about a new thing Freehostia has... It should work if you copy and paste the address into the navigation bar.

I guess your probably right - I should probably forget this whole idea as it adds nothing useful. I just figured it would be an interesting UI for the splash page, and people do those all the time.

Still though, I am highly curious about this and if anyone can shed any light about how I could make this work I would be very grateful.

EDIT: Oh and while the iPhone isn't the only mobile client in the world, it is the only mobile client that this site will talk about. (Pokemon isn't the only game for the DS, but there are tons of Pokemon-only websites.)

Splash pages are dumb.

tennis8668 said:

Crap the links are broken. I forgot about a new thing Freehostia has... It should work if you copy and paste the address into the navigation bar.

Click to expand...

Hurp referer blocking, how useful :V

tennis8668 said:

I guess your probably right - I should probably forget this whole idea as it adds nothing useful. I just figured it would be an interesting UI for the splash page, and people do those all the time.

Click to expand...

You may notice that very few high-profile really-popular sites have splash pages. They don't do anything but keep people from getting to actual content. It's a cute idea, it just doesn't serve any functional purpose.

tennis8668 said:

EDIT: Oh and while the iPhone isn't the only mobile client in the world, it is the only mobile client that this site will talk about. (Pokemon isn't the only game for the DS, but there are tons of Pokemon-only websites.)

Click to expand...

Sure, but people don't tend to read websites from within other games. An iPhone-specific splash screen will look a bit silly when reading on a G-1.



ANYWAY uh without actually bringing myself to use prototype, it looks like you can do this with some cleverness and the 'snap' option for the Draggable. Just give it a function that restricts instead of snaps.

I agree with Eevee; this does get in the way quite a bit. It's kind of cool, but in the way.

I looked over the page and assumed (since you're using it) that you know how to use it.
I looked at the options you can set for it and found the following:

constraint: string, not set by default. If set to 'horizontal' or 'vertical' the drag will be constrained to take place only horizontally or vertically.

Click to expand...

There you go. I'm not sure how to get it to only move within the area, though.

edit:
all you have to put in the page is:

<img id="drag_to_unlock" src="prot://domain/path/to/file.ext" />
<script type="text/javascript">
new Draggable('drag_to_unlock', { constraint: horizontal });
</script>

Click to expand...

There's still the "it shouldn't go past x" problem, though.