Develop Reference

Tracking mouse position works only in webkit

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) {
...

Is there a way to get IE 10+ to fire an event when the overflow of an element changes?

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

Overwrite width of an div element with jquery - IE bug?

I have problem with a very simple jquery script - it works with all browsers except IE. Basically I want to change the width of a div element with jquery. IE explorer seems to ignore the change. Here is the complete script (only at certain pages, I want to have that change):
<script>
$( document ).ready(function() {
var a, url = document.URL;;
a = document.createElement( 'a' );
a.href = url;
if (a.pathname == '/index.php/somepage')
$("div.component.message").css("width","700px");
});
</script>
The part that doesn't work is with IE (IE 11/ Edge):
$("div.component.message").css("width","700px");
If I put something else in the if clause like an alert it will be executed. The width change does work in Opera, Chrome oder Firefox.
I solved the problem in the php file, which might be better than doing it with javascript in the first place, still I'd like to know if I simply made a stupid mistake or if it is a problem with IE in general.

window.location.pathname returns the leading slash after the hostname in all versions of IE
The <a> tag is only that returns the path without the slash in IE (and Opera as well).
Check Javascript .pathname IE quirk?

You've written double semi-colon at this
var a, url = document.URL;;
This might be a problem. Correct it.

Safari Scrolling issue with jQuery .remove()

I'm developing a plugin for a website building program, and am building the preview page for it. It's sort of a parallax scrolling plugin and the issue I'm having is that in Safari, when you scroll down to a certain point, it wont allow you to scroll any further. It's fine in firefox and chrome, but I saw the same issue in opera. I've managed to narrow it down to the function that's causing it, but I have no idea why or how to fix it.
When I comment out this function, the page scrolls fine, but it doesn't remove the empty divs like I need it to do:
function removeStuff() {
$('.conP').each(function(){
var divDad = $(this),
divses = $(this).children();
if (divses.hasClass('empty'))
divDad.remove();
});
}
here's the preview page where the issue can be observed:
http://reveriesrefined.com/myftp/dack_stev/
//////////EDIT:
I've simplified the code to this:
$('.conP_%id% > .empty').parent().remove();
however, it's still causing scrolling issues in safari and opera, but not the other browsers.
Any help is VERY VERY appreciated!

Actually, I found the issue already. Somehow even though commenting out the function mentioned above seemed to solve it, it was actually a line of code in another function.
I had this function:
function autoPlay() {
var backDiv = $('#outterLax div:first');
backDiv.hide();
$('.conP').hide();
backDiv.remove();
$('#outterLax').append(backDiv);
backDiv.show();
}
but the line:
$('.conP').hide();
was unnecessary as that was already being accomplished elsewhere in my code.

IE8 breaking on hover of select box's options

Okay, so I have the following code that works fine in all browsers except IE..
$('input[title!=], select[title!=]').mouseenter(function(){
if ($(this).data('focused')!='y') {
$(this).data('t', this.title).data('focused', 'y');
this.title = '';
var pos = $(this).position();
$('body').append('<div id="toolTip" class="round-5 shadow-heavy"><img class="arrow" src="/images/bg/toolTip.png" alt="" />'+($(this).data('t'))+'</div>');
$('#toolTip').css('top',(pos.top+($(this).height()/2)-($('#toolTip').innerHeight()/2))+'px').css('left',(pos.left+($(this).innerWidth())+20)+'px');
}
}).mouseleave(function(){
if ($(this).data('focused')!='n') {
$(this).data('focused', 'n');
this.title = $(this).data('t');
$('#toolTip').remove();
}
}).focus(function(){if($(this).data('focused')!='y'){$(this).trigger('mouseenter');}}).blur(function(){if($(this).data('focused')!='n'){$(this).trigger('mouseleave');}});
Now, in IE if you open the select box and move your mouse over one of the options the box closes. What's causing it is the IE apparently doesn't count the dropdown box of options as part of the select element so it triggers the mouseleave event.
Does anyone know a fix around this?

IE in particular has a very bizarre implementation of <select>, since IE6 (possibly earlier) it was pulled in from winforms...which is also the reason it sits on top of anything but an <iframe> in older versions.
Unfortunately, events on or involving <option> elements are unreliable at best (like you're seeing)...and can't be trusted in IE. You could disable the behavior in IE, but that's about the only "fix" there is.
The all-out alternative is to replace the <select> completely, there are a few jQuery plugins out there that do this, check out this question for options around that.