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.
Related
Firstly both the parent page and the iframe are hosted on the same server (my localhost on WAMP) so same origin policy should not be an issue here.
I can't get the trigger to work. My iframe has the id of iframe.
$(window).load(function(){
//iframe ad hovers
$('#iframe').contents().find('body div').click(function(){
alert('do something here');
});
});
what am i doing wrong?
I'm not sure the browser's going to propagate a "click" event from the window context of the <iframe> out to the containing window. Does the document loaded into the <iframe> have its own copy of jQuery? If so, you can try this:
$('#iframe').contents().$.find('body div').click(function(){
alert('do something here);
});
That change makes the jQuery code in the <iframe> window handle the event.
Well I think that #jAndy is right and that should work as is - but you have to make sure the document in the frame is loaded. Try this:
$('#iframe').load(function() {
$(this).contents().find('body div').click(function() { alert("hi"); });
});
Your code is not wrong; i think the only mistake you are doing is that you are asking for the iframe's content on the parent page load which means at this stage the iframe has not been loaded yet.
Try my quick example http://jsfiddle.net/UFM44/4/
It is same as your code but i trigger it after clicking on "now" link. if you then click on the logo you can see the alert() message.
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.
Not too familiar with javascript. I have done some searching and am having trouble implementing this code into my current project.
Basically want to refresh the iframe when the screen is clicked. I currently have this code:
document.getElementById('').contentWindow.location.reload(true);
I want to integrate it into this code:
$(".launch").loadthis({ direction: "left", connect: true });
How would I go about this?
There are some issues that are unclear in your question.
1) What do you mean when you say "Screen is clicked" ?
Anywhere in the open browser window?
Anywhere in the open browser window including the iframe?
2) Is your IFRAME 100% of the width and height of the browser window?
Regardless, below I break down your problem and hopefully give you a solution...
How do we refresh a webpage?
You can refresh a webpage using:
location.reload(true);
How do we refresh an iframe?
You may refresh an IFRAME using the code here:
Refresh an iframe
<iframe id="myiframe" src="http://google.com"></iframe>
document.getElementById("myiframe").src = "http://www.google.com?"+(+new Date());
How do we detect the click?
You can use the solution here:
https://stackoverflow.com/a/2622026/1688441
document.onclick= function(event) {
// Compensate for IE<9's non-standard event model
//
if (event===undefined) event= window.event;
var target= 'target' in event? event.target : event.srcElement;
alert('clicked on '+target.tagName);
};
Remaining issues:
What happens if user clicks within IFRAME?
If the user clicks within the IFRAME, and we control the code of the IFRAME we can have a click listener within the HTML/JAVASCRIPT of the IFRAME and trigger a refresh.
If we have different domains, due to security reasons there is not much that can be done.
window.addEventListeneder("click", windowClickHandler);
function windowClickHandler(event) {
document.getElementById('iframe_id').contentWindow.location.reload();
}
Also see this question;
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
Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });