I have appended a iframe with youtube embed url in a div which id is div1. I want to do something when click happened on iframe.
i am using this jquery code but it is not working.
$('#div1 iframe').bind('click', function(){
alert('clicked on iframe');
});
I'm not sure whether you have id for iframe or not. but you can try to catch the click even of the document in the iframe:
document.getElementById("iframe_id").contentWindow.document.body.onclick =
function() {
alert("iframe clicked");
}
Though this doesn't solve your cross site problem, FYI jQuery has been updated to play well with iFrames:
$('#iframe_id').bind('click', function(event) { });
function iframeclick() {
document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
document.getElementById("theiframe").contentWindow.location.reload();
}
}
This we can use achive with jquery and its is also possible with javascript
$('.inner iframe').bind('click', function(){
alert('clicked on iframe');
});
Here is a solution that is vanilla JS - and resolved a similar issue for me where I needed to close some dropdowns on the parent if the iFrame was clicked
public static iFrameClickHandler = {
iFrame: undefined,
mouseOverIframe: false,
mouseOver: function() {
this.mouseOverIframe = true;
},
mouseLeave: function() {
this.mouseOverIframe = false;
window.focus();
},
windowBlur: function() {
if (this.mouseOverIframe) this.fireClickEvent();
},
fireClickEvent: function() {
// do what you wanna do here
},
init: function() {
this.mouseOver = this.mouseOver.bind(this);
this.mouseLeave = this.mouseLeave.bind(this);
this.windowBlur = this.windowBlur.bind(this);
this.iFrame = document.querySelector('class/id of your iframe wrapper');
this.iFrame.addEventListener('mouseover', this.mouseOver);
this.iFrame.addEventListener('mouseleave', this.mouseLeave);
window.addEventListener('blur', this.windowBlur);
window.focus();
},
destroy: function() {
this.iFrame.removeEventListener('mouseover', this.mouseOver);
this.iFrame.removeEventListener('mouseleave', this.mouseLeave);
window.removeEventListener('blur', this.windowBlur);
}
}
Related
I am trying th get event when iframe document title changes.
This is my code
var iframeNode = $('<iframe>', {
src: url,
frameborder: 0,
style:"display:none",
scrolling: 'yes'
});
...
iframeNode[0].onload = function() {
$(iframeNode[0].contentWindow.document.title).change(function () {
console.log("Title has changed");
});
}
However, when iframe document title changes I don't get event.
I also tried :
$(iframeNode[0].contentWindow.document.head, "title").change(function () {
console.log("Title has changed");
});
but result is the same. How to do it?
I having trouble detecting clicks in an iframe(iframe id is '#ptifrmtgtframe' and tag id is '#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH'). I have tried:
$('#ptifrmtgtframe').click( function() {
$('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').click( function() {
console.log("clicked");
});
});
I have also tried
var htmlDocument = document.querySelector('#ptifrmtgtframe').contentDocument;
$(htmlDocument).contents().find('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').on('click', function() {
console.log("clicked");});
Iframes are a bit different in that you have to load them and get their contents before you can do anything with it:
$('#ptifrmtgtframe').on('load', function() {
var iframe = $(this).contents();
iframe.find('#CLASS_SRCH_WRK2_SSR_PB_CLASS_SRCH').click( function() {
console.log("clicked");
});
});
So I'm using some parts of gentelella and there is a file custom.js. I have some problems with this file because some parts works and other don't.
The problem is with this method:
$(document).ready(function() {
console.log("custom.js inside document ready");
$('.collapse-link').on('click', function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$('.close-link').click(function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
It write "custom.js inside document ready" but when I click nothing happened.
And if I look into the HTML I have the same classes as in the JS:
it might be that on document ready these specific elements are not found.
In general a best practice is to delegate the events to the document, like this:
$(document).ready(function() {
console.log("custom.js inside document ready");
$(document).on('click', '.collapse-link' /* <--- notice this */, function() {
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
$(document).on('click', '.close-link' /* <--- notice this */, function () {
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
});
You have written the click event on the a tag. In general functional specific tags like submit button, a tag will do their default functionality on click. So as it is anchor it will check for href which is not there so the it is not redirecting to anywhere. We can supress the default behaviour of these kinds using e.preventDefault(). Here e is the event. So change your function to
$('.collapse-link').on('click', function(e) {
e.preventDefault();
console.log("clicked on a collapse-link");
var $BOX_PANEL = $(this).closest('.x_panel'),
$ICON = $(this).find('i'),
$BOX_CONTENT = $BOX_PANEL.find('.x_content');
// fix for some div with hardcoded fix class
if ($BOX_PANEL.attr('style')) {
$BOX_CONTENT.slideToggle(200, function(){
$BOX_PANEL.removeAttr('style');
});
} else {
$BOX_CONTENT.slideToggle(200);
$BOX_PANEL.css('height', 'auto');
}
$ICON.toggleClass('fa-chevron-up fa-chevron-down');
});
And
$('.close-link').on('click', function(e) {
e.preventDefault();
console.log("close-link clicked")
var $BOX_PANEL = $(this).closest('.x_panel');
$BOX_PANEL.remove();
});
I have a web app which hides the bottom toolbar while typing to stop it going on top of the keyboard.
$(document).ready( function() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
});
$('#open'); is an <input> box.
Instead of hiding, the lower bar stays. The text 'loading' also appears beneath (for some reason). This is especially strange as I can't find it in the DOM when inspecting on my computer.
Link: www.scriptr.net/webapp
Try listening to a different ready event for mobile. Something like this
document.addEventListener("deviceready",onReady,false);
function onReady() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
}
just put this code on deviceReady function, work for me
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
So, i have some animation actions, this is for my login panel box:
$('.top_menu_login_button').live('click', function(){
$('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
$('#login_box').animate({"margin-top": "-=320px"}, "slow");
});
now i need to add some hiding action after click on body so i do this:
var mouse_is_inside = false;
$('#login_box').hover(function () {
mouse_is_inside = true;
}, function () {
mouse_is_inside = false;
});
for stop hiding this element on body click, and this for body click outside by login-box
$("body").mouseup(function () {
if (!mouse_is_inside) {
var login_box = $('#login_box');
if (login_box.css('margin-top','0')){
login_box.stop().animate({"margin-top": "-=320px"}, "slow");
}
}
});
Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?
You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :
$(document).on('click', function(e) {
if ( !$(e.target).closest('#login_box').length ) { //not inside
var login_box = $('#login_box');
if ( parseInt(login_box.css('margin-top'),10) === 0){
login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
}
}
});
And live() is deprecated, you should be using on().