I know that there is a possibility to disable bouncing scroll efect for the whole app in the phonegap's config.xml. But what should I do if I want to disable this effect only for one element? I want to disable it for the title secton and enable for the content part of the app. I am using Phonegap + jQuery Mobile framework.
I am not sure about this because i dont know hows your html structure. But div of element for which you don't want to put scroll just add:
<div style="overflow-y:hidden" ></div>
Just check out.
Related
I'm working on the improving the accessibility of my app, is there any way to remove the alt tag or other attribute from the app web-view element/ where is the web-view element?
Try adding aria-hidden="true" to the elements you don't want read by the screen reader.
E.g.
<ion-list aria-hidden="true">...</ion-list>
Reference
I am working on a wordpress theme based on _s (with some modifications) and bootstrap 3.3.2.
In the mobile devices, the submenus of primary navigation are already expanded, but there is a problem on iPhones: The link of second level menu don't work, if you click on them just nothing happens.
This is the url of the website: www.machenergyaustralia.com.au/
Tested with iPhone 6s, ios10 and safari.
It is probably due to inproper <a> tag.
1) Check whether the <A href=""> has content like:
because mobile safari doesn't take <A> without href as anchor, when catching click events on this element.
Sometimes (I met with this problem), in template, there is a href or href content missing.
2) If another element is intended to be clicked (like span for example, you probably may need to create such an element and retype <span> to <a href="...">). In bootstrap's javascript/css environment it can be a must.
Mobile safari doesn't like to catch click events on elements other than <a>
I have an application which contains generated code for ion-nav-view. When I remove the code, the entire app disappears. I want to get rid of the arrows generated by ion-nav-view. Is there a way to do this without throwing away the entire app? I just want a view without the extra nav buttons.
The answer is that a button bar child element which was an href styled as a button, i.e.
<a href="/page1" class="button">
was being parsed and displayed into the topmost and bottom most region as part of the ion-nav-bar. The solution, in my case was to remove the anchor styled as a button in another part of the app, and the phantom objects at top of page and bottom of page go away.
I'm not sure what that magic logic was supposed to achieve, but I'm not a fan.
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
I'm making a mobile interface for my web app, and I'm trying to use anchor links to make navigation easier. My code is similar to this:
Jump to section 2
... lots of stuff here ...
<h2 id="section2">Section 2</h2>
The problem is that the link works only once. So if a user, using his iPhone, taps that link and jumps to section 2, then scrolls back to the top and clicks that link again it won't work. He has to refresh the page.
Is there any way to get around this?
Appreciate your help
Don't use id, use <a name="section2">Section 2</a>