I have searched all over the net and tried many different things, but can't figure out how to detect scrolling of an iframe. The iframe source is on the same server is the same directory as the page. Here is the initial code:
$(document).ready(function(){
var iframe = $('#iframeId');
iframe.load(function(){
$(this).scroll(function() {
alert('scrolling');
});
});
iframe.attr('src','document.html');
});
I have tried changing:
$(this).scroll(function() {
To all this options:
$($(this).contents()).scroll(function() {
$($(this).contents().get(0)).scroll(function() {
$($(this).contents().find('html')).scroll(function() {
$($(this).contents().find('body')).scroll(function() {
$($(this).get(0).contentWindow).scroll(function() {
I have also tried to add to the iframe html tag:
onscroll="alert('scrolling')"
Nothing seems to be triggering. Any ideas? Thanks.
plain javascript :
<script type="text/javascript">
window.onload = function() {
var frm = document.getElementById("iframeId").contentWindow;
frm.onscroll = function(){
alert("scrolling...");
}
}
</script>
Related
I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best
You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}
I have a website and in my html code I have added barba.js, If I go to inner pages barba animations are working fine, but other javascript functions are not working.
So i added this barba script in html page,
$('document').ready(function(){
//initIndexJs();
var transEffect = Barba.BaseTransition.extend({
start: function(){
this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
},
fadeInNewcontent: function(nc) {
nc.hide();
var _this = this;
$(this.oldContainer).fadeOut(1000).promise().done(() => {
nc.css('visibility','visible');
nc.fadeIn(1000, function(){
_this.done();
})
});
},
});
Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {
initIndexJs();
//callForPageLoad();
});
Barba.Pjax.getTransition = function() {
return transEffect;
}
Barba.Pjax.start();
});
So can anyone please help me to solve this problem?
I display a pdf document inside an iframe and I want to check if user has read the document before he can validate my form.
It seems to be easy but after lots of try, I still not be able to do this.
I try many ways like implement scroll function like this :
$("#myFrame").scroll(function(){
if ($("#myFrame").scrollTop() + $("#myFrame").innerHeight() + 20 >= $("#myFrame")[0].scrollHeight) {
alert("scroll is over");
}
});
and my iframe is :
<iframe id="myFrame" height="600" width="800" src="myDoc.pdf">
</iframe>
Thank you for your help.
This works flawlessly
$(function () {
$("#iframeid").load(function () {
var iframe = document.getElementById("iframeid").contentWindow;
$(iframe).scroll(function () {
if ( $(iframe).scrollTop()==$(iframe).height()-$("#iframeid").height()) {
alert("Reached bottom!");
}
});
});
})
I have the jQuery FancySelect plugin installed. Works fine. Now I am trying to call it in a modal popup, but it does not work. This is the code in the parent window:
<script src="/js/fancySelect.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.fancyselect').fancySelect();
var repoName = 'fancyselect'
var menu = $('#top').find('menu');
function positionMenuArrow() {
var current = menu.find('.current');
menu.find('.arrow').css('left', current.offset().left + (current.outerWidth() / 2));
}
$(window).on('resize', positionMenuArrow);
menu.on('click', 'a', function(e) {
var el = $(this),
href = el.attr('href'),
currentSection = $('#main').find('.current');
e.preventDefault();
menu.find('.current').removeClass('current');
el.addClass('current');
positionMenuArrow();
if (currentSection.length) {
currentSection.fadeOut(300).promise().done(function() {
$(href).addClass('current').fadeIn(300);
});
}
else {
$(href).addClass('current').fadeIn(300);
}
});
menu.find('a:first').trigger('click')
});
</script>
Adding class="fancyselect" to any select in the parent works. However, does not work if added to modal popup select.
Just speculating here as you did not show the HTML or the JS logic that is dealing with the popup creation. Are the elements where you wan to apply the FancySelect method, from the popup plugin already on the page when you call the:
$('.fancyselect').fancySelect();
?
If the elements are added after the page load they won't be picked up by that statement. When displaying the popup you would do somehting like
$('#popupcontainer .fancyselect').fancySelect();
So they will all the required code will be applied on that elements as well.
Update:
Following the update give in your original post, you can add something like: [not tested]
onLoad: function() {
var wrap = this.getOverlay().find(".contentWrap");
$(wrap).find('.fancyselect').fancySelect();
}
This should be triggered after the popup has been populated.
I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/