trigger onresize in cross browser compatible manner - javascript

I would like to trigger the onresize event from my C# code behind. I think this can be done with
Page.clientScript.RegisterScriptBlock(this.getType(), "id", "javascript code");
I have tried element.onresize() but it doesnt seem to work in firefox. What is the correct way to trigger an onresize event similar to the following jQuery?
$("body").trigger("resize");
Using jQuery itself isn't an option.

This should do the trick, DOM Level 2, no idea whether this works in IE6, quirks mode still has no information on this stuff:
if (document.createEvent) {
var e = document.createEvent('HTMLEvents');
e.initEvent('resize', true, false);
document.body.dispatchEvent(e);
} else if (document.createEventObject) {
document.body.fireEvent('onresize');
}
Tested in FF, Chrome and Opera.

use this $(window).resize();
(tested in FF, chrome, IE8)
// old answer, fails in FF
document.body.onresize()

Related

htmlEle.fireEvent("onclick", document.createEventObject()) doesn't work on IE 11

Hi I have a click event associated with a image button. I am trying to fire the click event by htmlEle.fireEvent("onclick", document.createEventObject()) but i get error object doesn't support property or method 'createEventObject' on IE 11. The click event works perfectly fine for IE 9. Is there a substitute for createEventObject that i can use for IE 11? Thanks
I think createEventObject is not supported in IE 10+ (source).
Try using something like this:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
myObject.target.dispatchEvent(evt);
as explained here.

How to catch onmousewheel event on Opera?

I thought the following code targets both IE and Opera
window.onload = function() {
document.attachEvent("onmousewheel", function() {
console.log("mousewheel detected");
});
};
However, Opera (11.11) has no response at all.
I'v tried to Google this but didn't get any helpful info. Does Opera even support mousewheel event?
Combinations I'v tried...
attachEvent, addEventListener and mousewheel, onmousewheel, DOMMouseScroll
update
ok, mousewheel event does get caught on Opera, the problem is that my Opera's console does not print anything out. alert works.
You need to handle compatibility for all browsers and not switch to a solution that could break others. Simplest way of validating whether or not you can use a solution is "if".
In this case you can use 2 solutions. addEventListener & attachEvent.
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
if (document.attachEvent) //if IE (and Opera depending on user setting) {
document.attachEvent("on"+mousewheelevt, function(e){alert('Mouse wheel movement detected!')})
else if (document.addEventListener) { //WC3 browsers
document.addEventListener(mousewheelevt, function(e){alert('Mouse wheel movement detected!')}, false)
Source

Dragging Still Highlights Text

After reading the responses to this question, I have implemented the same functionality where I check for event.preventDefault and either run event.preventDefault() or event.returnValue = false. This seems to have solved the problem for the user in the question but mine is still highlighting text. It is hitting the line event.returnValue = false in IE 7/8. It also works well in Firefox, Chrome, IE 9+.
A little more information: I am using a raphael canvas. I have the mousedown, mousemove, and mouseup events for the canvas all doing their own thing. I implemented the check for event.preventDefault in the mousedown callback function.
If you're comfortable using jQuery, this will solve it cross-browser:
$(function (){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})();

preventDefault() not working as desired

<script>
function confirmDel(evt)
{var con =false;
con=confirm('Do you really want to remove this purchase?.');
if(con)
{
return true;
}else
{
event.preventDefault();
}
}
</script>
my html
<a title="View Log" onclick="return confirmDel(this);" href="index.php?mod=tech_support">delete</a>
above code works fine in chrome browser but fails in Mozilla .
but when i use return false instead of event.preventDefault(); it works fine in both.
can anyone explain why this happens
The problem is with event.preventDefault(). The event you're passing is evt, not event. You have to use:
evt.preventDefault();
event.preventDefault() works in Chrome because it mimics old IE behavior for backwards compatibility (just like it also has innerText).
In old IE, the event object was window.event. So calling event.preventDefault() calls the global event object, which works in Chrome and IE, but not Firefox which doesn't implement this non-standard behavior.

keydown EventListener in IE7

I've written this code inside the HEAD tags of my HTML page. It works fine in Firefox, Chrome and Safari, but doesn't in IE7. I would like to know how to fix it.
<script type="text/javascript">
if ( window.addEventListener ) {
window.addEventListener("keydown", function(e) {
alert(e.keyCode);
}, true);
}
</script>
Microsoft has implemented their own way of doing this called attachEvent. You can read more about this over at quirksmode.org: http://www.quirksmode.org/js/events_advanced.html
You're screwed: you're using event capturing (passing true as the last parameter to addEventListener). IE has no such equivalent, in any version, including IE8 in IE8 mode.
Is there a reason you must use event capturing rather that event bubbling here? IOW, pass false as your last parameter? Then, you'd be able to port this (somewhat) to use IE's attachEvent proprietary method, or use a library (as others have suggested and added links for).
There is no window.addEventListener in IE, you need to use attachEvent. There's good documentation on events here, or you could switch to using a library that abstracts away browser differences.
Try:
window.attachEvent
More fully:
//set page event handlers
if (window.attachEvent) {
//IE and Opera
window.attachEvent("keydown", "");
} else if (window.addEventListener) {
// IE 6
window.addEventListener("keydown", "");
} else {
//FireFox
document.addEventListener("keydown", "");
}

Categories