jQuery event.target not working in firefox and IE? - javascript

I'm working on making an image slider that loads the image the user clicks on using jQuery. I have it working great in Chrome but when I tried it in firefox and IE it's not loading the image at all. Here's my code:
$("img.clickable").click( function() {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",event.target.src);
ihidden = false;
});
When I try running this in firefox or IE it just doesn't load the image at all. Any ideas? :)

You need to define the event in the arguments.
$("img.clickable").click( function(event) {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",event.target.src);
ihidden = false;
});
Otherwise it is going to use window.event.

try using $(this).attr('src') instead of event.target.src

Try this :
target = (window.event) ? window.event.srcElement /* for IE */ : event.target

$("img.clickable").click( function(e) {
$("#image_slider").animate({opacity:1.0,left:200},"slow");
$("#image_container").attr("src",$(e.target).attr('src'));
ihidden = false;
});
This should work just fine

Related

Raphael: mouseout not working in IE11

I noticed that in IE11 that mouseout isn't activating my desired functionality. It works fine in Chrome, Firefox and Safari. Does anyone know why this is and what the solution could be?
wheel[segment].mouseout( myHoverOut.bind(null, segment) )
icon[segment].mouseout( myHoverOut.bind(null, segment) )
Full Code: https://jsfiddle.net/8aue977o/
Working Wheel: (scroll to wheel) https://www.uk-cpi.com/services/innovation-integrator
Could use Pure JS, It's very simple : http://jsfiddle.net/qHfJD/76/
<script>
var myDiv = document.getElementById('foo');
myDiv.onmouseout = function() {
alert('left');
}
</script>

JQuery image rollover using nameProp doesn't work in Firefox and Chrome

I have a JQuery function that converts thumbnail images to a larger image when the cursor hovers over the smaller images. This is working fine in IE but not at all in Firefox and Chrome. I am new to JQuery. Is there anything related to "nameProp" that should be different? My function is below. Thank You.
$(document).ready(function(){
$("#thumbs img").mouseover(function(){
var objthis = $(this)[0];
document.getElementById("picture").src=objthis.nameProp;
});
});
nameProp is a proprietory extension that is available only in IE, use src attribute value instead.
document.getElementById("picture").src = this.getAttribute('src');
Or
document.getElementById("picture").src = $(this).attr('src');
Also note that inside the mouseover handler this already represents the element you need to work on so you don't need to do var objthis = $(this)[0];

How to detect closing of a browser in Django?

I want to know how to detect the closing of browser and also to trigger a function based on the detection in Django web framework. Someone please guide me if possible with code snippet.
I tried using JavaScript. It worked in Firefox but not in Chrome.
Any help is appreciated.
Cheers
MAYO.
You'll need to use JS and bind a synchronous XMLHttpRequest call to the unload DOM event.
$(window).unload(function() {
$.ajax({url:"pageExit", async:false});
});
window.onbeforeunload = function (e) {
var e = e || window.event;
if (e) {
// do something here
}
};

window.onload DOM loading in popup, browser compatibility

I have HTML popup window and i want add text after opening window with spec. function:
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win.window.onload = function() {
//function for add text
//chrome and firefox fire, IE and Opera not
};
This work perfectly with Chrome and Firefox, but Opera and IE9 won't working. Please tell me
best way to do that with IE and Opera.
I try with:
$(document).ready(function(){
//function for add text
});
but same thing.
I found solution, but i wont know is there better solution then setTimeout???
Instead onload event i use:
setTimeout(function(){
//add text
},200);
index.php
function callback() {
// ...
return xxx;
}
private.php
$(document).read(function() {
var text_to_insert = window.opener.callback();
})
You may try this (tested in chrome, FF, IE but don't know about opera)
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win[win.addEventListener ? 'addEventListener' : 'attachEvent']((win.attachEvent ? 'on' : '') + 'load', myFunction, false);
function myFunction(){
win.focus();
win.document.write('loaded...');
}​
You may also try DOMContentLoaded event, if it works.
DEMO.

How do I print an IFrame from javascript in Safari/Chrome

Can someone please help me out with printing the contents of an IFrame via a javascript call in Safari/Chrome.
This works in firefox:
$('#' + id)[0].focus();
$('#' + id)[0].contentWindow.print();
this works in IE:
window.frames[id].focus();
window.frames[id].print();
But I can't get anything to work in Safari/Chrome.
Thanks
Andrew
Here is my complete, cross browser solution:
In the iframe page:
function printPage() { print(); }
In the main page
function printIframe(id)
{
var iframe = document.frames
? document.frames[id]
: document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
Update: Many people seem to be having problems with this in versions of IE released since I had this problem. I do not have the time to re-investigate this right now, but, if you are stuck I suggest you read all the comments in this entire thread!
Put a print function in the iframe and call it from the parent.
iframe:
function printMe() {
window.print()
}
parent:
document.frame1.printMe()
I used Andrew's script but added a piece before the printPage() function is called. The iframe needs focus, otherwise it will still print the parent frame in IE.
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
return false;
}
Don't thank me though, it was Andrew who wrote this. I just made a tweak =P
In addition to Andrew's and Max's solutions, using iframe.focus() resulted in printing parent frame instead of printing only child iframe in IE8. Changing that line fixed it:
function printIframe(id)
{
var iframe = document.frames ? document.frames[id] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.printPage();
return false;
}
I had to make few modifications in order to make it with in IE8 (didn't test with other IE flavours)
1) document.frames[param] seem to accept a number, not ID
printIframe(0, 'print');
function printIframe(num, id)
{
var iframe = document.frames ? document.frames[num] : document.getElementById(id);
var ifWin = iframe.contentWindow || iframe;
ifWin.focus();
ifWin.printPage();
return false;
}
2) I had a print dialog displayed upon page load and also there was a link to "Click here to start printing" (if it didn't start automatically). In order to get it work I had to add focus() call
<script type="text/javascript">
$(function(){
printPage();
});
function printPage()
{
focus();
print();
}
</script>
Use firefox window.frames but also add the name property because that uses the iframe in firefox
IE:
window.frames[id]
Firefox:
window.frames[name]
<img src="print.gif" onClick="javascript: window.frames['factura'].focus(); parent['factura'].print();">
<iframe src="factura.html" width="100%" height="400" id="factura" name="factura"></iframe>
One thing to note is if you are testing this locally using file:///, it will not work on chrome as the function in the iframe will appear as undefined. However once on a web server it will work.
You can use
parent.frames['id'].print();
Work at Chrome!
You can also use
top.iframeName.print();
or
parent.iframeName.print();
The 'framePartsList.contentWindow.print();' was not working in IE 11 ver11.0.43
Therefore I have used
framePartsList.contentWindow.document.execCommand('print', false, null);
In Chrome:
Press Ctrl+Shift+C to select the iframe.
Click anywhere in the iframe.
Go to the console tab and type window.print();
This works because in Chrome Dev Tools, the window element adjusts to whatever <html> context you are in.
Use this:
window.onload = setTimeout("window.print()", 1000);

Categories

Resources