javascript print iframe doesn't work in firefox - javascript

I have tested this in Chrome and all good, but Firefox is lazy.
Part of HTML in question:
<div id="print" style="display:none;"></div>
And Javascript follows it like:
$('.print').click(function(){
printF($(this));
return false;
});
function printF(dugme){
$('#print').html("<iframe src='http://example.comli.com/index.php/prijava/pogledaj/"+$(dugme).attr('name') +"' onLoad='this.contentWindow.print();'></iframe>");
};
Thank you

Is the problem that the click event is not getting fired or that your IFRAME is not getting loaded?
Anyway, I think I got this working in Firefox. I had to put your click function into the document#ready event though. Like this:
$(function(){
$('.print').click(function(){
printF($(this));
return false;
});
});

Related

jquery('#div_id').show() not working in firefox

I have one HTML file as shown below:
<html>
<head><title>jQuery beginner</title></head>
<body>
<div id='my_div'>Some random generated value</div>
<button id="submit_button">submit</button>
</body>
</html>
I want to keep <div id="my_div"> element hidden until <button id="submit_button"> is clicked.
So in my Javascript file I wrote following code:
$(document).ready(function() {
$('#my_div').hide();
});
$('#submit_button').click(function() {
$('#my_div').show();
});
This script and HTML is working fine in Google Chrome and surprisingly it works in Internet Explorer 9 also but doesn't work in Firefox.
I read some other questions on SO and tried alternatives like
$('#my_div').css('display','block'),
$('#my_div').css('display','inline-block'),
$('#my_div').css('display','block-table'),
$('#my_div').attr('style','display:block')
but none of the above solution is working in Firefox.
Is there any solution to this problem?
One more thing I observed is, if I keep the div visible at page load time and later using button click event toggle it's display, it works.
Any clue why this is happening only in Firefox?
But you missed to try this :)
That is, wrapping the event binding code into the doc ready handler.
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});
Wrap your code inside ready handler:
$(document).ready(function() {
$('#my_div').hide();
$('#submit_button').click(function() {
$('#my_div').show();
});
});

Use JQuery or onbeforeunload for IE and FF

I'm working in a Flex4 application, using javascript, in the "index.template.html" document. I'm having an issue being able to use onbeforeunload with Firefox. The application works perfectly in IE, but the exact same one doesn't sit well with FF. (See below)
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var flex=document.$(application)||window.$(application);
flex.unloadMethod(); //custom method to log out the user
}
function after(evt)
{
}
</script>
From what I've found, FF doesn't seem to register onbeforeunload events, so I found that the popular thing to use instead is binding with JQuery. So, I deleted the above code and replaced it with the below code, but it doesn't display a pop-up when the user tries leaving the page in both IE and FF. Anyone that seems to be using JQuery for this seems to be doing the exact same thing, so I don't know what's going on.
<script type="text/javascript">
$(window).bind("beforeunload",function(event){
return "This should create a pop-up";
});
</script>
Eventually it would be nice to call the "flex.unloadMethod" like in the first bit of code, but for the time being I'm just trying to get a pop-up to work so I know I'm on the right track. Any insight would be greatly appreciated.
Try:
<script>
$(window).on('beforeunload', function(){
return "This should create a pop-up";
});
</script>
Example: http://jsfiddle.net/AeztA/3/
Would like to add that i figured out that you can't use an empty string in firefox.
It has to be at least 1 blank for example as return.
var text = 'Exit Message';
$(window).on('beforeunload', function(){
return " " + text;
});

Why is my onclick event not registered in Firefox?

I have a list item with an onclick event. It runs in Chrome and Internet Explorer, but not Firefox. Any suggestions?
<li onclick="alert('test');">test test<br></li>
This works fine for me in Firefox.
Check this:
JavaScript is enabled in your browser.
Try adding a return false; statement in your tag.
Or a function like this:
function test() {
//your code here
return false;
}
Or use this:
Link
or this
Link
I was trying to minimize my html code to send a complete code to simulate the error as Boris Zbarsky requested. Then I found my mistake.
I was using marquee tag which has been deprecated. Now I am going to use jQuery instead of it.
thx
In Firefox, the event object is not global. You have to access it within your script tags not in html.
onclick works likes this
<li id="alert">test<br></li>
<script>
document.getElementById("alert").addEventListener("click", function( event ) {
alert('test');
}, false);
</script>
Attributes can be ignored by Firefox when it is served invalid HTML, use
https://validator.w3.org/
to clean up the HTML.

.load() does not work on IE

I am trying to have a little dynamics work in this website http://peps.sqps.nl
Everything seems to work well untill I test the website in IE, it just doesnt give any content back.
The js I use is as following:
$(document).ready(function(){
$('li.navItem a').click(function(){
var url = $(this).attr('href');
$('article').load(url + ' article', function(){
$('article').fadeTo(1200, 1);
});
return false;
});
});
the html of the dynamic part is as following, where the <article></article> part is supposed to act dynamicly.
<section id="content">
<div id="article">
<article>
content is in here
</article>
</div>
</section>
The solution given here on similar problems didnt fix the bug
Anyone has any ideas?
Thnx!
Your URL looks like it would be badly formed.
url = "http://site.com/path/to/page"
load_url = url + ' article'
alert(load_url); // Displays "http://site.com/path/to/page article"
Is this what you really want?
Probably the IE is making cache of your code.
See this post: jQuery's .load() not working in IE - but fine in Firefox, Chrome and Safari
Add .each(function(){...}); after .load , it should works in IE and Chrome.
$('#<%=image1.ClientID %>').load(function () {
//things to do
}).each(function () {
if (this.complete) $(this).load();
});

jQuery iframe scroll event (IE)

Can't listen to the scroll event in Internet Explorer 7.
I've tried:
$("#myIframe").scroll(function() { alert('hi'); })
Works for FF:
$($("#myIframe").contents().get(0)).scroll(function() { alert('hi'); })
Getting keypresses work:
$($("#myIframe").contents().get(0)).keydown(function() { alert('hi'); })
As much as I love jQuery. I can't get this to work. However, I tried this in plain old javascript and it worked just fine in IE, FF,Safari and Chrome.
<script type="text/javascript">
window.onload = function() {
var frm = document.getElementById("myIframe").contentWindow;
frm.onscroll = function(){
alert("EUREKA");
}
}
</script>
EDIT: The following works in FF, Safari and Chrome when using window.load(). When using document.ready it only works in FF. For whatever reason it doesn't work in IE8 in either event.
$(window).load(function(){
$($('#myIframe').contents()).scroll(function(){
alert('frame scrolled in jquery');
});
});
I know it's an old thread, but some people could find it useful.
$(document).scroll() can be replaced by $(window).scroll(), and it has worked for me so far.
Try this:
2 things must happen before you can traverse the dom of a nested browsing context.
You need to know that the iframe exists, taken care of with the document ready event.
And you need to make sure that the iframe has loaded.
ie:
$(document).ready(function(){
// #page is the id of the iframe
$('#page').load(function(){
// $(this)[0].contentWindow is the window of your nested browsing context/ iframe
$($(this)[0].contentWindow).scroll(function(){
console.log($(this).scrollTop());
});
});
});
One thing to note is that this will definitely not work cross browser in Firefox.
Put this on the parent:
var childScrollHandler = function () {
alert('Scrolling going on');
}
And then put this on the iframe content:
$(document).bind('scroll', function(ev){
parent.childScrollHandler(ev);
});
replace $(document) by whatever element you are trying to listen into.

Categories