We Keep Coding

Call user defined jQuery function with JS

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();
}
});
}
}

iFrame Scroll Event Detecting

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>

I have a iframe which is not getting enabled for design from a seperate.js file

The code for the iframe declaration in my sample.asp file is as follows
`<iframe width="100%" id="idContent" height="100%" ></iframe>`
the code utilized in dummy.js file to enable the iframe is
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('idContent').addEventListener("mouseover", handler1);
});
function handler1() {
var iframe1= document.getelementbyid('idcontent');
ifram1.document.contentDocument.designMode="on";
alert("enabled");
};
the above code does not enable any design of the page.
the below code enables the entire page where as i require only one iframe( idcontent) to be enabled.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('idContent').addEventListener("mouseover", handler1);
});
function handler1() {
document.designMode="on";
alert("enabled");
};
can you please suggesst how can i enable the design mode of the iframe. help is appreciated.

How to wait until iframe refresh is done before executing function?

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/

excluding a page from javascript

I have a swipe to do back script for my ios web app that I have running across every page but what I want to know how is to exclude from affecting the first page that shows up. The script is this
<script>
$(document).bind('swiperight', function () {
history.back();
});</script>
How would exclude a page that has a hypothetical id of "home"?

I'm assuming you're using jQuery mobile (Apologies if you're not), you could use $.mobile.activePage to check if you're at home:
http://jquerymobile.com/demos/1.2.0/docs/api/methods.html (At the bottom)
<script>
$(document).bind('swiperight', function () {
if ( $.mobile.activePage !== 'home' )
history.back();
});
</script>

The general principle would be this:
<script>
var id = // get your hypothetical id from somewhere;
if(id !== "home") {
$(document).bind('swiperight', function () {
history.back();
});
}
</script>
Without any more information on where the hypothetical id is coming from it's difficult to be more specific than that.

$(document).bind('swiperight', function () {
if (!$('body#home').length === 0) {
history.back();
// ... anything else
}
});
You could also use: if (!$('#page.home').length === 0) if it's going to be a class on a containing element, if ($('#page').hasClass('home')) is a bit more of solid jQuery-y way of doing it too.