I have an app which has an html file on the screen with a textarea where the user enters data. However, when the user presses in the box, the virtual keyboard and textbox and entire screen enlarges as if you used a three fingered tap. I can pinch the screen to get things back to the normal view, but I don't want the user to have to do this. I should mention that the same code works fine on an ipad. here is relevant code:
<div id="newtext">
<p>Enter Your Text Into the Box</p>
<textarea rows="4" cols="50" id="txtArea"></textarea>
</div>
The relevant css is:
#newtext {margin-top:300px;text-align:center;font-size:60px;padding:10px;margin-
left:20px;margin-right:20px}
#txtArea {font-size:30px}
Any help would be appreciated
Related
I have a simple project which has a button and an image. The image shows when pressing the button. But the image shows with delay about 1000ms.
On the browser, there aren't any problems.
and these are the codes
<span (click)="getImage()">Click it!</span>
<img src="assets/{{img}}" *ngIf="img" alt="">
img = "";
getImage(){
this.img = "aa.jpg";
}
To remove this delay, you can add the tappable attribute to your element.
<div tappable (click)="doClick()">I am clickable!</div>
Source: Click Delays
In general, we recommend only adding (click) events to elements that
are normally clickable. This includes and elements. This
improves accessibility as a screen reader will be able to tell that
the element is clickable.
However, you may need to add a (click) event to an element that is not
normally clickable. When you do this you may experience a 300ms delay
from the time you click the element to the event firing.
I'm working on a site that another designer built: http://bigbolts.qa.aztekhq.com/. The products in the New Products and Recently Viewed areas on that page have two buttons with tooltips on them, and when they are clicked, they are supposed to trigger other link events: "More Information" goes to the detail page, "Add To Cart" triggers a modal. This works fine on desktops, but not on touch devices. On my iPhone and iPad, touching the links only triggers the tooltips and nothing else. I added data-options="disabled-for-touch:true" to the links, but it does not seem to be working.
foundation makes it easy to disable or enable on touch-enabled devices, just add class= "show-for-touch" or "hide-for-touch" to the element you want to disable. code example below.
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>
Ahem... according to the tooltips documentation, it is better to add data-options="disable_for_touch:true" to your link. Like this:
<span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome!">
Your Cart
</span>
When I click on an image inside a label to select/deselect a checkbox, it changes its state accordingly in Firefox and Chrome. However, in IE8, the checkbox never responds if I click on an image and only changes its state if I click on the text.
jsFiddle is here (click on the white box image before the text in IE):
http://jsfiddle.net/dzTMD/3/
I'm not sure what the problem in IE8 but you can use background image within css instead of attaching it directly in html and this will work in IE. Here is fiddle with example
put the input field inside the label tag
example:
<label>
<input name="yn00" id="yn00_1" type="checkbox">
<div class="indicator"></div>
<span>My text for this label</span>
</label>
all elements will work inside the label, your img aswell..
just remember to use opacity to hide the input field .
IE8 will not fire events on display:none or visibility:hidden elements
I have a mobile webpage that is just a simple form with a submit button.
I have just tried to make the submit button bigger in the css file and also inline on the submit button itself and it doesn't show.
If I use the Ripple extension for Chrome it shows in there (but Ripple doesn't have the exact look of the iPhone form elements yet).
I was wondering if this is a known issue - i.e. incase the browser removes styling from submit buttons etc. or if it is something that I am doing wrong.
The line in question is simply:
<input type="submit" value="Submit" class="submit" style="text-align: center; width:30%; height:50px; "/>
The height rule won't apply to the button unless you specify "border: 0". However, you'll lose the default styling of the button, but you can get the styling back with your own CSS.
Not sure if you're trying to get the submit button centered in the form - but if you are, you should set the button to "display: block" and then add "margin: 0 auto". The text-align rule isn't necessary.
This should help you
-webkit-appearance: none;
add it to the input button you're styling
Is it possible to trigger a :hover event whenever a Mobile Safari user single taps on a div area?
It does not have to be a link. Actually, it can't be a link because the user will go to another webpage.
The hover effect I have applied is actually on a div : #div:hover {color:#ccc;}
I would like for this hover to happen whenever an iPad or iPhone user single taps on the div area.
I know that piece of CSS exists for the background color of a link:
-webkit-tap-highlight-color:rgba(200,0,0,0.4);
But this does not apply to my situation.
If this could apply to the color of the text, for example, then I could use it.
Update: Please see my accepted answer below
Are you talking about this in context with UIWebview? You can inject CSS or Javascript and treat it as any other browser. If you are doing so I would suggest jQuery
If you are not using UIWebView then we need to define gesture recognizers on the UIView and handle the gestures. i.e. in the gesture handlers make a hover uiview and remove it as the user tap is gone...
I have figured out how to trigger :hover when a user taps on a div area without using javascript. This is done using display:none; and display:block;.
For example:
<div class="block">
<p>This content is shown *before* the user hovers over .block or taps .block on an iOS device.</p>
<div class="mask">
<p>This content is shown *after* the user hovers over .block or taps .block on an iOS device.</p>
</div>
</div>
CSS:
.block {
width:300px;
height:300px;
background:black;
}
.mask {
width:300px;
height:300px;
background-color:gray;
display:none;
}
.block:hover .mask {
display:block;
}
I have found that the :hover only triggers on iOS while using display (as opposed to opacity). Also, CSS transitions ignores display so this cannot be transitioned with CSS. If you'd like the transition for desktop users, you can add opacity:0; and opacity:1;
EDIT: CSS visibility also seems to work.
Thanks for the time.