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?
Related
I just need small jquery help. So we would like to change the value of text on the left element .. So the number (1) should be changed to number (2) once user scroll to 2nd slide.
The body class changes to once you scroll:
fp-viewing-1
Here video of the website:
https://drive.google.com/file/d/10OcUoyvh1Xr3pWmxqzdR67wI8IlkPsNF/view?usp=sharing
Here is what I tried:
<script>
$(document).ready(function() {
if ($('body').attr("class") == "fp-viewing-1") {
$('#count').addClass('something');
}
});
</script>
Once the class is added I was thinking to change the html value with css..
content: "";
// you can use two Intervals to detect as there is no event for class change in Jquery
$(document).ready(function () {
startProcess();
});
function startProcess() {
var checkExist1 = setInterval(function () {
if ($('body').hasClass("fp-viewing-1")) {
clearInterval(checkExist1);
alert("1 detected")
var checkExist0 = setInterval(function () {
if ($('body').hasClass("fp-viewing-0")) {
clearInterval(checkExist0);
startProcess();
alert("0 detected")
}
}, 100);
}
}, 100);
}
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 am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!
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);
}
}