I have this code in a phonegap html page:
<div class="row">
<div class="small-12 columns" onclick="window.open('http://www.something.com/');">
<h3>some text</h3>
<a href="#" onclick="window.open('http://www.something.com');" class="read-more">read
more
</a>
</div>
</div>
I have a menu page that links to this page (which works fine):
<a href="page.html">
<h2>page</h2>
</a>
I build the apk, when I open it on my smartphone, I get the menu. When I click the page item, the page opens, but then the onclick event fires immediately, without even clicking it.
Can someone help me out
This is an issue with how Android webviews handle click actions. It is best not to use onclick if possible. I have had the best luck with the touchstart event but in some rare cases I have had to implement a hack with the following steps:
onclick/touch append a div element that covers the entire screen and it's z-index is above all elements (but is transparent)
use setTimeout to remove this div element after 301 milliseconds
run the action you want to trigger directly after creating the setTimeout method
This is not a great solution, but if nothing else works this will.
Related
I have created a custom button and added a pop up to it. Here's the code
<div align="center"><span class="browsebutton13">Google</div>
It's works perfectly fine on desktop, but on mobile it open two pages.
1st page - The same page on which the button is clicked is opened again
2nd page- It opens the Google page, which is what I wanted
I want only the second page to be opened when the button is clicked on mobile. I am using Safari browser. It works perfectly fine on desktop.
remove the anchor because you already have window.open in your onclick event
<div align="center"><a target="popup" onclick="window.open('http://www.google.com','name','width=600,height=400')"><span class="browsebutton13">Google</a></div>
remove href from above code
OR
<div align="center"><span class="browsebutton13">Google</div>
Another (more save) approach would be to change your anchor element to ...
<a href="javascript:window.open('http://www.google.com','name','width=600,height=400')">
... since this doesn't harm any specs. You only can remove your href attribute if you use HTML5 (docs). Otherwise, the a element requires an href attribute (docs).
I am using Foundation 5.5.3, and I'm having a serious problem with the content tabs. I've tried everything I can think of, but for some reason whenever a user clicks on a tab, it scrolls the page down to the content. I'm not using deep linking, as I understand there's some issue with deep linking/scroll to content.
Here's an example of the html:
<ul class="tabs" data-tab data-options="scroll_to_content: false">
<li class="tab-title active">Tab 1</li>
<li class="tab-title">Tab 2</li>
</ul>
<div class="tabs-content">
<div id="tab1" class="content active">
<p>Tab 1 content</p>
</div>
<div id="tab2" class="content">
<p>Tab 2 content</p>
</div>
</div>
Yet it still scrolls to the content when the tab is clicked. I'm at a loss, any help would be greatly appreciated.
Put together a solution with some help from this answer.
The issue seems to stem from the way MixPanel handles tracking links. It intercepts the click action, does some tracking stuff, and then manually directs the browser to where it should be going. This is normally fine, but Foundation tries to disable the default action when clicking on a content tab. MixPanel then comes along and ignores that, sending the browser to the link anyway, causing the scrolling issue.
Disabling link tracking altogether solves the issue, but that also means that we're collecting a lot less useful data. So I went around trying to find a way to disable link tracking on in-page links. That's where the answer above came in handy, as it's a neat little function that allows using a jQuery selector in determining which links to track.
Instead of the standard link tracking setup, I used the provided delegate_links method, as such:
mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link');
That ignores any links starting with #, so it disables tracking on the in-page links. Normal links are tracked as they were, but the tab specific links no longer trigger MixPanel, and the browser no longer scrolls to the content on click.
In a Phonegap Application with jQuery mobile, there are times that I click a button but it only gets selected and doesn't transition to the other page, it has happened even with the back buttons that are generated automatically by the library, I have to click it again to get it work. It's strange because the problem is not always reproducible. At first I thought it was the phone but I tried in another one and the same thing happened.
jQuery mobile 1.4.3
Phonegap (Cordova) 3.5.0
Android 4.4.2 and 4.1.2
HTML:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-add-back-btn="true" data-back-btn-text="Back">
<h1>Test</h1>
</div>
<div data-role="content">
</div>
After diferents test, I discard the use of rel="back".
My button are this:
Back
Whithout the 'rel="back"' works but sometimes when click the button selected and not back, and when click one more time the back button works.
Finally I catch the tap and execute the change of page manually
$('a[data-direction="reverse"]').on('tap', function(event) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
$('#loading').hide(); // stop loading icon in case of click back when loading data
$.mobile.changePage($(this).attr("href"),{transition:'fade'});
});
I have a page that has a menu and a content area. I dynamically load content into this area via ajax.
<div id="content" style="visibility: visible; overflow: hidden; top: 0px;"></div>
The ajax call looks like the following.
$('#content').load('content/contactform.html',function(){ ...some code...}
The page that is loaded into the content box is a form that has a Button defined with an onClick method
<div>
<h2>Phone Numbers</h2>
<div id="form">
</div>
<button id="addPhoneBtn" onclick="alert('click')">Click Me</button>
</div>
Normally it would add a new input field to allow the user to enter more phone numbers. But for testing it just prints an alert.
When I now click that button on a mobile device such as an IPad, the event is fired three times. I have read that on touch devices don't have mouse events. They have touch events.
But the strange think is that if I copy that page directly into the content, the onClick event is only fired once. Am I missing something ?
Update: I'm using Iscroll to make the content that is inside the div scrollable.
I found the problem. I was using iscroll-4 to achieve the scrolling on touch devices.
Removing this library and switching to the dojo framework, solved this issue.
I have a jquery pop-up window attached to a link. If the page is not fully loaded (i.e. the .js files) when the link is clicked it opens in the browser window rather than a pop-up.
I was thinking of disabling/hiding the link until the page was loaded.
What would best practice be for handling this scenrio and have you any code examples?
First place your link in div section and make that div hide
<div style='display:none' id='LinkId'><a href=''>click</a></div>
Now write this code in head section
<script language="javascript">
$(document).ready(function() {
$('#LinkId').show();
});
</script>
Actually this is IMHO a perfect example why assigning event handlers directly in the HTML code is not necessarily a bad thing, despite what many people say.
If you use Link it there will be no gap between visibility of the link and the time you can use it. It improves usability, because the user don't need to wait for your page to load completely and still use the link the moment he sees it.
I had the same issue and here is how i solved it.
I had to create one dummy link in addition to my real link i.e
<!--fake link is visible by default-->
<li class="li_1">
<a class="dropdown-toggle" href="my_real_link_not_popup.html">Compose</a>
</li>
<!--original link is hidden with the hidden class by default-->
<li class="li_2 hidden">
<a class="dropdown-toggle ajax-popup-link_write" id="write_main_a" href="my_real_link_is_popup.html">Compose</a>
</li>
And my script goes thus:
$(document).ready(function()
{
//prevent event from being fired before page load
$(".li_1").addClass("hidden");
$(".li_2").removeClass("hidden");
});
so the page loads with the fake link and onpage load == "finish" then the fake link is hidden and the real link is made visible.
The only down side of this is that user must always have java script enabled in their browser else they won't be able to access the pop-up. But look on the bright side the fake link could still redirect to another page with the same content as the popup. wink
hope this helps
I had a similar problem, where a link's href was being filled by server and the the href was being modified before page load to us/en or /de/de before the url,
So if we click on the link before page loads completely, it would go to incomplete url, thus I would get page not found.
So solution I took is:
adding onclick="event.preventDefault()" as soon as possible from client side and then modifying it to onclick="" as the url gets updated.
So the issue got resolved, when the url was incomplete, then click did not happen.