Advanced Search

Results 1 to 6 of 6

Thread: Prototype, Scriptaculous, and IE6 and IE7 bug

  1. #1
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Prototype, Scriptaculous, and IE6 and IE7 bug

    I've been vexing myself trying to figure out what's going on here for the last few hours.

    I'm trying to get the site http://www.bellezzasi.com set up to have a sliding menu so that the menu is always present when the user scrolls down or up. The script is only active on the following page (the site is live, so we can only do this on a test page until everything is working):
    http://www.bellezzasi.com/index.php?...d=49&Itemid=54

    At first I tried using MooTools with Fx.Tween to change the position as the user scrolled; however, MooTools was far to jerky and glitchy to use. Prototype/Scriptaculous with Effect.Move is far more stable in terms of appearance, so I implemented the latest version of both (1.6.0.2/1.8.1).

    However, IE6 and IE7 both give me the JavaScript error "object doesn't support this property or method", line 380, char 5 (everything works for Firefox Mac/Win and Safari for Mac - no errors).

    The code being reported is in effects.js and reads:
    Code:
    Effect.Move = Class.create(Effect.Base, {
      initialize: function(element) {
        this.element = $(element);
        if (!this.element) throw(Effect._elementDoesNotExistError);
        var options = Object.extend({
          x:    0,
          y:    0,
          mode: 'relative'
        }, arguments[1] || { });
        this.start(options);
      },
      setup: function() {
        this.element.makePositioned();
        this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
        this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
        if (this.options.mode == 'absolute') {
          this.options.x = this.options.x - this.originalLeft;
          this.options.y = this.options.y - this.originalTop;
        }
      },
      update: function(position) {
        this.element.setStyle({
          left: (this.options.x  * position + this.originalLeft).round() + 'px',
          top:  (this.options.y  * position + this.originalTop).round()  + 'px'
        });
      }
    });
    Line 380 is this.element.makePositioned(); (yes, I've accounted for Microsoft's stupidity about line numbers; see below). As best I can tell however, the problem is not actually with makePositioned but with getStyle and setStyle, because if I stop the setup function from running (comment it out), the update function starts to have errors next, and it also uses setStyle.

    Has anybody else had this issue? I'm not really sure what to do, I've tried just about everything.

    Things I've tried/Notes:
    1) Removing MooTools include from Joomla/gallery component. Didn't help.
    2) Changing $(element) to document.getElementById(element), in case there was $ conflict between MooTools and P/ST.
    3) Current version of ProtoSafe to make sure there weren't any MooTools/Prototype&ST conflicts. Didn't help a lick.
    4) Some of you might observe that the CSS position attribute for the 'left' div is not set in the IE6 CSS, and might think that this is causing the issue. However, position is set to absolute in IE7, so if this were the problem, IE7 would not have the issue; it does, however.
    5) For the IE line number for the error, yes, I did account for its botched determination of line numbers. I tested around the general area of the line number it gave, adding a new line before the error spot until I found that the line number was the original one reported when I was adding the new line.

  2. #2
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    aside from the easing effect which makes it pause breifly, it slides smoothly on my end. I did however, notice that there must be something attached to the mousewheel scroll which is making it look "jumpy", I noticed that the easing would stop and start the same amount of times that I scrolled the mouse wheel.

  3. #3
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nyne Lyvez View Post
    aside from the easing effect which makes it pause breifly, it slides smoothly on my end. I did however, notice that there must be something attached to the mousewheel scroll which is making it look "jumpy", I noticed that the easing would stop and start the same amount of times that I scrolled the mouse wheel.
    It looks smooth because I'm using Prototype/Scriptaculous, not MooTools. With MooTools it looks horrible.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    You have to work back to the actual cause to know it for sure. To do that it helps to know how objects behave. If you really do have the correct line, you can do this:

    Code:
    if(this.element.makePositioned)
    this.element.makePositioned();
    That will either fix it, or cause another error that can be filtered out in a similar, or in some other fashion until the real root cause is found.

    The makePositioned(); function may have errors for IE, or it may just be there cannot be (in IE) a prototype function assigned to the element in the way that the code is trying to do.

    Or using the test may get over that hump, but then a new error a line or so later will be at issue because what the code expected to be done wasn't. Then an alternative way of doing it must be found.

    Generally (but not always) these sorts of problems occur when the script library isn't being used as intended. In these cases, often another way can be found using the same library, or the library can be patched. Either way, it is at least a bit of trial and error to resolve, often more.

    I'll have a look at your demo and see if anything jumps out at me. If it does, I'll get back to you.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    You have to work back to the actual cause to know it for sure. To do that it helps to know how objects behave. If you really do have the correct line, you can do this:

    Code:
    if(this.element.makePositioned)
    this.element.makePositioned();
    That will either fix it, or cause another error that can be filtered out in a similar, or in some other fashion until the real root cause is found.

    The makePositioned(); function may have errors for IE, or it may just be there cannot be (in IE) a prototype function assigned to the element in the way that the code is trying to do.

    Or using the test may get over that hump, but then a new error a line or so later will be at issue because what the code expected to be done wasn't. Then an alternative way of doing it must be found.

    Generally (but not always) these sorts of problems occur when the script library isn't being used as intended. In these cases, often another way can be found using the same library, or the library can be patched. Either way, it is at least a bit of trial and error to resolve, often more.

    I'll have a look at your demo and see if anything jumps out at me. If it does, I'll get back to you.
    Hey John,
    Thanks for your suggestion. I hadn't thought to try that to make sure that was the issue. I did, and the makePositioned is the issue, but issues come up after that with getStyle and setStyle, like I suggested, meaning that the main problem with makePositioned also is probably with getStyle/setStyle, since it uses one or both of those (can't remember). Thus, my issue is with getStyle and setStyle and I'm wondering if anybody else knows more about other experiences that people might have had with IE6/IE7 and getStyle/setStyle in Prototype.

    I used the conditional test to remove all the problem spots so that no JavaScript errors were reported (with makePositioned, getStyle, and setStyle within that same block of code that I suggested) and although it now reports no errors, it also does not work...

    Anybody know anything about this issue? Thanks for any help or clarification you guys can provide!

    Regards,
    John

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,687
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Well, like I said, it can give rise to other issues. But that is at least one way to go about troubleshooting (the) code. This method requires a fair amount of experience and knowledge as regards scripting in order to be successful. Without (and depending upon how poor the code is to begin with, even with) that, one can simply end up with code that doesn't give errors, but that also doesn't work.

    In many cases one must move beyond simply testing for and rejecting unsupported methods to get the desired results. One needs to determine what was intended and find a way to supply that.

    What often happens is that the code 'as is' will be fine in most run throughs except the first (not fully initialized, and/or a value out of - below - range), last (out of - above - range, and/or no longer initialized), and/or certain intermediate (just doesn't fully satisfy the criteria expected, and/or out of range) ones. If that is the case one must determine what distinguishes the failed attempts from the successful ones and find a way to deal with it.

    Other times the code is simply flawed as regards the browser in question, in which case an overall workaround needs to be found for that browser.

    Sometimes it is a bit of both.

    Or it can be much simpler - the working browser(s) are error correcting your syntax that invokes the library's method(s). This often happens in IE where a comma or semicolon is either not included where required, or is added where technically it should not be. Recent versions of FF, Opera, perhaps others have been error correcting javascript in some situations like this, leaving poor old compliant IE 'holding the bag' for simply following the rules. Other error correction issues may be involved.

    What does your code (the code you wrote) to invoke the code that appears to give the error look like?
    Last edited by jscheuer1; 09-14-2008 at 06:09 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •