6
Vote

jQuery 1.4.2

description

Using jQuery 1.4.2 i get this error
 
$(".ribbon-list div ul:visible").parent().offset() is null
[Break on this error] var outsideX = e.pageX...t div ul:visible').parent().width();
 
Any thoughts?

file attachments

comments

sathish331977 wrote Jul 22, 2010 at 9:23 AM

I used ribbon version1 with Jquery1.4.2. I too got the same error.
Any fix avialable?

wrote Aug 6, 2010 at 7:38 AM

arod wrote Aug 11, 2010 at 10:47 PM

yeah, me too I get same error !!

error: $(".ribbon-list div ul:visible").parent().offset() is null

I just set the 'var outsideX' to false... i think it is working now... I don't know for how long...

gryg wrote Aug 28, 2010 at 1:59 PM

Have the same problem, If someone need no-error fix, this is my simple solution, but I need to check what was changed in jQuery 1.4.2 so we get error.
$('.ribbon-list div').parents().click(function(e) {
            if($('.ribbon-list div ul:visible').parent().offset() != null){
                var outsideX = e.pageX < $('.ribbon-list div ul:visible').parent().offset().left || e.pageX > $('.ribbon-list div ul:visible').parent().offset().left + $('.ribbon-list div ul:visible').parent().width();
                var outsideY = e.pageY < $('.ribbon-list div ul:visible').parent().offset().top || e.pageY > $('.ribbon-list div ul:visible').parent().offset().top + $('.ribbon-list div ul:visible').parent().height();

                if (outsideX || outsideY) {
                    $('.ribbon-list div ul:visible').each(function() {
                        $(this).fadeOut('fast');
                    });
                    $('.ribbon-list div').css('background-image', '');
                }
            }
        });

fzeidan wrote Sep 4, 2010 at 8:38 PM

Replace the following:

$('.ribbon-list div').parents().click(function(e) {
var outsideX = e.pageX < $('.ribbon-list div ul:visible').parent().offset().left || e.pageX > $('.ribbon-list div ul:visible').parent().offset().left + $('.ribbon-list div ul:visible').parent().width();
var outsideY = e.pageY < $('.ribbon-list div ul:visible').parent().offset().top || e.pageY > $('.ribbon-list div ul:visible').parent().offset().top + $('.ribbon-list div ul:visible').parent().height();

if (outsideX || outsideY) {
$('.ribbon-list div ul:visible').each(function() {
$(this).fadeOut('fast');
});
$('.ribbon-list div').css('background-image', '');
}
});

with

$('.ribbon-list div').parents().click(function(e) {
          var inX = true;            
          if ($('.ribbon-list div ul').has(':visible').length > 0) {
            var p = $('.ribbon-list div ul').has(':visible').parent(); 
            var outsideX = e.pageX < p.offset().left || e.pageX > p.offset().left + p.width();
            var outsideY = e.pageY < p.offset().top  || e.pageY > p.offset().top  + p.height();

            if (outsideX || outsideY)
              inX = true;
            else
              inX = false;

         }
            if (inX) {
                $('.ribbon-list div ul:visible').each(function() {
                    $(this).fadeOut('fast');
                });
                $('.ribbon-list div').css('background-image', '');
            }
        });

dTardif wrote Oct 19, 2010 at 8:51 PM

I'm trying to get the robbon working with JQ 1.4.2 and IE. It works fine with Chrome and Firefox, however I've tried it with IE 8 and IE 9 and I get the same behavior. It does not render at top of page. It remains displayed as a vertical list in the web page with no errors being generated. I initially though that I may be doing something in the code that IE didn't like so I copied locally the online demo and used JQ 1.3.2 and it renders exactly as online. However, if I specify JQ 1.4.2 instead of 1.3.2 in the HTML Header (and provide framework 1.4.2), the above described behaviour manfiests itself.

dTardif wrote Oct 20, 2010 at 12:17 PM

I’ve been trying to integrate jQuery 1.4.2 with Internet Explorer (8 or 9) with no success. Simply put, the ribbon simply does not render, it remains in list form on the screen. However it work perfectly in Firefox and Chrome. I initially thought that perhaps my HTML code for the list was at fault so I copied the code from the demo page and pasted it locally and it works fine with jQuery 1.3.2, however, when I use the 1.4.2 framework, it does not render.

Has anyone else experience the same thing?

Thanks,

Dan

Coolhand84 wrote Oct 20, 2010 at 11:33 PM

To fix the rendering problem change this line(22):
       $('head').append('<link href="ribbon/themes/' + settings.theme + '/ribbon.css" rel="stylesheet" type="text/css" />" />');
to:
       $('head').append('<link href="ribbon/themes/' + settings.theme + '/ribbon.css" rel="stylesheet" type="text/css" />');
There is an extra " /> causing the script to fail to create the link to the css file for the theme.


Also here is how I fixed the $(".ribbon-list div ul:visible").parent().offset() is null error:
$('.ribbon-list div').parents().click(function(e) {
var $ulParent = $('.ribbon-list div ul:visible').parent();
if($ulParent.length) {
    var outsideX = e.pageX < $ulParent.offset().left || e.pageX > $ulParent.offset().left + $ulParent.width(),
    outsideY = e.pageY < $ulParent.offset().top || e.pageY > $ulParent.offset().top + $ulParent.height();

    if (outsideX || outsideY) {
        $('.ribbon-list div ul:visible').each(function() {
            $(this).fadeOut('fast');
        });
        $('.ribbon-list div').css('background-image', '');
    }
}
});

dTardif wrote Oct 21, 2010 at 1:30 PM

Thank you for the rapid response.

I sincerely hopped that your suggestions would correct my issues but they unfortunately don’t. I applied both of your code snippets and the result remains the same in IE9 (didn’t try it in IE8). The ribbon still works very well in Firefox and Chrome with your suggested changes.

I added alerts in a few strategic places in the jQuery.ribbon code to see if it executed until the end and it does, even with the extra />" at line 22.

Would you have any other suggestions?

wrote Oct 22, 2010 at 1:38 AM

Coolhand84 wrote Oct 22, 2010 at 1:38 AM

I tested in IE9 with jQuery 1.4.2 and 1.4.3. I noticed it does still fail to render if IE9 is using "IE9 Standards" mode. I haven't taken the time to look into why. The work around is to force IE9 to use "IE8 Standards" mode. Simply place the following tag in your html head section.
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
If you already have that in your document, check to see that the path in the css link that the script is adding for the theme is indeed pointing to the css file. (Use the F12 developer tools, you may need to hit the refresh button on the html tab to capture the changes that the script has made to the html.)

Another possibility is that the browser has cached a version of the ribbon script that doesn't have the corrections. I am assuming this is not the case because you are seeing your alerts.

Attached a screen shot so you can see that it is working for me.

dTardif wrote Oct 22, 2010 at 12:20 PM

Thank you again Coolhand84 for coming back with an answer so rapidly.

I did implement the meta tag for IE8 and the ribbon renders perfectly. However, my web application uses the HTML5 canvas element which no longer works. I guess that's the web development dilemma, you fix something for one browser and you break something on the other.

At least there is a glimmer of hope; I'm not the only one with the problem. You or someone else will eventually find a solution.

wrote Oct 26, 2010 at 2:10 PM

Nishi3000 wrote Oct 28, 2010 at 9:27 AM

Your fixes introduce another bug. You can notice it if you use your version of JS on the demo - click "Copy", "Paste"... they are highlighted forever...
To fix it, another change is necessary:

*** replace ***
        $('.ribbon-list div').click(function(e) {
            var elwidth = $(this).parent().width();
            var insideX = e.pageX > $(this).offset().left && e.pageX < $(this).offset().left + $(this).width();
            var insideY = e.pageY > $(this).offset().top && e.pageY < $(this).offset().top + $(this).height();

            $('.ribbon-list div ul').fadeOut('fast');

            if (insideX && insideY) {
                $(this).attr('style', 'background-image: ' + $(this).css('background-image'));

                $(this).parent().width(elwidth);

                $(this).children('ul').width(elwidth - 4);
                $(this).children('ul').fadeIn('fast');
            }
        });

*** with ***
        $('.ribbon-list div').click(function(e) {
            $('.ribbon-list div ul').fadeOut('fast');

            var t = $(this);
            if(t.children('ul').length) {
                var elwidth = t.parent().width();
                var insideX = e.pageX > t.offset().left && e.pageX < t.offset().left + t.width();
                var insideY = e.pageY > t.offset().top && e.pageY < t.offset().top + t.height();

                if(insideX && insideY) {
                    t.attr('style', 'background-image: ' + t.css('background-image'));

                    t.parent().width(elwidth);

                    t.children('ul').width(elwidth - 4);
                    t.children('ul').fadeIn('fast');
                }
            }
        });

wrote Dec 6, 2010 at 12:46 PM

wrote Jul 12, 2011 at 9:25 PM

rex2002xp wrote Jul 16, 2012 at 2:08 PM

Thank fzeidan,
i used jquery 1.5.1 and 1.7.2 and your change work perfect.

wrote Feb 14, 2013 at 8:38 PM