We Keep Coding

iOS not loading target click URL bc of hover?

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.

Using window.location.hash and anchor tag on mobile

I have a javascript function that, on click, will link to an id on the page.
$(document).on('click', '.quiz-modal-close-label', function() {
window.location.hash = '#more-quizzes';
});
My HTML looks like this:
<aside id='more-quizzes' class='col-xs-12 col-md-3 more-quizzes-container'> ...
On desktop it works. In Chrome mobile inspector it works. But on mobile, the #more-quizzes does not get appended to the URL. What could the cause be?

Is it possible that the mobile browser version you are using doesn't support this?
Try checking the MDN compatibility matrices:
[https://developer.mozilla.org/en-US/docs/Web/API/Window/location]
and
[https://developer.mozilla.org/en-US/docs/Web/Events/hashchange]
Also, have you verified that your event is getting fired when you touch the button on mobile?

opening 2 links on click without getting one blocked as a "pop up"

I want to open 2 URLs on click.
This can be done through jquery, javascript whatever I don't care.
I prefer lightweight and speed but at this point anything is fine with me.
I tried including onclick in the a href and also open.window in jquery.
Both gave me a: "popup blocked"
What is the correct way to do this?

HTML
Click Here
JS:
$('a.yourlink').click(function(e) {
e.preventDefault();
window.open('http://yoururl1.com');
window.open('http://yoururl2.com');
});
Otherwise do it in simple way
multiopen

Setup a link with target="_blank" to ensure the popup opens as _blank is okay with all browsers.
Then after it is opened, substitute current address with javascript's window.location;
2 links
<script>
$('a.bob').on('click', function(e){
window.location.href="http://yahoo.com"
});
</script>

Window.location not working in IPAD

I have a <a> inside a div <outerdiv> like this
<div id="outerdiv">
</div>
on click of outerdiv I trigger anchor inside it
$(document).on('click', '#outerdiv', function () {
window.location=$(this).find("a").attr("href");
});
this is working fine in desktop browsers but not in IPAD
In IPAD I tried location.href instead of window.location But it is also not working
location.href=$(this).find("a").attr("href");
How to achieve the same in IPAD. Any help would be highly appreciated

Here is a link to codepen. I have tested on an ipad and it works fine. Since it is in a frame you will need to hold down and open it in a new tab.
$(document).ready(function(){
$('#outerdiv').click(function() {
window.location=$(this).find("a").attr("href");
});
});
Since you are wanting to go to a new location in the browser, I am not sure why you are using "javascript:function(params)" as your href, but I have used google.com instead. If you are trying to pass some function or other when "#outerdiv" is clicked then please clarify and I will help with that.

Mobile safari: From fullscreen page, how to open a page in a normal safari window?

The title has it all: My page runs in full screen mode (cf. using an icon on the springboard); When I click a link to an external page, I would like to have it open in the normal safari application, not the full screen instance.
How can this be done?
I expected window.open('url', '_blank') to do the trick, but it doesnt.
Thanks!
Edit: code snippet:
$('#gotoWebsitePlaceholder').selectable({
start: function(){
window.open('http://www. ... .com', "_blank");
}
}).hide();

Are you using an anchor tag? My experience is that the default action is to open the href target in the Safari app. I.E., if I didn't cancel the default action via javascript, my app would shift out of the FS app. Can you post a code snippet?

I have discovered that Safari will remain in fullScreen when executing window.open(myURL) or this.location = myURL. However if your url is called using click it will exit fullScreen mode.

I solved with this piece of js (tested in ipad with iOS 5.1.1):
jQuery(document).ready(function ($) {
$('a').click(function() {
if (($(this).attr("target")!="_blank")){
window.location = $(this).attr('href');
return false;
}
});
So only the links with target="_blank" will open in safari.