- App Creation Studio
-
Idéer
+1
Færdig
Controlling your UIWebView Experience
By default, when using a web object all content that is pulled or placed into the UIWebView using the html, url or file attributes can be pinch/zoomed as well as scrolled. The same behavior you will experience on a majority of website when viewing within Safari.
If you are pulling your content in via a feed or local resource, you may want to limit this ability and build within your app the controls to increase font-size, line-height or colors. It also gives a more polished experience for your HTML content if the user can't over-extend the layout or structure you have taken time to design for your HTML content.
To prevent a user from pinch/zooming place the following meta tag within your head of the HTML document or texttemplate.
If you have fitted web content and have no need to have your web object to scroll or even animate the 'rubberband' effect when swiping vertically you can use the following javascript:
Then place the following within your tag:
These are a couple tricks to create a more controlled UIWebView experience. For more info on meta tags used within the UIWebView please see Apple's documentation on HTML references
If you are pulling your content in via a feed or local resource, you may want to limit this ability and build within your app the controls to increase font-size, line-height or colors. It also gives a more polished experience for your HTML content if the user can't over-extend the layout or structure you have taken time to design for your HTML content.
To prevent a user from pinch/zooming place the following meta tag within your head of the HTML document or texttemplate.
<meta content="width=100%, minimum-scale=1, maximum-scale=1, initial-scale=1" name="viewport">
If you have fitted web content and have no need to have your web object to scroll or even animate the 'rubberband' effect when swiping vertically you can use the following javascript:
<script type="text/javascript">
function blockMove() {
event.preventDefault() ;
}
</script>
Then place the following within your tag:
<body ontouchmove="blockMove()">
These are a couple tricks to create a more controlled UIWebView experience. For more info on meta tags used within the UIWebView please see Apple's documentation on HTML references
Kundesupport af UserEcho
Or am I making this to hard? The goal is to allow a person to do some simple browsing in the web tag and enable them to use the browser navigation bar. I would most likely start them on google.com and allow them to search and navigate from there.
We have a simple way to create forward and back event on a web tag. You can add it pretty easy, see the example below:
<wire>
<main>
<panel name="loader" alias="LOAD" width="100" height="100" background="#ff0000" valign="center" align="center" onclickup="show-web" alpha="1">
<text name="label" width="100%" height="100%" color="#ffffff" font="Helvetica" size="20" alignment="center" text="Load Web"></text>
</panel>
<panel name="Browser" alias="BROWSER" width="100%" height="100%" xpos="100%" alpha="0">
<panel name="toolbar" width="100%" height="8%" background="#0c181a">
<panel name="highlight" width="100%" height="1" valign="bottom" background="#b0aba4" alpha=".5"></panel>
<panel name="back" width="50" height="34" valign="center" cornerradius="3" background="ffffff" onclickup="close-web" xpos="10">
<text name="backtext" width="100%" height="100%" color="#000000" font="HelveticaNeue-Bold" size="12" alignment="center" text="Back"></text>
</panel>
<panel name="back" width="55" height="34" valign="center" cornerradius="3" background="ffffff" onclickup="back" xpos="75">
<text name="backtext" width="100%" height="100%" color="#000000" font="HelveticaNeue-Bold" size="12" alignment="center" text="Return"></text>
</panel>
<panel name="forward" width="55" height="34" valign="center" cornerradius="3" background="ffffff" onclickup="forward" xpos="145">
<text name="forwardtext" width="100%" height="100%" color="#000000" font="HelveticaNeue-Bold" size="12" alignment="center" text="Forward"></text>
</panel>
</panel>
<web name="web" alias="WEB" width="100%" height="92%" url="about:blank" pagetofit="yes" valign="bottom"></web>
</panel>
</main>
<actions>
<action name="show-web">
<sync loop="no" startdelay="0">
<load url="http://rarewire.com" target="WEB" />
<alpha value="1" target="BROWSER" />
<translate xpos="0%" time=".5" target="BROWSER" />
</sync>
</action>
<action name="close-web">
<sync loop="no" startdelay="0">
<translate xpos="100%" time=".5" target="BROWSER" />
<alpha value="0" target="BROWSER" />
<load url="about:blank" target="WEB" />
</sync>
</action>
<action name="back">
<if lhs="[object:WEB.cangoback]" operator="e" rhs="yes">
<event type="back" target="WEB"/>
</if>
</action>
<action name="forward">
<event type="forward" target="WEB"/>
</action>
</actions>
</wire>