Unable to drag the hierarchy tree in iOS Browser - thejit - iphone

Unable to drag the spacetree in safari browser on IPhone simulator.
I tried below examples on my safari browser in IPhone Simulator.
http://thejit.org/static/v20/Jit/Examples/Spacetree/example1.html
http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html
http://thejit.org/static/v20/Jit/Examples/Spacetree/example3.html
Please help to perform drag on the hierarchy tree inside the safari browser on IPhone simulator.
I am using phonegap for my application to implement in IPhone but this hierarchy tree drag functionality itself not working in IPhone simulator browser since I can't run as mobile app.
Please help via code wise what I needs to change to run this code in Iphone!

There is no drag functionality, actually, it is just a click functionality. After some tests on the iPhone Safari browser I can report to you that it is working very well - spacing and animations are rendered perfectly.

Related

How to dismiss navigation bars on iphone iOS8 Mobile Safari when using tap drag and swipe gesture over the entire webpage

I work on a fullscreen iphone web application using gestures like tap, drag and swipes over the entire webpage. Minimal-ui was the best solution found for this kind of project.
According to Apple Specifications:
The minimal-ui viewport property is no longer supported in iOS 8.
What is the new way to simulate the old minimal-ui behavior?
Here is some information on telling iOS that a webpage is webapp-compatible so users can save it to their home screens and use it as if it were a separate app, with absolutely no safari controls visible.
From the apple developer docs:
A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.
...
On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen.
...
Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed.
This would enable you to completely hide the safari navigation AND link to other built-in functionality such as placing a phone call or composing an SMS.

Image rendering on HTML5 canvas on iPhone 5 running iOS 7

canvasOn a web page in a mobile web application I am developing, I have a fileinput control that is used to take a picture with a mobile device camera. The image from the camera is then drawn onto an HTML5 canvas object on the same page.
The issue I am having is that if the web application is run on an iPhone 5 running iOS 7 (in the Safari web browser), the image appears extremely distorted. Specifically, the image appears to be vertically squished when drawn on the canvas. If the same web application is run on an Android device, no distortion is seen.
In previous versions of iOS and on iOS devices prior to iPhone 5, some vertical squishing was seen (although not as bad as this), and a jquery plugin named megapixel-image.js could be used to correct the vertical squishing. This tool unfortunately is not compatible with iOS 7.
Is this related to image subsampling in Safari or something else? What can be done to correct this? I obviously cannot have my users see this distorted image. Any mobile web app developer who wants to use the camera and HTML5 canvas is going to run into this, so a solution is mandatory.
megapixel-image.js does handle this correctly. I found I was passing some parameters to the plugin incorrectly, causing it not to work. My thanks to Ray Nicholus for his assistance with this issue.

How to make the web page fit into UIWebView for testing using Selenium iPhone driver

I am testing a web app by running selenium test scripts on an iPad simulator using Selenium iPhone driver. The app opens in UIWebView inside the simulator. However the top part of the app (title , toolbar etc.) gets hidden from view. I am able to see the top part when I drag down and hold the bottom part of the app.
1) How can I make UIWebView make the app visible fully? I guess it is because of the difference in iPad simulator version used in the iPhone driver source code and one that I am using to launch the app(iOS 6.0). However I have no idea how to proceed with this as but I'm not familiar enough with iOS development.
2) Is testing in UIWebview same as testing the app in mobile Safari? Is there any way I can test the app in mobile Safari in an iPad using Selenium?
as I understand, you want to test the website, not the iphone app.
Then you could just as easily open it in mobile safari and use bookmark to view full screen (if you wanted the app to go fullscreen, you would need to do it programmatically)
I updated the Ipad storyboard file located at src\resource. The webView setting Y coordinate was set to -84 and I changed it to 0. This might help

How to make top of page visible in iphone simulator when running selenium tests

When I run Selenium tests (using the Selenium iWebDriver xcode project) against a web app (built on jQuery Mobile) on the iPhone simulator, the top of the page is always cut off (1st image). When I load the app normally in Safari (2nd image), everything looks fine. Is there a way to make the Selenium case always show the top of the page. I've tried window.scrollTo(0,1), but that didn't make a difference. In fact, when I drag to scroll up, I see the top of the page, but as soon as I release the top of the page bounces back to its former hidden position (1st image).
Loaded in simulator using Selenium iWebDriver:
Loaded normally in Safari:
Figured it out.
The UIWebView in the Selenium iWebDriver xcode project is sized specifically for the Simulator when the Simulator's device setting is 'iPhone retina 4-inch'.
So I created a new project based off the original Selenium 'iphone' xcode project and modified the UIWebView's dimensions to fit the Simulator when the Simulator's device setting is 'iPhone' or 'iPhone retina 3.5-inch'.
It's too bad that I need a separate project for each type of display. Maybe there's a better way (programmatic) to fix this, but I'm not familiar enough with iOS development to know what that might be.

vertical scroll bar get disable and bounce back in iphone simulator using phone-gap

I am developing phonegap app in iphone,after successfully viewing pdf file
(from server) on new HTML page,the vertical scrollbar get disable ,even i get back to the
list page ,the list does not get scroll,this happen only if i run the app directly in
simulator (not from xcode),any one know ,how to resolve this issue.
thanks in advance.
regards,
mayur
To display pdf in phonegap, have lots of trouble, but best solution so far,is to used ChildBrowser Plugin for phonegap here is the link-
https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser
this will help you to call child native uiwebview in your application(only for iphone), so you can easily enjoy pinch zoom feature, even the app scrollbar does not get disable,
it works fine!