treehouse : what would you like to learn today?
Web Design Web Development iOS Development

event.layerX not working in Webkit

  • This is the error message I get in Chrome developer tools when I try to click on the thumbnails on the bottom right of this page.

    http://goodwynbuilding.com/homes-for-sale/bishop-place-millbrook-communities/124-bishop-court-2/

    "event.layerX and event.layerY are broken and deprecated in WebKit."

    Is this something I need to fix in a javascript file?

    Thanks
  • Hi Aaronheine!

    It's actually not an error, it's a warning message. It's because jQuery 1.6 references the event.layerX and event.layerY. Upgrade to jQuery 1.7 and the warning message will disappear.
  • Thanks.

    Do you know why when I click those thumbnails the full size image is not popping up?
  • I'm not sure what thumbnails you mean. But I do see an error on the page:

    a is undefined
    function Lg(a){a=a.f[1];return a!=j?a:...);function gh(a){a[Dc]&&a[Dc][gc](a)}
    main.js (line 30)

    This error may be causing whatever other functions to stop working.
  • The thumbnails are in the bottom right corner. They are blueprints.

    You see they are links, but they are not working.

    Could the javascript above be saying that those anchor links are not defined?
  • The problem with the thumbnails is in this file. Here is the code:
    jQuery(document).ready(function(){
    jQuery('.imagecol').each(function(){
    var t = jQuery(this).find('.wpcart_gallery .thickbox');
    t.colorbox({
    maxWidth :'90%',
    maxHeight :'90%',
    returnFocus : false
    });

    jQuery(this).children('.thickbox').click(function(e){
    var that = jQuery(this);
    e.preventDefault();
    t.each(function(){
    if (jQuery(this).attr('href') == that.attr('href')) {
    jQuery(this).click();
    return;
    }
    });
    });
    });
    });
    It is only targeting the "thickbox" class inside of the "imagecol" div. Which DOES NOT contain the ".wpcart_gallery .thickbox" link/image.

    Honestly, I'm not sure what the second function is trying to do, but just using code like this should work:
    jQuery(document).ready(function(){
    jQuery('.thickbox').colorbox({
    maxWidth :'90%',
    maxHeight :'90%',
    returnFocus : false
    });
    });
  • I have that code in but looks like there is no change.

    Want to take one more look?
  • Oh, the thumb links have a misspelling... I see "rev" instead of "rel" for the URL.

    And oddly the main image doesn't open when you click on it, so maybe try using a window load instead of a document ready:
    jQuery(window).load(function(){
    jQuery('.thickbox').colorbox({
    maxWidth :'90%',
    maxHeight :'90%',
    returnFocus : false
    });
    });
  • http://www.w3schools.com/TAGS/att_a_rel.asp
    Says "rel" is not used by the browers in any way.

    I tried the window load.
  • Yes, I know, but I think colorbox uses the rel tag.