SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pinch/zoom in jquery mobile

    I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jQuery Mobile Web App</title>

    <meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">

    <link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-1.5.min.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
    <!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
    To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
    <script src="/phonegap.js" type="text/javascript"></script>
    </head>
    <body>

    <div data-role="page" id="page">
    <div data-role="header">
    <h1>Page One</h1>
    </div>
    <div data-role="content" style="padding:0;">
    <img src="coffee.gif" width="320" height="480" alt="coffee">
    </div>
    <div data-role="footer">
    <h4>Page Footer</h4>
    </div>
    </div>
    </body>
    </html>


    Thanks so much in advance for any help.

  2. #2
    SitePoint Guru hifigrafix's Avatar
    Join Date
    Oct 2005
    Location
    Nashville, TN
    Posts
    628
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jQuery Mobile is great but does cause a few small road bumps. When it is rendered it adds the following:

    <meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
    You need to change the maximum-scale value so you can zoom in.

    You should be able to reset it using this:

    $(document).bind('mobileinit', function(){
    $.mobile.metaViewportContent = 'width=device-width';
    });
    Good luck!

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome. Thanks hifigrafix! Much appreciated!

  4. #4
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok just to let you all know I am not a programmer but I am familiar with DW 5.5

    I am designing my first mobile app....Well Im using jquery mobile that is bundled with DW CS5.5.

    How would I render the code so that I could zoom and out of images that appear in my app.

  5. #5
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I meant to say pinch zoom images


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •