I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.
Related
Having issues getting my one page web application to work in Internet Explorer and Edge. It works perfectly fine in other browsers.
The issue that I'm having is that I can't seem to get the navigation to work.
I've tried the following:
location.href = '#quickQuiz'
location.href = '/#quickQuiz'
window.location.href = '#quickQuiz'
window.location.href = '/#quickQuiz'
document.location.href = '/#quickQuiz'
document.location.href = '#quickQuiz'
function goHere(where) { window.location = where; return false; }
location.hash = '#quickQuiz'
location.hash = '/#quickQuiz'
All of them works perfectly fine on other browsers. What am I doing wrong?
http://www.snabbteori.se if you wanna see it for yourself.
EDIT1: Additional code
The item in my navigation menu looks like the following:
<li data-icon="info"><a id="teoriNav">Teori</a></li>
And then I check for a click event on it. I know that it's possible to just put href="#teori in there, but I am just using this one as an example, there are other links where I need to perform AJAX calls too, this one doesn't need it though just to verify there isn't something wrong with my AJAX calls causing it.
$(document).delegate('#teoriNav', 'click', function () {
location.hash('#teori');');
});
I've also tried this but doesn't work:
$('#teoriNav').click( function() {
location.hash('#teori');
});
EDIT2: Updates
I believe I've fixed all jQuery errors and some other issues. The only thing I'm getting in the Internet Explorer console is:
HTML1300: Navigation occured.
DOM7011: The code on this page disabled back and forward caching.
And then when I click on the button I get output which I wrote which confirms it registers my click on the button. But still it won't navigate.
EDIT3: Ugly temporary fix
It works after doing a page reload after navigating.
var isIE = /*#cc_on!#*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
if(isEdge || isIE)
location.reload();
But I hate the fact that the site has to reload, and if someone has a real fix for this I would really appreciate it...
Edge has an issue with links if your code is not propper. You should check your console for any errors, This is most likely.
We will need more information from your side to help you further.
Post your HTML and your Javascript (just relating to this area of problem)
and we can then better help you.
I sagest fixing your jQuery errors first and trying again.
Ok my Browser test have given me a variation of 30-60 error relating to jQuery across Mac to Win. These will need to be addressed.
You also have a XSS issue that needs to be resolved. You have HTTPS from facebook but then HTTP on your website, These will need to match.
I have a website that uses ajax to bring in content when a user clicks a button. This works fine unless someone uses the "add to homescreen" function of mobile Safari and then opens the website by using the icon on the homescreen.
When someone opens the website from the homescreen icon it all works until the ajax load part. When someone clicks the link the screen flickers white and then the content is loaded in but then none of the functions that should run in the load function actually run. Like the contents gets loaded in but the animations that are supposed to happen do not happen and the page looks broken.
It is a weird problem and I have no way of inspecting the issue as I cannot access my console.
Here is a link to my web app (it's not finished yet) - http://chrisgjones.com/aut/1.3/
My ajax load looks like this
<div class="inner">
Link
</div>
function loadProject(){
var $load = $('#level');
$(document).on('click','.inner a',function(e){
e.preventDefault();
$this = $(this);
var _sourceTarget = '#puzzle',
_url= $this.attr('href');
$load.load(_url+" "+_sourceTarget, function(){
animalSlider();
setTimeout(function(){
$('.animal-content').centerRelative();
}, 2000);
$('#level-selection').animate({'left':'-200%'}, _speed, _ease, function(){
$logo.animate({'top':'10%'}, _speed, _ease);
$loader.animate({'margin-bottom':'10px'}, _speed, _ease, function(){
setTimeout(function(){
$logo.animate({'top':-_logoHeight}, _speed, _ease);
$loader.animate({'margin-bottom':-_loaderHeight}, _speed, _ease, function(){
$splash.delay(_speed).fadeOut(_speed*2);
});
}, 3000);
});
});
}); // end load
}); // end click
} // end function
Ok so I removed this script from my head, it came with the HMLT5 Mobile Boilerplate...it now works fine
<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
I was having trouble loading the images after the first question was answered. (android). My connection to everything else is seemless so I doubt it to be a connection issue. Hope that helps.
I'm working with Phonegap on a mobile device. And its issues and bugs are too much to solve. One of them is:
window.open('new_window.html','well','width=300,height=200');
(I have already created a new_window.html under assets/www/.)
it appears a full screen window, and of course. If I set scroll bar option is true, it's still no use. The system is like a dummy.
I have searched the solution for several days, trying use iframe/frame to replace it. But they are not appropriate or no use. In my development environment, I just want to let the user press a button and a small window pops out. I can set the tile, location, size...
Any alternatives or suggestions?
Thanks.
You could try setting the size on the actual page that is popping up and try window.open() again, if that does not work try:
window.location.href = "newindow.html";
If that does not work either and you could try using a jQuery Dailog box (need to import the jQuery Library found here jQuery) as the popup, code would be something like this:
$(document).ready(function()
{
$('#buttonID').click(function()
{
$help.dialog('open');
return false;
});
var $help = $('<div></div>')
.html('Your HTML copy goes here!')
.dialog
({
autoOpen: false,
height:200,
width: 300,
title: 'Window Title'
});
});
You are treating it like a web browser when it is not a web browser. You can use the ChildBrowser plugin from https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser
I am aware that until recently onafterprint was only native to IE. Recently HTML5 has added it to its list of events. I have only been successful in using it in Firefox but cannot get it to function in Chrome or Safari.
It appears to only function in Firefox when its used in the body:
<body onafterprint="printIt()">
The script for the function is this:
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};
By clicking the .printMe button, it opens the print window. Clicking print or cancel will show a message in #confirmPrint. I'm not so worried about being able to tell whether they are clicking cancel or print. I am only concerned with it functioning in Chrome and Safari. Any help is much appreciated. I am using jQuery as well, if that is not already obvious.
After some experiments, I think I can safely say that onafterprint is not worth considering.
Firefox fires it even if the user clicked Cancel instead of OK in the print dialog
IE8 apparently fires it even before the print dialog appears
Chrome doesn't fire it at all
Instead, just do whatever you wanted to do directly after calling print(), i.e.
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
printIt();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};
When I add my 'web app' to my home screen on my iPhone, then open it and click a link, it opens Safari.
I've found a couple of solutions to my question but they don't seem to work:
iPhone Safari Web App opens links in new window
$('a').live('click', function (event)
{
var href = $(this).attr("href");
if (href.indexOf(location.hostname) > -1)
{
event.preventDefault();
window.location = href;
}
});
http://jakeboyles.com/2011/01/16/how-to-build-an-iphone-and-ipad-web-app/
<a ontouchstart="window.location=yourlink.html' ">Your Link</a>
Both of these posts/tutorials were written before iOS5. Is there a new method? Am I doing something wrong?
Appreciate your help
One idea is to make your home screen app an iframe, and making all anchors target it. No javascript needed.
Alternatively:
$('a').on('click touchend', function(ev){
$(this).preventDefault();
window.location = $(this).attr('href');
});
Never use "touchstart" for something like links. You only want to detect when the user stops touching the link. Same thing for detecting key presses, mouse clicks, etc. Its the end of the event you want to detect.
.live has been deprecated in the latest versions of jQuery, so use .on() from now on and it wraps seamlessly around extant and non-extant elements.
This javascript code works for iOS 5 (it worked for me):
In the head tag:
<script type="text/javascript">
function OpenLink(theLink){
window.location.href = theLink.href;
}
</script>
In the link that you want to be opened in the same window:
Link
The code is based on this comment: http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/comment-page-1/#comment-10699
This worked fine on the iPhone 5
$(document).ready(function(){
// Stop the default behavior of the browser, which
// is to change the URL of the page.
$("a").click(function(event){
event.preventDefault();
// Manually change the location of the page to stay in
// "Standalone" mode and change the URL at the same time.
window.location = $(this).attr('href');
});
});
Remember to link to the newest version of jQuery.
Im the one that wrote the article you are referring to. I still use my javascript method and it works fine for me. The touchstart works fine for web apps as it takes a little longer for the browser to render it. If you are planning on makign a native app then don't use it, but I have used touchstart for many apps and it works fine.
Thanks
Jake Boyles