MouseOver-Event on SVG-Path doesn't fire properly in Firefox - javascript

Edit: It's not only a ExtJs-issue; it doesn't work on pure SVGs with pure Javascript either.
I have an Ext.draw.Sprite that is defined like
Ext.create('Ext.draw.Sprite', {
type : 'path',
stroke : 'lightgrey',
'stroke-width' : 8,
path : path,
listeners : {
mouseover : Handler.clickZoneMouseOver,
mouseout : Handler.clickZoneMouseOut,
click : Handler.clickZoneClick,
mousedown : Handler.clickZoneMouseDown,
mouseup : Handler.clickZoneMouseUp
}
});
The Handler simply says
console.log('mouseover')
On Google Chrome it works perfect and without any problems. Unfortunately, on Firefox the mouseover- and the mouseout-Events are only fired "sometimes". So when I perform 10 mouseovers and mouseouts, the event is fired like once or twice.
I wanted to create a jsfiddle that shows the problem, but there it works without any problems... http://jsfiddle.net/P6Ny3/
So it may be a Problem with the ExtJS-Listener classes...
Does someboy know, what may be the problem in this case?
Thank you for your help!
EDIT:
I managed to create a jsfiddle, that shows exactly my problem!
http://jsfiddle.net/8r327/2/
There is - also in pure javascript - a strange behaviour on firing the events!

I think you are hitting the following FF bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=676001
It's been reported 2 years ago, has multiple duplicates, but as of now have not been fixed yet. :(

Related

TinyMCE 4 replicate clicking of a toolbar icon

I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.

Full Calendar eventDrop firing eventClick in Firefox 15

I don't know what exactly to change about the following code to make it work in Firefox 15:
eventDrop: function (event, dayDelta) {
updateCalendarEvent(event.id, dayDelta);
//Firefox 15 fires eventClick for no good reason???
},
eventClick: function (event) {
alert('event click');
if (event.url) {
alert(event.url);
vUrl = '../Activities/' + event.url;
openActivityAddEditDialog(vUrl, 'Edit Activity');
return false;
}
},
I have done a fair bit of research and this is definitely a BUG. Code works fine in Chrome, Safari, Firefox 14 & even IE - but not Firefox 15. It's been almost 2 months and no fix is in sight.
Someone posted this about a work-around hack here:
http://code.google.com/p/fullcalendar/issues/detail?id=1523
Another similar unanswered Full Calendar Firefox SO question:
Full Calendar event hyperlinks automatically fire in Firefox
You will also have some event data like this:
events: [
{id: '76',title: 'Hot Shave',data: 'Some data',start: new Date(2012,9, 17, 13 , 55),end: new Date(2012,9,17, 13 , 115),allDay: false, url: '<someurl>'}
],
Change the event where it says "url:" to "workingurl:" and update your eventclick code to be:
eventClick: function (event) {
alert('event click');
if (event.workingurl) {
alert(event.workingurl);
vUrl = '../Activities/' + event.workingurl;
openActivityAddEditDialog(vUrl, 'Edit Activity');
return false;
}
},
That should stop FF firing off the click based on the url: property which then no longer exists.
When you include the 'url' attribute in your event JSON FullCalendar will render the event as an an <a> link rather than a <div>.
It looks like Firefox is treating the drag and drop of the <a> as a click and following the URL. This results in the AJAX request getting interrupted and returning status=0 as documented here:
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=Using_XMLHttpRequest#XMLHttpRequests_being_stopped
In my case (Firefox 18) this is resulting in a "You are offline! Please check your network" warning message.
Renaming the 'url' attribute to 'targetUrl' causes the event to be rendered as a <div> solving the problem. You then need to modify your eventClick handler to use the new attribute accordingly.
Even after putting breakpoints for all functions in fullcalendar.js - the error still happens and no full calendar functions are getting fired after eventDrop completes - but the re-direct still happens.
ONLY IN FIREFOX 15!
Also changed to earlier versions of jquery - but no difference.
I have seen some recent posts about Firefox 15 and drop event bugs, but nothing applies to this specifically.
Is anyone out there having this problem?
If not - is there a way to only disable drag & drop for Firefox users?

Object doesn't support this property or method error in IE7 jQuery

IE7 is showing this error message: (no other browser is showing any error except ie7)
Message: Object doesn't support this property or method
Line: 97
Char: 2
And line 97 has this:
$('.megamenu').megaMenuCompleteSet({
The complete javascript code is this:
<script>
$(document).ready(function($){
$('.megamenu').megaMenuCompleteSet({
menu_speed_show : 300, // Time (in milliseconds) to show a drop down
menu_speed_hide : 200, // Time (in milliseconds) to hide a drop down
menu_speed_delay : 200, // Time (in milliseconds) before showing a drop down
menu_effect : 'hover_slide', // Drop down effect, choose between 'hover_fade', 'hover_slide', etc.
menu_click_outside : 1, // Clicks outside the drop down close it (1 = true, 0 = false)
menu_show_onload : 0 // Drop down to show on page load (type the number of the drop down, 0 for none)
});
});
</script>
Can somebody advice me what is wrong with line 97?
Thanks!
UPDATE SOLVED:
i was using the latest one, i fixed it myself, it was all my fault, i had the jquery lib loaded two times with different versions, it was not making any trouble on other browsers except IE7. But after debugging i found the multiple lib loading and removed and there were no errors :)
Thank you everyone!
What version of the MegaMenu script are you using? I can see this in their changelog:
06/23/2012 – Version 2.11
Fixed an issue occurring under IE7 in megamenu.js
I am not sure if this is the issue but you don't need to pass JQuery as an argument since it is global so:
$(document).ready(function($){
should be:
$(document).ready(function(){
This may be the issue since your JQuery plugin appears to be what is not working properly.

FancyBox 1.3.4 jquery issue in IE8 and IE7

I was hoping that someone can help me with this fancybox plugin issue.
Problem is in the IE7 and IE8.
Error - SCRIPT87: Could not get the display property. Invalid argument.
As I noticed scripts break on this line:
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I'm using jquery version 1.4.2
live example and issue on this link:
http://goo.gl/x0rF7
You are adding 3 instances of jQuery when you only need one (ideally the latest version): http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://www.crystalhotel-belgrade.rs/test/plugins/content/simplepopup/jquery-1.4.3.min.js
and an empty call to
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-1.4.2.min.js
.....Also you are loading jQuery UI twice
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js
http://www.crystalhotel-belgrade.rs/test/jomres/javascript/jquery-ui-1.8.5.custom.min.js
IE is more susceptible to this kind of conflicts/errors than other browsers. Try reducing your calls to a single instance of each script and beware of the order (jQuery first and jQuery plugins after)
Additionally, make sure that the DOCTYPE is the very first line of your html document (not preceding spaces or comments), otherwise IE will fail to run in standards mode hence fancybox won't work properly.
Problem fixed.
Not the best way but it working
$(fx).animate({prop: 1}, {
duration : currentOpts.speedIn,
easing : currentOpts.easingIn,
step : _draw,
complete : _finish
});
I removed all animation and just wrote
_finish();
Thanks for the answer JFK, I tryed with that but no

IE7 Ext JS problem: Unspecified JS error on window.close()

I am using Ext JS to make a popup window, here is the code:
function popupImage(term, imageNumber){
if(currentPopupWindow!=null){
currentPopupWindow.close();
}
currentPopupWindow = new Ext.Window({
layout : 'fit',
closeAction :'hide',
plain : true,
constrain : true,
width: 300,
border: false,
html: "Blah blah content"<span onclick=\"currentPopupWindow.close();\">cerrar</span>"
});
currentPopupWindow.show(false, function(){
var el = Ext.get("termimage");
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
currentPopupWindow.anchorTo(Ext.get("dictionarycontainer"), "tl");
}
In firefox this works fine. In IE7 it works, but always produces a javascript error saying "unspecified error".
What am I doing wrong?
EDIT
Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
This is the solution, dumb as it is:
Have the same window creation, then instead of the calls to show and anchor to:
currentPopupWindow.render(document.body);
currentPopupWindow.alignTo(diccon, "tl", [40, 80]);
currentPopupWindow.show(false, function() {
var el = Ext.get(termim);
currentPopupWindow.setWidth(el.getWidth(true)+150);
});
A quick Google search tells me that you're not the only extJS user that is experiencing this. (See here and here and here for three examples.) Best would be to post in their forums so they can either fix their bug or work around an IE7 bug, whichever is the case.
This looks like it has something to do with it, not that I understand..
http://weblogs.asp.net/rajbk/archive/2006/11/29/ie-6-7-unspecified-error-when-accessing-offsetparent-javascript.aspx
qui is right. The problem lies in anchorTo. Use alignTo and the exception goes away.
Sorry qui, tried to "up" your response but were not able to. I don't have any reputation.:)
Athele
To your second question: Removing the anchorTo line removes the error. I would still like to anchor to though so this isn't a great solution!
Use alignTo and monitor scroll and mousewheel event and update the position accordingly and it is the same as anchorTo. That is the workaround I have found.
Athele
Try to add:
shim: false
to popup window parameter list.

Categories

Resources