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.
Related
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit
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
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.