Jquery不在IE上工作(Advance Slider)

时间:2012-12-09 02:18:35

标签: javascript jquery html css drupal

有人可以协助我让this slider为IE工作。

我收到一条错误消息(仅在IE版本上),指出this file的第1行第1行的jquery文件中有错误消息。

现在,我已经检查了已购买的其他脚本,并且它们可以在IE上运行。然而,我的不断崩溃。当我遵循文档中所述的所有说明时,有人能告诉我它有什么问题。 (适用于Firefox,Chrome,Safari,Opera)

1 个答案:

答案 0 :(得分:1)

这不是一个答案,而是一个有根据的猜测。

如果您可以在某处访问IE9,可以将文档模式设置为IE8或IE7,然后在“脚本”选项卡下,您应该有一个“开始调试”按钮。当它设置为IE8或IE7时,会突出显示d[f]=c语句,您可以通过settinc watch d看到DispHTMLStyle(某些DOM节点的样式对象(如div) (或者其他),fString width,而cNumber,其值为NaN(“不是数字”的缩写“)。你也有一个调用堆栈,在那里我看到(重新格式化)

jQuery(document).ready(function ($) {
    $('#my-slider').advancedSlider({
        width: '100%',
        height: 225,
        skin: 'minimal-small',
        slideButtonsNumber: true,
        effectType: 'scale',
        slicePattern: 'topToBottom',
        sliceDuration: 9000,
        timerAnimationControls: false,
        slideLoop: true,
        slideArrows: false,
        overrideTransition: true,
        shadow: false,
        timerAnimation: false,
        keyboardNavigation: true,
        pauseSlideshowOnHover: true,
        lightbox: false,
        thumbnailLightboxIcon: false,
        preloadNearbyImages: true,
        allowScaleUp: true,
        captionBackgroundOpacity: 0.90,
        slideProperties: {
            0: {
                captionPosition: 'custom',
                captionShowEffect: 'slide',
                captionHeight: 170,
                captionTop: 29,
                captionLeft: 630,
                slideshowDelay: 25000,
                captionBackgroundColor: '#ffffff'
            },
            1: {
                captionPosition: 'custom',
                captionShowEffect: 'slide',
                captionHeight: 170,
                captionTop: 29,
                captionLeft: 630,
                slideshowDelay: 10000,
                captionBackgroundColor: '#ffffff'
            }
        }
    });
});


//@ sourceURL=/inline-13b6e3cdf71.js

注意,您已准备好文档中的此设置! CSS甚至可能尚未加载!

<击> 我怀疑将宽度设置为实际数值可能会解决您的问题。

<击>

除非加载所有样式规则,否则通常不保证html页面上的任何具有宽度。甚至内联样式也可以被否决。因此,使用width 100%可能是荒谬的。我认为这一切都取决于您的浏览器如何解释该值。

您也可以尝试将其从文档ready处理程序移动到窗口load处理程序,看看会发生什么。通过这样做,您还可以手动触发某些jQuery以获取某个对象的宽度,并在您希望保持对样式规则的依赖性时使用该值。当然,缺点是在滑块加载或其他一些工件之前可能会显示一些不需要的内容。

所以,长话短说,尝试通过手动编码该宽度的固定值,然后从那里决定。

编辑:好的,抱歉没用。我可以清楚地看到源是不同的,但它也是同一种错误(语句d[f]=c具有与以前相同类型的对象/值。)

在进一步检查时,我们有了这个语句c.css("width",parseInt(c.data("width")));。局部变量c似乎是一个jQuery对象,它包含一个带有“slide-buttons”类的div。我似乎早些时候回忆起前面提到过的陈述,但并没有像我可能需要的那样深入研究它。所以我的第二个猜测就是它与它们有某种关系(不知何故)。

我也在周围搜索并找到http://codecanyon.net/item/advanced-slider-jquery-xml-slider/132618,我将假设你正在使用的是什么,虽然我没有看到任何明确的文件(我认为这对付费有意义) -for-use插件),我在评论部分看到人们使用width: '100%'之类的值而没有投诉,演示http://bqworks.com/products/advanced-slider/responsive.html确实在IE8浏览器模式下运行jQuery(document).ready(...)初始化滑块。所以我的其他所有理论都很糟糕(对不起!)。但我确实认为滑动按钮需要一个宽度。来自c.css("width",...)行的“美化”代码如下(我的注释是关于我认为正在发生的事情):

c = M.find(".slide-buttons");  //jquery find under M something with class slide buttons
//if the element doesn't have "width data"
//grab values from the style rules using jQuery .css http://api.jquery.com/css/
if (!c.data("width"))
{
    c.data("width", parseInt(c.css("width")));
    c.data("height", parseInt(c.css("height")))
}
//find other things (odd, why is there no period?)
d = c.find("buttons-middle");
f = d.find("buttons-inner");
//directly assign back those same values possibly obtained earlier 
c.css("width", parseInt(c.data("width")));
c.css("height", parseInt(c.data("height")));

当调用该代码时,c.css(“width”)返回“auto”,这显然不能作为数字进行解析。当然,问题变成了,为什么IE8及以下版本会返回类似“auto”的东西,而其他浏览器却没有?答案可能是“这就是旧版IE在这种情况下所做的事情。”

我也注意到该演示也没有使用滑块按钮,因此您可能正在使用此窗口小部件的开发人员可能找不到的场景,并在您获取此窗口小部件的源代码文件时发布了一个干净的解决方案

所以,如果您不想阅读我刚刚添加的所有内容,您可以尝试添加css规则,例如

.advanced-slider .slide-buttons {
    width: 400px;
}

或其他任何有用的东西。