I am developing a phonegap app for iOS. The main screen slides up when i double tap at the bottom of the screen. This only happens in the Portrait mode.
I have tried disabling the scroll.. but that hasn't worked. This is my html code :
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0 " />
<body>
<div class="mainScreenContent" align="center">
<table>
<form>
<tbody>
<tr >
<td>
<button type="submit" class="largeButton grayGradientEffect">Button 1</button>
</td>
</tr>
<tr>
<td >
<button type="submit" class="largeButton grayGradientEffect" onclick="">Button 2</button>
</td>
</tr>
</tbody>
</form>
</table>
</div>
</body>
Here are Screen Shots:
This is what the main screen looks like:
This is what it looks like after double tapping on the bottom:
Thanks everyone for your help.
If you are using jquery, intercept this event.
Solution by Johan Sundström below
https://gist.github.com/2047491
To use, add the above to your javascript. Then intercept on whichever element is appropriate.
e.g.
$("body").nodoubletapzoom();
Can you try adding the following to your meta viewport query?
user-scalable=0
Related
I have a header in my email with a logo on the right and some links on the left (all on one line). Works fine, but when viewed on a mobile device, the links on the left overflow to two lines.
I'd ideally like to have the mobile version display the logo on the top line and the links below it like the following:
DESKTOP:
Logo Link 1 Link 2 Link 3
MOBILE:
Logo
Link 1 Link 2 Link 3
How would I achieve this?
My code:
<table class="row header">
<tr>
<td class="center" align="center">
<center>
<table class="container" style="border-bottom: 1px solid;border-bottom-color:#bdc3c7">
<tr>
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td class="four sub-columns full-size">
<img class="left" style="float:left;width:180px !important;" src="#" width="180px">
</td>
<td class="eight sub-columns last full-size" style="text-align:right; vertical-align:middle;">
Link1</span> <span style="color:black;font-weight:100">Link2</span> <span style="color:black;font-weight:100">Link3</span>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
I'm not really sure what certain classes do in your html as I'm used to working with Inky, the templating language of Foundation for Email 2 but the work-around should be sort of the same.
Because of the way css works (cascading style sheets) you'll need to override the inline styles and the wrapping with a few !important lines in a media query at the top of your mail in the style tag.
For example:
#media only screen and (max-width: 480px){
td .example-class { width: 100% !important };
}
Or if you're using Inky only use the attribute large on your <columns> tag. Consequently, the small attribute will copy the value of the large attribute.
Your links'll be pushed under your logo as its container is taking up the full width.
To display your logo in the center (if you are using Foundation for Email 2):
.float-center class on the <img> element
align="center" attribute on the <img> element
Wrap the <img> with <center> tags (needed for Outlook 2007, 2010, and 2011)
Or when using Inky: A center tag around your img would be enough to do the job.
Source for aligning an img: https://foundation.zurb.com/emails/docs/alignment.html
I'm trying to build an editor for my webapp which has an editable hierarchy and I'm thinking along the lines of some organizational chart visualization (or library) that has an open API to dynamically manipulate the hierarchy. My requirements are that it has to be offline so Google Visualization is out and I've spent some time tweaking with Basic Primitives to find out that it doesn't provide method calls as simple as "get selected item". I've spent a few days searching to no avail so it's quite frustrating. Does anyone know of any simple widgets or libraries out there I could use? Thanks!
Let me know if the following snippet will get you started. Just copy and paste it in HTML file
<html>
<head>
<title>GetOrgChart</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.js"></script>
<link rel="stylesheet" type="text/css" href="//www.getorgchart.com/GetOrgChart/getorgchart-1.1/getorgchart.css" />
<style type='text/css'>
html, body {margin: 0px;padding: 0px;height: 100%;overflow: hidden;}
#people {width: 100%;height: 100%;}
</style>
</head>
<body>
<table id="peopleTable" style="display: none;">
<tr>
<th>id</th>
<th>parent id</th>
<th>Name</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>Lesley Holmes</td>
<td>CEO</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>Colin Patricia</td>
<td>Manager</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>Derek Cork</td>
<td>Manager</td>
</tr>
</table>
<div id="people"></div>
<script type='text/javascript'>
$('#people').getOrgChart({
dataSource: document.getElementById("peopleTable")
});
</script>
</body>
</html>
I am using Facebook Like Button on my page inside table cell
<table style="position:relative;">
<tr style="position:relative;">
<td>
<table cellpadding='0' style='border:solid 1px black;width:100%;'>
<tr align='left'>
<td align='left'>
<fb:like send="false" layout="standard" width="350"
style="height:22px;" show_faces="false"
action="like" colorscheme="light"
></fb:like>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">SOME TEXT</td>
</tr>
</table>
In IE 9 and Google Chrome it is appearing correctly inside the black border set to the table.
But in Safari it is appearing outside the td.
Why is this happening? I've tried to set Like Button style position to relative but same thing. Is there anything different in CSS for Safari?
This is because of other styling you have on page. You need to fix the styling that wasn't provided in your sample code.
Your code alone is working as expected in Safari (on Mac), so isolating the problem shouldn't be hard. See live example: before formatting, after formatting
I'll post an example and wanted to know what are the solutions for the
selenium IDE operate in "modal" windows without stop the script. I will
provide an online example and the script that I built: Detail does not
work ...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base"
href="http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/showModalDialog2.htm" />
<title>New Test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<td rowspan="1" colspan="3">New Test</td>
</tr>
</thead>
<tbody>
<!--//Open the application and wait to load the combobox-->
<tr>
<td>open</td>
<td>/workshop/samples/author/dhtml/refs/showModalDialog2.htm</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>name=oHeight</td>
<td></td>
</tr>
<!--//Insert height value and click "Push To Create" button-->
<tr>
<td>select</td>
<td>name=oHeight</td>
<td>label=250</td>
</tr>
<tr>
<td>click</td>
<td>css=input[type="button"]</td>
<td></td>
</tr>
<!--//Wait for the loading the modal page title and check the text -->
<tr>
<td>waitForElementPresent</td>
<td>//h1</td>
<td></td>
</tr>
<tr>
<td>verifyTextPresent</td>
<td>This is a modal dialog box. This page is not designed to do
anything except display the dialog box arguments.</td>
<td></td>
</tr>
<!--//close the screen and verify that the previous screen is loaded from the height field-->
<tr>
<td>close</td>
<td></td>
<td></td>
</tr>
<tr>
<td>selectWindow</td>
<td>null</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>name=oHeight</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Web applications don't actually have modal dialogs, with the exception of browser dialogs (e.g., "Save file as ...") and JavaScript's window.alert(), window.prompt(), and window.confirm(). Everything else is either a separate window (as in traditional web apps) or an overlay that blocks access to the elements behind it (as in modern, AJAXy, web apps).
In the case of a separate window, you need to waitForPopUp ...windowname... and then selectWindow ...windowname..., then selectWindow (without a name) to switch back.
In the case of an overlay, you can address it just like anything else in the page, but you may be surprised what the element locators may be (or maybe you won't be). Use Firefox's "XPather" or "Firebug" add-on to figure out the correct XPath expressions.
I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.