Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Oct 13, 2012, 08:40 PM   #1
ArtOfWarfare
macrumors 603
 
ArtOfWarfare's Avatar
 
Join Date: Nov 2007
Send a message via Skype™ to ArtOfWarfare
Handling Zoom Questions:

Hi, I'm designing a website that should work in the following browsers:

- Mobile Safari
- Desktop Safari
- Android Browser (?)
- Mobile Chrome
- Desktop Chrome

They're all Webkit based so that should hopefully make this easy.

1 - I want to detect how far in/out the user is currently zoomed.
2 - I want some items to remain the same size regardless of zoom level (IE: think of the pushpins in iOS maps. When you zoom around them, the map around them changes scale, but the pins don't.)
3 - I want to invoke zooming when some items are tapped on.
4 - I want to detect when zooms are occurring (no matter the cause.)

The mobile browsers are top importance. It's okay if Desktop Safari / Desktop Chrome don't end up being supported, given zoom is much less common on those browsers.

Also, this website will be used internally only. We couldn't care less if FF/IE/Opera were supported or not.
__________________
Don't tell me Macs don't last: 2007 iMac, 2007 Mac Mini, 2008 MacBook Air, all Vintage.
(iMac obsoletion: April 28, 2015, MBA: October 14, 2015, Mac Mini: March 9, 2016)
ArtOfWarfare is offline   0 Reply With Quote
Old Oct 30, 2012, 05:31 PM   #2
Lambros
macrumors regular
 
Join Date: Feb 2010
Location: Sydney, Australia
Quote:
Originally Posted by ArtOfWarfare View Post
Hi, I'm designing a website that should work in the following browsers:

- Mobile Safari
- Desktop Safari
- Android Browser (?)
- Mobile Chrome
- Desktop Chrome

They're all Webkit based so that should hopefully make this easy.

1 - I want to detect how far in/out the user is currently zoomed.
2 - I want some items to remain the same size regardless of zoom level (IE: think of the pushpins in iOS maps. When you zoom around them, the map around them changes scale, but the pins don't.)
3 - I want to invoke zooming when some items are tapped on.
4 - I want to detect when zooms are occurring (no matter the cause.)

The mobile browsers are top importance. It's okay if Desktop Safari / Desktop Chrome don't end up being supported, given zoom is much less common on those browsers.

Also, this website will be used internally only. We couldn't care less if FF/IE/Opera were supported or not.
We need more information on what the website does. But from my knowledge, it'd be largely JavaScript/jQuery which detects all this.

Take a look here. That covers some of the basic mobile movements, and you can choose how your website will respond.

You will also need to ensure the website has a fluid/responsive width (so, instead of creating a website with a 960px width, it'd be 100% of the screen size). In other words, you're working in percentages, not pixels/em.

However, we do need more information.
Lambros is offline   0 Reply With Quote
Old Oct 31, 2012, 12:03 AM   #3
ArtOfWarfare
Thread Starter
macrumors 603
 
ArtOfWarfare's Avatar
 
Join Date: Nov 2007
Send a message via Skype™ to ArtOfWarfare
Quote:
Originally Posted by Lambros View Post
We need more information on what the website does. But from my knowledge, it'd be largely JavaScript/jQuery which detects all this.

Take a look here. That covers some of the basic mobile movements, and you can choose how your website will respond.

You will also need to ensure the website has a fluid/responsive width (so, instead of creating a website with a 960px width, it'd be 100% of the screen size). In other words, you're working in percentages, not pixels/em.

However, we do need more information.
I'm looking to make a web based animated blueprint that works something like the Maps application, where there's a large amount of data to show on a screen that may only be 3" across. Thus the need for pinch and zoom. When certain elements of the blueprint are tapped, popup bubbles should appear, similar to the pins you can drop on maps. When you zoom with a visible pin in maps, the pin remains the same size but maintains its position so it's still pointing at the right item... I'd like my web app blueprint to do the same thing.

The website is here:

https://dl.dropbox.com/u/60354330/site/index.html

The bubbles were working the other day... I must have broken them at some point... I don't know when... oh well, that's not terribly important for the question.

Your link doesn't seem to have anything about zooming/scaling/pinching... which part of it do you think I should look at?

Thanks
__________________
Don't tell me Macs don't last: 2007 iMac, 2007 Mac Mini, 2008 MacBook Air, all Vintage.
(iMac obsoletion: April 28, 2015, MBA: October 14, 2015, Mac Mini: March 9, 2016)
ArtOfWarfare is offline   0 Reply With Quote
Old Oct 31, 2012, 08:30 AM   #4
960design
macrumors 6502a
 
Join Date: Apr 2012
Location: Destin, FL
While reading through the post impress.js came to mind. ( Will not work for mobile as it is, but you could use the base idea to create something mobile ). I've never used it for a 'live' site, but use it constantly for presentations, tech demos, training classes, ect.

Example here ( sadly, I cannot claim credit for this fantastic work ):
http://bartaz.github.com/impress.js/#/bored

just impressed!
__________________
TI-99/4A, tape cassette, 12" B&W Zenith
960design is offline   0 Reply With Quote
Old Nov 1, 2012, 06:30 PM   #5
Lambros
macrumors regular
 
Join Date: Feb 2010
Location: Sydney, Australia
Quote:
Originally Posted by ArtOfWarfare View Post
I'm looking to make a web based animated blueprint that works something like the Maps application, where there's a large amount of data to show on a screen that may only be 3" across. Thus the need for pinch and zoom. When certain elements of the blueprint are tapped, popup bubbles should appear, similar to the pins you can drop on maps. When you zoom with a visible pin in maps, the pin remains the same size but maintains its position so it's still pointing at the right item... I'd like my web app blueprint to do the same thing.

The website is here:

https://dl.dropbox.com/u/60354330/site/index.html

The bubbles were working the other day... I must have broken them at some point... I don't know when... oh well, that's not terribly important for the question.

Your link doesn't seem to have anything about zooming/scaling/pinching... which part of it do you think I should look at?

Thanks
So to my understanding, you have a blueprint containing certain elements which, upon zooming, do not scale. However, when zooming, some elements will change size. The best thing to do here is essentially import your blueprint to the design. This will have a fixed (static) width (defined in pixels/em). However, upon zoom, I understand some icons should remain the same size. For this, you will need to apply fluid elements to those parts of the website. Fluid elements allow certain parts of the website to remain the same size upon zoom. These typically use percentages instead of pixels/em.

If you'd like me to elaborate more, let me know. But I would look into using a combination of static and fluid css. No jQuery or JavaScript seems necessary, unless you want to limit this website to mobile users.
Lambros is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Which to do for handling photos bking1000 Buying Tips and Advice 3 Apr 13, 2014 09:17 AM
iPhone: Tweak/app to add zoom buttons or one-handed zoom to maps? Bugeyeblue Jailbreaks and iOS Hacks 3 Jan 30, 2014 04:21 PM
Firefox add-on enables pinch zoom / double tap zoom like Safari Risco Mac Applications and Mac App Store 3 May 31, 2013 05:04 AM
Final Cut Express 4 Canon Vixia HFS10 and Zoom Q3HD H.264 questions groovehound Digital Video 5 Dec 8, 2012 01:14 AM
Need help handling photos tawcat Mac Basics and Help 28 Jul 9, 2012 11:42 AM

Forum Jump

All times are GMT -5. The time now is 10:25 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC