search

eugenii / jqueryrotate

Automatically exported from code.google.com/p/jqueryrotate
1 stars 0 forks source link

SCRIPT5007: Error #98

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Run this code in IE10 whilst emulating IE8 with IE8 standards.
2. 1st click will work, 2nd click will return this error: SCRIPT5007: Unable to 
get property 'insertBefore' of undefined or null reference: jQueryRotate.js 
line 89 char 11
3.

What is the expected output? What do you see instead?
Function is meant to act like an accordian, as for the jQueryrotate, it's 
simply has to rotate an arrow To and from 90 degrees.  On the first click this 
works perfectly like it does in Chrome and FF but on IE every click after the 
first will just generate another error like shown above.

What version of the product are you using? On what operating system?
2.3 on Win7 64bit

Please provide any additional information below.

Here's the code section. It fails on the first if statement, when it steps in 
and tries to execute the .rotate.  

  var previousArrow;
  var arrowAngle;
  $(document).on("click", '.areatitle', function () {
            if (arrowAngle === 90) {
                $(previousArrow).rotate({ animateTo: 0, duration: 200 });
            }
            var nextContent = $(this).next(".contentarea");
            previousArrow = $(this).children(".areaTitleArrow");
            var displayState = $(nextContent).css("display");
            if (displayState !== 'block') {
                $(".contentarea").hide("short").delay(400);
                $(nextContent).slideToggle("short");
                $(previousArrow).rotate({ animateTo: 90, duration: 200 });
                arrowAngle = 90;
            }
            else {
                $(this).next(".contentarea").slideToggle("short");
                $(previousArrow).rotate({ animateTo: 0, duration: 200 });
                arrowAngle = 0;
            }
        });

I have no idea why it's doing this and whether it's something I'm doing wrong 
for IE8 or if it genuinely is a compatibility issue with  jqueryrotate, but I 
can't find anything on it I'm afraid!

Original issue reported on code.google.com by Scouser3...@gmail.com on 17 Jul 2013 at 8:29

GoogleCodeExporter commented 9 years ago 
I would help me quite much if you could create a http://jsfiddle.net test case 
for this issue. There might be plenty of issues that are not realy related to 
your code at all so simply having a test case would help me alot..

Original comment by wil...@gmail.com on 17 Jul 2013 at 9:06

GoogleCodeExporter commented 9 years ago 
Hi there, thanks for responding so quickly!

Here's a very very basic fiddle: http://jsfiddle.net/tsNU6/ The code works 
there on up to date/ modern browsers, but I can't even get fiddle to load 
properly in simulated IE8

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 9:25

GoogleCodeExporter commented 9 years ago 
Pretty weird I just run this code:

http://jsfiddle.net/tsNU6/embedded/result/

On a IE 10 simulating IE8 (IE8 standards) and its working fine hmm... Lemme 
check IE7 then.

Original comment by wil...@gmail.com on 17 Jul 2013 at 9:52

GoogleCodeExporter commented 9 years ago 
On a IE7 on a Vista virtualbox it's working smoothless too :/ hmm

Original comment by wil...@gmail.com on 17 Jul 2013 at 9:54

GoogleCodeExporter commented 9 years ago 
This is what's confusing the hell out of me!  It works perfectly in IE9+, 
Chrome and Firefox (haven't tested Safari or Opera).  

But in IE8 and below, the second click generates and error in the library on 
this line: img.parentNode.insertBefore(this._rootObj,img);

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 9:57

GoogleCodeExporter commented 9 years ago 
Can you confirm that you can get with your IE8 on this link and still see 
problem?:

http://jsfiddle.net/tsNU6/embedded/result/

Cause on mine IE7 it works fine.

Original comment by wil...@gmail.com on 17 Jul 2013 at 9:59

GoogleCodeExporter commented 9 years ago 
Yep in IE8 simulated that's working.  It's the exact same code block that's 
throwing the 5007 error.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 10:07

GoogleCodeExporter commented 9 years ago 
That means test case doesn't cover the part that breaks IE8 :/ Do you maybe use 
most recent version of jQueryRotate? I did some small changes that might fix 
the issue you have.

Original comment by wil...@gmail.com on 17 Jul 2013 at 10:09

GoogleCodeExporter commented 9 years ago 
I grabbed the v2.3 yesterday after reading the previous reported issue to try 
and see if that would resolve it.  Having no luck so far, the fact the simple 
fiddle works when the exact same code doesn't in my project is throwing me into 
a tailspin!

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 10:15

GoogleCodeExporter commented 9 years ago 
Might be that content around is dynamically changed by script or something? Is 
image being created in HTML or dynamically added from javascript?

Original comment by wil...@gmail.com on 17 Jul 2013 at 10:18

GoogleCodeExporter commented 9 years ago 
Nope, image is a static file hosted on the site.  I can't see anything I've 
missed double quotes on and when I evaluate the previous arrow on the second 
loop, I get the right value, so it's keeping context!

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 10:24

GoogleCodeExporter commented 9 years ago 
Well error code in ie says that there is no parentNode for img, or img is 
null(undefined), hard to say what might causing it :/

Original comment by wil...@gmail.com on 17 Jul 2013 at 10:28

GoogleCodeExporter commented 9 years ago 
Ok a break through of sorts, if I remove:

   if (arrowAngle === 90) {
       $(previousArrow).rotate({ animateTo: 0, duration: 200 });
   };

Everything else works, but ofc now the previous arrow won't rotate back.  The 
only thing I can think of is that somehow it's not keeping context of the 
previousArrow variable in between events.  Let me update the fiddle.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 10:50

GoogleCodeExporter commented 9 years ago 
http://jsfiddle.net/tsNU6/1/
http://jsfiddle.net/tsNU6/1/embedded/result/ 

If you run that in IE8 it should break and give you the error I'm getting.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 10:57

GoogleCodeExporter commented 9 years ago 
Can you check if this solution works for you? 

http://jsfiddle.net/tsNU6/2/embedded/result/

Original comment by wil...@gmail.com on 17 Jul 2013 at 11:07

GoogleCodeExporter commented 9 years ago 
Ok i figure it out. You have "click" event bound to a document, so if someone 
click outside of a element that contains arrow, the previousArrow might be set 
to null. In that case next time you tries to rotate it will fail. Just make 
sure that previousArrow is not null before calling rotation, or set it only if 
$(this).children(".areaTitleArrow") is not null.

Original comment by wil...@gmail.com on 17 Jul 2013 at 11:11

GoogleCodeExporter commented 9 years ago

Original comment by wil...@gmail.com on 17 Jul 2013 at 11:12

GoogleCodeExporter commented 9 years ago 
Yes that works without any errors, same on IE7.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 11:12

GoogleCodeExporter commented 9 years ago 
Ahhhh I'm such a fool.  Thanks a lot and sorry for wasting your time!

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 11:13

GoogleCodeExporter commented 9 years ago 
Hi there, 
Sorry to bother you again, but that's not what's happening with my code, the 
Document.on('click', 'areatitle', function(){}), limits it to only firing when 
the .areatitle has been clicked.  I don't know why it seems to want to lose 
scope, but it never overwrites it to null when I click on something else, then 
evaluating it before it hit's that "problem" line shows that it's the right 
object?  

Checking it against null doesn't change anything either, I've also switched it 
up to just an (areatitle).click() event and it's the same error.

In your code sample you added $(".areaTitleArrow").rotate(0); to the top of my 
fiddle.  With my code this allows it to work in IE8, but it converts all the 
<img> to <span>. 

Sorry to bother you again, but I've just got no idea how this is going wrong!

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 12:09

GoogleCodeExporter commented 9 years ago 
Maybe try this version:

http://jsfiddle.net/dhAp4/1/

Original comment by wil...@gmail.com on 17 Jul 2013 at 12:12

GoogleCodeExporter commented 9 years ago 
Hi,

That also works in fiddle but if you remove the $(".areaTitleArrow").rotate(0); 
the whole thing breaks. With it in however all my imgs become spans in my code 
and don't display the arrow.  

I can't seem to inspect the result element in IE8 simulated to see what it's 
out putting those as either.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 12:34

GoogleCodeExporter commented 9 years ago 
If its working with .rotate(0) for you then leave it - it make sure that item 
is prepared for rotation in IE (because first time it rotates it changes to a 
VML object)

Original comment by wil...@gmail.com on 17 Jul 2013 at 12:38

GoogleCodeExporter commented 9 years ago 
Apologies, I don't think I explained myself very cleary!

Here's what it converts to: <SPAN class=areaTitleArrow id=clientArrow 
style="HEIGHT: 0px; POSITION: relative; DISPLAY: inline-block; WIDTH: 
0px"><?xml:namespace prefix = "rvml" ns = "urn:schemas-microsoft-com:vml" 
/><rvml:group class=rvml style="HEIGHT: 0px; POSITION: absolute; LEFT: 0px; 
TOP: 0px; WIDTH: 0px; rotation: 0deg" coordsize = "-1,-1"><rvml:image 
class=rvml style="HEIGHT: 0px; POSITION: absolute; LEFT: 0px; TOP: 0px; WIDTH: 
0px" src = "http://localhost:58043/Content/images/Arrow.png" coordsize = 
"21600,21600"></rvml:image></rvml:group></SPAN>

That image link is correct and does return the image if I go to the URL, but 
it's setting the size to 0x0 pixels. I've tried re-sizing it in the page but 
there's no image.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 12:45

GoogleCodeExporter commented 9 years ago 
Its fine - this is how this plugin works. As a IE fallback the <IMG> element is 
converted to <VML:image> object. Nothing unusuall here :)

Original comment by wil...@gmail.com on 17 Jul 2013 at 12:48

GoogleCodeExporter commented 9 years ago 
Yes but it's not displaying the converted image? All the HTML structure is 
there, the link is there in the structure.  But it's converting it to a 0x0 
size.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 12:52

GoogleCodeExporter commented 9 years ago 
That indeed a weird result - might be because ... oh.. If its display:none when 
you call rotate it might get width 0 :(( Its a issue that i think i will need 
to fix somehow by adding image somewhere else. Oouh maybe thats the problem you 
have now?

Original comment by wil...@gmail.com on 17 Jul 2013 at 1:04

GoogleCodeExporter commented 9 years ago 
Just went into the .areaTitleArrow css and forced display: inline-block;
It's made no difference unfortunately, it still hides it! I'm afraid I've got 
no idea why it's doing that as the only bit of 'my' code to call the conversion 
is the initial ('areaTitleArrow').rotate(0);

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:13

GoogleCodeExporter commented 9 years ago 
Hmm but its on $document.ready right?

Original comment by wil...@gmail.com on 17 Jul 2013 at 1:15

GoogleCodeExporter commented 9 years ago 
Yes it's inside the $(document).ready( function() { ...

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:17

GoogleCodeExporter commented 9 years ago 
Can you reproduce it in a jsfiddle so I can take look ?

Original comment by wil...@gmail.com on 17 Jul 2013 at 1:19

GoogleCodeExporter commented 9 years ago 
I'm afraid not! http://jsfiddle.net/dhAp4/1 is the right code (and works in 
fiddle), I've even switched the source of the image to imgur in my code and 
it's still blank.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:34

GoogleCodeExporter commented 9 years ago 
Oh... Maybe there is something in CSS? Hard to say without seeing code where it 
breaks :(

Original comment by wil...@gmail.com on 17 Jul 2013 at 1:36

GoogleCodeExporter commented 9 years ago 
I edited the live html to set all the Height and widths of the containers 
around one arrow to 10px and here was the result! http://i.imgur.com/W1O2wSx.jpg

Here's the html it generated after my editing (just replaced 0 for 10): 

<SPAN style="DISPLAY: inline-block"></SPAN><SPAN style="DISPLAY: 
inline-block"></SPAN><SPAN style="DISPLAY: inline-block"></SPAN><SPAN 
style="DISPLAY: inline-block"></SPAN><SPAN class=areaTitleArrow id=clientArrow 
style="HEIGHT: 10px; POSITION: relative; DISPLAY: inline-block; WIDTH: 10px" 
jQuery191002801449916440435="288"><?xml:namespace prefix = "rvml" ns = 
"urn:schemas-microsoft-com:vml" /><rvml:group class=rvml style="HEIGHT: 10px; 
POSITION: absolute; LEFT: 0px; TOP: 0px; WIDTH: 10px; rotation: 90deg" 
coordsize = "-1,-1"><rvml:image class=rvml style="HEIGHT: 10px; POSITION: 
absolute; LEFT: 0px; TOP: 0px; WIDTH: 10px" src = 
"http://localhost:58043/Content/images/Arrow.png" coordsize = 
"21600,21600"></rvml:image></rvml:group></SPAN><SPAN>

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:40

GoogleCodeExporter commented 9 years ago 
Just for comparison, here's how it looks in IE9+ (and Chrome/FF) without me 
having to tweak any live html, http://i.imgur.com/meHZtmX.jpg

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:42

GoogleCodeExporter commented 9 years ago 
To make it clear, when you add $(".areaTitleArrow").rotate(0);  images 
dissapear, and when you remove that line there is something wrong with code 
execution, right?

Original comment by wil...@gmail.com on 17 Jul 2013 at 1:44

GoogleCodeExporter commented 9 years ago 
Correct.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:45

GoogleCodeExporter commented 9 years ago 
Ok so please then remove the code, and let's back to our previous issue then. 
You're using the corrected code i gave you that checks for previousArrow: 
http://jsfiddle.net/dhAp4/1/   ?

Original comment by wil...@gmail.com on 17 Jul 2013 at 1:48

GoogleCodeExporter commented 9 years ago 
Yes, that is what I'm currently using.

However, the previousArrow null checks aren't required - 
http://jsfiddle.net/dhAp4/4/ this also works in IE8 as long as that 
$(".areaTitleArrow").rotate(0) is in the document.ready it will work.

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 1:53

GoogleCodeExporter commented 9 years ago 
PreviousArrow check is required as long as it can be null, you just cant rotate 
$(null).rotate(). Anyway i'm out of ideas what else might be wrong. Especially 
that I dont recall any problems when calling element.rotate(0) on document 
ready on IE8 at all (only issue might be that the image is not visible in that 
moment, but I guess its not the case here)

Original comment by wil...@gmail.com on 17 Jul 2013 at 2:08

GoogleCodeExporter commented 9 years ago 
I can see why you might need it, but the first click on an areatitle skips over 
the first if statement and assigns a value to previousArrow.  

The value of previousArrow then only changes when another .areatitle is 
clicked. Clicking anything else doesn't fire this event so previousArrow isn't 
overwritten.

It might be that I'll just have to leave it as is, my semi-accordian works in 
IE8 and now 7, there's just no image actually being rotated!

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 2:13

GoogleCodeExporter commented 9 years ago 
YEa but there should be image! Pretty weird bug, let me know if you could give 
me some link where I can see real problem if possible sometime now or in future.

Original comment by wil...@gmail.com on 17 Jul 2013 at 2:18

GoogleCodeExporter commented 9 years ago 
I believe my boss intends for it to go up behind a login screen, but I'll see 
what I can do once it's not on our internal network!

Thanks a lot for the help, at least the accordion is working again now in IE8 :D

Original comment by Scouser3...@gmail.com on 17 Jul 2013 at 2:25

GoogleCodeExporter commented 9 years ago 
Sure, I understand.

Original comment by wil...@gmail.com on 17 Jul 2013 at 2:26

GoogleCodeExporter commented 9 years ago 
it seems like this was never actually resolved. . . I was getting this same 
error in IE9 running on 8;  I think the reason for it is that however you are 
targeting the item is getting all jacked up.  Jacked up being a technical term. 
For instance. if you are targeting it like this var myObject = $(".object");  
myObject.rotate(45);  Well then after the rotation has been applied, in ie8, 
your var myObject, no longer targets what is there because it cloned, was 
replaced with a bunch of other stuff and then put back.  After that you need to 
redo your variable with myObject = $(".object");  every single time you want to 
use it.  So I'm doing this in a mouseover event where each tmie I do the 
mouseover event I retarget my object that I'm rotating, works every time with 
no errors.

Original comment by ChrisDr...@gmail.com on 15 Sep 2014 at 9:01