Is it possible to have a menu bar (navigation bar) on a web site that is independent of iPhone’s zoom (i.e. with fixed width and height) while the rest of the site can be zoomed in and out?
With meta "viewport" I can set the zoom of the whole website, I want to exclude some parts.
It seems that it can't be done by using iFrames or CSS transforms.
Is it possible to be done by tracking Gestures that scale elements, and using javascript to rescale my menu?
iPhone's zoom is a graphical thing - it does not change the html rendering of the page (although it may look at the html element for hints about what how much to zoom).
So, not really, no.
Related
I am using classified engine theme for my WordPress website durentme.com in which I want the half size slider from default size and want to place categories up in front of slider like renttycoons.com. I tried to much in css and coding but I am failed to find any solution to my problem.
How do I reduce the size of Revolution Slider on my website and how do I get categories up in front of the slider?
slider size can be maintained from the backed just look for its menu in admin select the slide and the options should be there.
Hope it helps
I have an array and lets say I have 5 objects in it. The array just contains a string with an address to a picture. I would like to use the Page Control feature in the iPhone SDK to swipe Left and Right to change the picture. I already have the multitouch gestures in place all I need is to implement the Page Control so if I swipe left and then right it will take me back to the previous image.
Does anyone know of any good Page Control tutorials or sample code online that may be able to help me thought implementing the Page Control.
The UIPageControl isn't a control as much as it's just an indication of what "page" your on.
To do what you want, you need to set up a UIScrollView and add subviews for each image. It will require some math to figure out where each "page" starts and ends based on image dimensions and screen sizes.
Apple has some docs on using scroll views with page controls here.
Indeed, you need a UIScrollView along with the UIPageControl. You can find a good tutorial on how to make them work together here
What is the difference between width and device-width in CSS?
I know there have already been some questions around this, but I would like to understand these from a media query perspective to sniff browser/device, e.g. desktop/mobile/tablet.
The device-width and device-height features refer to the dimensions of the output device (that is, the screen size).
The width and height features, on the other hand, refer to the dimensions of the rendering surface, which is the viewport (for example, the browser window) for screen media, or the page box for print media.
http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features
Is there any pre-built sample of iphone like bottom navigation using CSS 3? is it possible to make these icons in CSS3, without images?
You may want to check out Sencha Touch, they provide a full HTML5 version of many common UI components for mobile web site development, including tab bars.
Try my itabbar www.itabbar.com
Here a full css tabbar with jquery to change button color on click
http://jsfiddle.net/onigetoc/4CgxM/ (View on Chrome or Safari)
I think this is possible to reproduce the basic icon with basic shapes in css
For the moment I havec make the most basic look hat http://frommelt.fr/exos/icon.html
Of curse I don't lets go and I will make the other :)
Actually, in ChocolateChip-UI we use SVG images as background image masks and CSS3 background gradients to exactly recreate the iPhone toolbar icons. Webkit background image masks with with background images and background colors. Since CSS3 gradients are rendered by the browser as a canvas background image, they work just fine. The svg images are just black and transparent because they were created to use as masks with background colors.
That said, yes you could reproduce the images with just HTML elements and CSS. It would require a bunch of pieces, using a mix of relative and absolute positioning and would be very, very tedious to get all the pieces positioned properly and get the background gradients to match up perfectly. And then you would have to write some really complicated CSS to handle the hover state. I could do that but would I want to? Hell no! Using the SVG image masks is just so much easier. And because the SVG is just text, it's easy to edit them at any time. Oh yeah, and SVG is vector-based so you can scale them to any size without pixelation.
I'm investigating the feasibility of using Raphael for a user-research project. One of the features allows for users to drag images onto a canvas and we record where they placed it. The pool of images is potentially quite large and we'll have them in a scrollable box in the tool.
I put together a quick wireframe of the issue I'm looking into since it'll probably be clearer than my explanation.
Please see the wireframe:
I'd stick with straight HTML/CSS and use jQueryUI draggables, as you mention in your comment.
You don't appear to need any of the drawing/display features SVG offers, yet if you went that route, you'd have to build your own custom scrolling behavior (instead of setting a CSS overflow-y rule) and picture layout algorithms (again instead of using CSS floats or something).
You can create a scrollable region using Raphael.
Create the viewport with fixed
dimensions (say 800x600)
Draw the images with increasing y value. After few images, the y value will go beyond 600. It will be drawn but will not be visible in the viewport.
Create a scrollbar using raphael rects. Attach drag events to the scrollbar handle rect.
When the handle is moved, translate all the images accordingly.
For e.g. lets assume in step 2, you had drawn all the images and the bottom most point of the end image is having y value 2000. Assuming the scrollbar has length 500, each dx movement of the handle will have to translate 2000/500 = 4dx. You can calculate the handle length similarly using ratios.
Since everything inside a single Raphael paper the dragging of images will work seamlessly. You will have to maintain the positions of each images.
You might find this demo similar
Remember you can always use getBBox when you drop. In this case it's rects but images would be the same..
http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones