Skip navigation
owenpga
owenpga
Currently Being Moderated

how to get spry menu drop-down menu to work with touch screens

May 1, 2012 4:57 AM

How do you get the drop-down menu's to work when you are using touchscreens such as the iphones, ipads etc?

I'm aware that there is code to allow this to work as many sites that have drop-down menu's work fine with my iphone.

I have a quick work around for this but it looks like #&$*%( on my site.

www.owendawsonpga.com

 

Thanks,

Owen

1336 Views   13 Replies   Latest reply: Jim Carpenter, May 3, 2012 8:05 AM
 
Replies
  • John Waller
    Currently Being Moderated
    1. John Waller,
    May 1, 2012 5:15 AM   in reply to owenpga
    Report

    You're using Spry 1.6.1.

     

    Upgrade to Spry 2 which, amongst other things, is designed for use with touchscreens.

    http://forums.adobe.com/thread/899596

    http://labs.adobe.com/technologies/spry/ui/

     
    |
    Mark as:
  • Jim Carpenter
    509 posts
    Apr 6, 2006
    Currently Being Moderated
    2. Jim Carpenter,
    May 1, 2012 5:42 AM   in reply to John Waller
    Report

    Spry 2 is able to give you the results, but if you have the first item not linked, I have found that my spry 1.6 works with ipods, RIM and Android. The problem that I encountered was the first item if it was linked to a document, it just went there and would not give you the drop down. Once I pulled that (placed the same thing as #1 in the drop down) it worked.

     

    Jim

     
    |
    Mark as:
  • owenpga
    Currently Being Moderated
    3. owenpga,
    May 1, 2012 7:50 PM   in reply to John Waller
    Report

    will this work with cs4?

     
    |
    Mark as:
  • owenpga
    Currently Being Moderated
    4. owenpga,
    May 1, 2012 7:53 PM   in reply to Jim Carpenter
    Report

    Jim,

    Sorry  but i'm not following you.

    Are you saying that  i shouldn't have " instruction"  linked to another page as it is now.

    when i try to unlink it it tells me it needs to be linked.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,731 posts
    Oct 15, 2010
    Currently Being Moderated
    5. Sudarshan Thiagarajan,
    May 1, 2012 8:37 PM   in reply to owenpga
    Report

    What it means is that you should download the Spry 2.0 (codenamed Spry UI) from http://labs.adobe.com/technologies/spry/ui/ for your Spry Menu to work on touch-screens. You're currently using 1.6.1 and it's a known issue that 1.6.1 doesn't work well with Touch enabled devices.

     
    |
    Mark as:
  • owenpga
    Currently Being Moderated
    6. owenpga,
    May 2, 2012 3:45 AM   in reply to Sudarshan Thiagarajan
    Report

    Will this work in cs4?

     
    |
    Mark as:
  • owenpga
    Currently Being Moderated
    7. owenpga,
    May 2, 2012 4:34 AM   in reply to John Waller
    Report

    thank you for your reply.

    so i've found the spry 2.0.

    saved the widget to my widgets.

    saved the widget to HD in folder.

    I added the folder to my website folder and clicked on the html file to see what it looks like and the menu goes to left justify all in blue with bullets. No menu bar exists.

    Did i miss a step?

     
    |
    Mark as:
  • Jim Carpenter
    509 posts
    Apr 6, 2006
    Currently Being Moderated
    8. Jim Carpenter,
    May 2, 2012 7:29 AM   in reply to owenpga
    Report

    You probably don't have all the files needed uploaded to your webserver. There are several js files, css files needed for this to work. If you are using DW to do your ftp, it should ask you to upload all dependant files, select yes and it will upload all the files needed for that page.

     

    Jim

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    9. Nancy O.,
    May 2, 2012 9:44 AM   in reply to owenpga
    Report

    I have a Spry Widget test page below.  View page source to see all the supporting JS and CSS files necessary to make widgets run.

    http://alt-web.com/DEMOS/Spry-test.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Jim Carpenter
    509 posts
    Apr 6, 2006
    Currently Being Moderated
    10. Jim Carpenter,
    May 2, 2012 12:07 PM   in reply to owenpga
    Report

    Owenpga-The bullets and left justify is how it looks in design view. If you upload it and check it on a webserver, it should render okay. Sorry about my previous reply, I didn't really "read" your problem. I couldn't see the forest because of the trees so to speak.

     

    Your example Nance is great, I hope you keep it up as I have bookmarked it.

     

    Jim

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    11. Nancy O.,
    May 2, 2012 12:18 PM   in reply to Jim Carpenter
    Report

     

    Your example Nance is great, I hope you keep it up as I have bookmarked it.

    Dont' worry, Jim.  It's permanent.  I refer to that page often for my own stuff.

     

     

    Nancy

     
    |
    Mark as:
  • owenpga
    Currently Being Moderated
    12. owenpga,
    May 3, 2012 7:41 AM   in reply to Nancy O.
    Report

    ok, so i've opened the test html page and i see the bullets and left justify and it renders when opened in browser.

    so that was probably the easy part. ...

    can i then go ahead and copy and paste the code (which part?) and paste it after my banner on my template page? i'm using cs3

     
    |
    Mark as:
  • Jim Carpenter
    509 posts
    Apr 6, 2006
    Currently Being Moderated
    13. Jim Carpenter,
    May 3, 2012 8:05 AM   in reply to owenpga
    Report

    There are two paths you can follow to add it to another page:

     

    Copy and paste the code, making sure you add all the relavent files in the head section and adjust the linking accordingly.

     

    or you could

     

    Follow the steps that you used to put it into the test html page with the page that you are going to put it into, this way, all the other items (js, css, etc) is automatically added to the page.

     

    Jim

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points