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>
Related
I have <router-outlet [routes]="Routes.all"></router-outlet> set in my app component. I have a page with links at the bottom of the page. If a user clicks a link I want them to be taken to the top of the new page.
If I use RouterLink the current scroll position is retained so the user lands in the middle of the new page.
<a [routerLink]="RoutePaths.featurePage.toUrl()">...</a>
If I use a regular HTML link, I get the behavior I want, the user lands at the top of the new page.
...
What I really don't get is how they can respond differently yet compile to the exact same HTML code.
<a class="_ngcontent-zbb-0" href="/feature-page">...</a>
What am I missing here?
I understand regular non-Dart Angular has something called scrollPositionRestoration but it doesn't seem to exist for AngularDart.
The answer is really a hack to return the scroll position by utilizing the
window.scrollTo(x,y) function.
This issue was raised in here in regular angular
Equivalent to autoscroll=true: automatic scroll to top when route changes
remmeber to import dart:html
My Chrome app contains two pages A1.html and A2.html. How can i navigate from A1.html to A2.html without creating a new window?
The page A1.html contains 10 div's and A2.html contains a back link to A1.html. My need is to load directly a specific div of A1.html when the back link in A2.html is pressed.
You can't navigate within a Chrome App window (Content Security Policy), although you can navigate to an external browser if you set the target attribute of the <a> element to "_blank". What you have to do, if you really want links to appear to work normally, is intercept the click on the link by setting an event handler and then changing the DOM from within JavaScript.
One easy way to change the DOM from JavaScript if you have an HTML fragment is to use the insertAdjacentHTML API (Google it for documentation).
While this might seem awkward, even limiting, think of a Chrome App as an app, and not a web page. After all, with a native Mac OS X or Windows app, you wouldn't expect to entirely change the UI in a window by simply clicking on a button, right? You'd expect that the app would do that via the native API. Same the Chrome Apps.
Alternatively, you can position a webview in the Chrome App window, and then HTML within the webview works normally, because that really is a "web view."
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.
I have a page that includes multiple news articles which can be shown or hidden by clicking on the news titles. You can also access specific articles directly by adding an id variable to the url, which auto opens the relevant article and scrolls the page to it. Each article has a Facebook like/send button at the bottom of it within a fixed sized div (400px by 30px). This works fine on Safari and Chrome but on IE or Firefox the Like/Send buttons for the url matching the page's og:url tag display correctly, but the other ones overlap and only show the top few pixels of the buttons. The ones that don't display are also in divs that are originally hidden so i'm wondering if this has something to do with it?
You can see what i mean at: http://bit.ly/qMPvM9 (on FF and IE none of them work, on Safari and Chrome all of them work).
If you visit http://bit.ly/n73V0s (which is the same page but it opens the specific news article and has the correct og tags in the header) then the open news article (the one with the matching og tags) works correctly on all browsers (but the others still don't work in FF and IE).
FYI i have put an orange background on the containing divs for the buttons to highlight the issue. If anyone could shed any light on why this might be happening i'd be very grateful.
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>