I'm creating/showing a span tag at the position of the user in a div tag:
var parentOffset = $(this).parent().offset();
$("#test").css({"left" : event.pageX - parentOffset.left - 20, "top":event.pageY - parentOffset.top}).fadeIn("fast");
This works great in webkit browsers, aka Chrome, Opera, etc.
Firefox doesn't even show the span tag, nothing happens, the console doesn't even output error codes.
Is there a solution for all browsers?
Thanks so far
Simplified jsfiddle: http://jsfiddle.net/q7PSs/
If you look in the JS console in firefox you will see that there's an error on each click: ReferenceError: event is not defined. You need to pass the event object to the event handler.
http://jsfiddle.net/q7PSs/1/
$("#par").click(function(event) {
...
Related
Works in Chrome, etc.
Screenshot should explain the situation.
The SVG's content has been changed in the DOM, but the 'DOM Explorer' is reporting the original rect is still there (it's being shown).
Interestingly enough, Safari 7 on OS X also exhibits the same behavior.
I faced the same problem.
A quick fix is to use jQuery empty() instead of html('');
e.g.,
var svg = d3.selectAll("svg");
svg.each(function() {
// does not work in IE $(this).html('');
$(this).empty();
});
I want to test if a div is overflowing. The following code works for webkit and Firefox.
var div = $("#myDivWithOverflow")[0];
var OnOverflowChanged = function(){
alert("OnOverflowChanged");
}
if (div.addEventListener) {
// webkit
div.addEventListener ('overflowchanged', OnOverflowChanged, false);
// firefox
div.addEventListener ('overflow', OnOverflowChanged, false);
}
As far as I can see IE10+ has support for the addEventListener method, but does not react on either of the above events.
Is there a way to achieve this in IE?
Update: I've created a fiddle which illustrates clearer what I want to achieve:
http://jsfiddle.net/AyKarsi/sB36r/1/
Unfortunately, the fiddle does not work at all in IE due to some security restrictions
Currently, overflowchanged are only supported on Webkit browsers.
A work around can be to check for mutation events (notably DOMAttrModified) and check if the overflow changed.
div.addEventListener("DOMAttrModified", function() {
// check overflow value
}, false);
This won't trigger on screen resize, so it may not do exactly what you're looking for. But it's somewhere you can dig for a solution.
On MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events
On Microsoft site: http://msdn.microsoft.com/en-us/library/ie/dn265032(v=vs.85).aspx
www.warhawkcomputers.com/Birenbaum
This site has various projects for my Computer class that I am in. A check is coming up and all programs will need to work in FF and IE.
My Bouncing Ball, Race Track, and Tanks projects under Third quarter as well as pong under Fourth Quarter work in IE when the objects need to be moved by a continuously adding variable performed in a javascript script, and it works perfectly fine in IE, but when viewed with Firefox 3, the moving objects no longer move and I have tested to find out it gets the variables but seems to only add it once and that the document.getElementById("objectname").style.left = "continuously adding variable" seems to not be executed despite being in a timer running every 10 milliseconds.
Also, none of my keypress code works in Firefox, but I believe that is because I use an outdated method of moving objects via keypress. This is largely due to my teacher's outdated methods.
Thanks for all of your guys's help.
You need to add a 'units' to your positions:
document.getElementById("ball").style.left = x + 'px';
document.getElementById("ball").style.top = y + 'px';
That will work in FF as well now.
Firefox does not use a global event object. They pass an event object into the handler. As a result, you need to modify your Move function:
function Move(e) {
/* snip */
var whichkey = window.event ? window.event.keyCode : e.keyCode;
/* ... */
Gerrat is absolutely correct about the other problem you asked about.
EDIT: this won't work with how you hooked your event handler in the body tag. You need to remove the onkeydown="Move()" attribute from the body tag and add the following code at the top of JavaScript.js:
document.body.onkeydown=Move;
If allowed to do so by your teacher, you would be MUCH better off using jQuery or some other framework.
I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
console.log('Handler for .resize() called');
});
});
</script>
<div id="log">
</div>
</body>
</html>
Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.
Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).
UPDATE
One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.
var ieVersion = getInternetExplorerVersion();
if (ieVersion == 8) {
document.body.onresize = function () {
};
}
else {
$(window).resize(function () {
});
}
But this does not answer my question: is the continuous firing of resize() a bug in IE8?
If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).
To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize
This article says Chrome, Safari & Opera suffer from this too.
I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the log div that you have there, which means that it is resizing the div and triggering the window resize event.
The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:
var handleResize = function(){
$(window).one("resize", function() {
console.log('Handler for .resize() called');
setTimeout("handleResize()",100);
});
}
handleResize();
This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.
I'm trying to dynamically change the cursor style when the mouse is over an element. The cursor should be either "move" or "default" depending on a boolean returned by a method.
The code is something like this:
$("#elemId").mousemove(function(event) {
if(cursorShouldBeMove()) {
$(this).css({'cursor':'move'});
} else {
$(this).css({'cursor':'default'});
}
}
This code works like a charm in IE8,FF3,Chrome and Safari.
Only Opera fails to handle it correctly.
I'm using Opera 9.6.4
Does anyone have an idea how to solve this?
I prepared a sample for testing;
var cursorStatus = true;
setInterval(function() { cursorStatus = !cursorStatus; }, 500);
function cursorShouldBeMove() {
return cursorStatus;
}
$(function() {
$("#elemId").mousemove(
function(event) {
$(this).css("cursor", cursorShouldBeMove() ? "move" : "default");
}
);
});
If you move your mouse from outside of #elemId to inside of it for a few times you will see that the cursor will change. But if you position your mouse in #elemId and move your mouse, cursor not changes.
The code is very simple. I think it's a bug of Opera.
I tested this code also with;
Firefox 3.5.1 (worked)
Internet Explorer 7 (worked)
Google Chrome 2.0 (worked)
Safari 3.2 (worked)
(Windows versions)
Opera is real funny with cursors. I find that you have to move the mouse over the element twice before it actually works.
Can see here that you need to hover over the Hello World twice to get the cursor to change.
Same issue described here