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.
Related
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.
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?
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>
I have this piece of code
$(window).keyup(function(event) {
console.log('hello');
});
it works fine when i'm on the page, but when I open go full view in videoiframe what's on the page so this code doesn't work anymore. I press any key and it does't do anything.
any ideas why keyup function doesn't work in full width video iframe?
thx for any help
Will changing it to $(document) help?
$(document).keyup(function(event) {
console.log('hello');
});
full view in videoiframe
I think you have your answer here. When the iframe is taking up the whole window, any keyup will occur within the iframe not in the parent document.
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