I've just started making an iPad app using Phonegap.
On one of my pages I access the camera, take a picture, display that picture on the page and then have a number of customisable options (resizing, positioning of other elements that can be dragged on top of the image etc)
Once you click on a different link (tab bar item) however, all of this information is lost and you have to start over once you go back to the photo page. Is there a way to capture the web page in it's current state, or even grab each elements information (position on page, last photo taken etc) individually so that when the user goes back to the next screen, everything loads as it were when the user left the screen.
Hope this makes sense and someone can help! Thanks in advance!
I'm just a beginner Phonegap developer myself, but I believe you probably want to look into localStorage. http://docs.phonegap.com/en/1.2.0/phonegap_storage_storage.md.html#localStorage
You'll need to use JavaScript (and perhaps a library like jQuery) to get various data about the page's current state. Once you know them, you should be able to to store them for retrieval in subsequent sessions later via localStorage.
I hope this helps.
Related
So I am making a web map app with leaflet/rails and since I am the only developer I am going to just do a responsive design instead of making an entirely new mobile app. I am having trouble figuring out what the most friendly ui is for desktop and mobile.
Right now I am doing something similar to foursquare as shown here, https://foursquare.com/explore?mode=url&near=Minneapolis&q=tacos.
So when you hover it pops up, then when you click the marker it stays open. Foursquare has an entirely separate mobile app though and it's clear from their site that you aren't supposed to use it for mobile. I want to know though if this configuration is mobile friendly, so if a user clicks the marker it will simply just stay open and the hover effect will not do anything.
Is this a good way to go about it or is there an accepted way to do mobile marker events?
I am new to web maps, especially making them responsive/mobile friendly so any ideas are welcome.
Thought I'd share what I've found so far. When on mobile hover basically goes away and click is replaced with tap. Hover still sometimes come in when the user does an abnormal slight click.
I have a list of menu items and content in a single page. In PC browser or ipad, I want to see both parts in the same page. But in the smaller devices such as iphone and android phone, I want to separate the two so that you selects one of menu items in a page and see its content when he clicks it.
Jquery mobile demo page already does it. But I can't figure out how I can achieve it. Can someone explain or point to any good reference? Thanks
You may take a look at the following blog post which illustrates how you could organize your views so that based on the client type you could provide different contents.
I'm writing a web app for the iPad using HTML5 and SenchaTouch. The app uses cache manifest to function offline. Once it has been added in the home screen and opened without Safari, it will refresh itself every time it is opened, even if just navigating to the home screen and back. The desired behavior is to leave the app, do something else, and then come back to the app with everything untouched.
An example of a similar app that displays the same (undesired) behavior can be found here: http://ignitedmediadesign.com/WebApp/index.html
I've read that using a cache manifest should have solved this problem on iPhone ( http://www.stevesouders.com/blog/2011/06/28/lack-of-caching-for-iphone-home-screen-apps/ ), but doesn't seem to have done the trick for either iPhone or iPad.
Is there another way to fix this? Is there some secret to cache manifest files that stops this that I may have missed?
I'm under the impression this is simply the nature of the "home screen" web apps that operate outside of normal Safari. I have an app that operates just fine in Safari with some minimal state saving, but the blasted non-Safari version refreshes every time. EDIT: Even the showcased O’Reilly example that uses a cache manifest reloads every time when added to the home screen.
You may want to look into creating "routes" (URL fragments) that point to a controller/action pair. Look into the MVC PhoneGap example (If not using PhoneGap, you can scroll past all of that stuff and implement your own data model and store). Also see this Sencha Touch MVC tutorial.
Also, most of the rendered sencha touch components seem to maintain state between changes of the active item. For example. I have a main TabPanel that contains all sub panels. When switching between tabs on the main TabPanel's TabBar, each sub panel maintains its rendering, unless I've set a listener or controller action to do otherwise.
Hope this helps.
How does Chrome browser capture a thumbnail image of most visited URLs and show me over a blank page under Most visited??
I am interested in knowing how I would implement it using for my website or an extension.. to take take screenshot.
Lalith
I can only tell you how would I implement it. Once you would go to a site, I will add 1 to a counter if how many times you've entered it. If it's in the top 10, I would also take a screen shot of the site (chrome has a window in the class "Chrome_RenderWidgetHostHWND" which is the window that only contains the site, not the buttons and menus around it).
I can only guess it's not too far from what the guys in Google did.
If you want to write an extension that captures a screenshot of a current site then there is chrome.tabs.captureVisibleTab() method.
I think that it takes a screenshot from the last time you visited the page and saves it in the "Top Sites" SQLite database file that can be found in your profile folder.
I am working with images and changing their sizes dynamically from the input I get from the user.
when I change the size of the image first time it doesnot reflect the changes when I click the refresh the page using the browser button the change gets reflected and after that tere is no need to click the refresh button
Please tell how shall I do it so that there is no need to click the refresh button of the browser ,the changes but get reflected at one shot.
Thanks
Ritz
Your browser is cacheing the image. One easy way to get around this is to append something to the image URL such as "?v=101", "?v=102", etc. where the number is a version # you track on each image.
E.g.:
http://mysite.com/image.jpg?v=101
http://mysite.com/image.jpg?v=102
http://mysite.com/image.jpg?v=103
...
Or:
http://mysite.com/imagegen.php?name=foo&v=101
http://mysite.com/imagegen.php?name=foo&v=102
http://mysite.com/imagegen.php?name=foo&v=103
...
You don't have to look at the version number in your code, but its presence on the URL makes the browser think it's a different resource and therefore load it again without having to refresh.