仅在Safari中损坏的图库导航

时间:2011-12-20 16:10:26

标签: jquery navigation focus gallery

我希望有人能帮助我解决我遇到的一个奇怪的浏览器问题。我有一个相当简单的画廊运行jQuery工具库,我修改(黑客)以获得垂直滚动的视差效果。这是我正在进行的工作:http://6ft6design.com/_pt02/

现在我承认自己是一个完全编程的菜鸟 - 我所做的就是寻找活动部分,然后敲打它们直到我得到我想要的东西。在这种情况下,事情进展顺利:我在Firefox,Opera,Chrome,IE甚至Safari的移动浏览器中进行了测试。它们都完美无缺。问题是,桌面版的Safari(Mac v5.0.5)没有,我无法弄清楚原因。具体来说,导航似乎没有完全实现。虽然我仍然可以在画廊中垂直移动,但是水平移动没有被激活(尽管如果在垂直滚动发生时你按下左或右键,它有时会在冻结之前水平移动一点)。

从我收集的内容来看,这是焦点命令的一个问题,但细微差别超出了我的范围。来自互联网的其他潜在解决方案是将脚本调用移动到html文档的末尾(nope)并从$(document).ready更改为window.onload(也没有)。

以下代码。任何帮助将不胜感激!

$(document).ready(function() {
    $("#stage").scrollable({
        vertical: true,
        speed: 400,
        keyboard: 'static',
        touch: false,
        onSeek: function(event, i) {
            horizontal.eq(i).data("scrollable").focus();
        }
    }).navigator("#main_nav");
    var horizontal = $(".scrollable").scrollable({ 
        circular: false, 
        speed: 400, 
        next: ".scrollable", 
    }).navigator(".sub_nav");
    horizontal.eq(0).data("scrollable").focus();
});

$(function() {
    $("#stageBG").scrollable({
        vertical: true,
        speed: 600,
        touch: false,
        keyboard: 'static',
    }).navigator("#main_nav");
});

2 个答案:

答案 0 :(得分:1)

  

具体来说,导航似乎没有完全实现。   虽然我仍然可以垂直移动通过​​画廊,水平   移动未被激活(尽管你向左或向右击中   当垂直滚动发生时,它有时会移动一个   冻结前水平位。)

1)在Safari中,当我用鼠标左/右击时,我收到一条弹出消息,告诉我必须使用左/右键盘箭头。所以你的“bug”似乎正是它“应该”工作的方式。这就像你忽略了在jQuery Tools中选择的一些晦涩难懂的选项,缺少一些jQuery Tools所需的标记,或者是jQuery Tools的另一个问题。

2)其次,您正在使用Flowplayer的jQuery Tools。恕我直言,我会远离它...这是一块完整的垃圾。 jQuery的标记行是“少写,多做” ... jQuery Tools的标记行应该“少做,写更多......更多” 。有了所有优秀的jQuery Scroller插件,我发现一个需要更少标记,更兼容和更好的支持。一年多来,jQuery Tools与IE9不兼容,超过6个月,开发人员似乎找不到一个愿意加入该程序以帮助保持项目进展的程序员。尝试使用类似Nivo Slider的内容。设置和理解会更容易。

Read this great article及其所有评论,以了解更多关于我所说的内容。这是一篇较旧的文章,但主要的想法&抱怨仍然有效。

说真的,jQuery Tools 绝对不像任何其他jQuery插件。使用一些基本选项安装任何jQuery插件需要花费几分钟时间,其中需要花费数小时才能编写使jQuery Tools即使关闭所需的所有HTML / CSS标记。浏览Flowplayer论坛,有各种各样的小问题,比如你的,你看到开发人员在六个月前短暂流行一年中的唯一一次。你是否真的想长期使用插件,开发者公开表示他的兴趣在其他地方?

3)您有超过一百个HTML验证错误,包括一些<p>标记保持打开状态。

http://validator.w3.org

修复这些内容可以帮助您排除故障并将跨浏览器问题降至最低。虽然它们可能与您当前的问题无关,我认为这些问题是由jQuery Tools引起的或根源于此。

4)最后,这个纯粹是一个语义问题。 $(function() { });$(document).ready(function() { });完全相同。此外,您不需要复制它。页面上的所有内容都可以包含在单个 DOM就绪函数中($(document).ready(function() { });

编辑:

5)我又看了一下你的网站。我正在使用Safari 4 Mac,现在我看到你的水平导航点。它对我来说很好。如果你只在Safari 5中遇到这个问题,我会打赌我拥有的一切,这不是Safari 5的问题,而是另一个jQuery Tools错误或不兼容。

您还使用了最新版本的jQuery(1.7.1)。当然你意识到jQuery Tools(1.2.6)的最后一个稳定版本是为jQuery 1.4.2编写的,并且官方只支持jQuery 1.6.4。 jQuery 1.7中有一些重大变化。将jQuery降级到1.4.2或1.6.4时会发生什么?

答案 1 :(得分:1)

我终于找到了工作中的扳手:我在我的一张幻灯片中运行了一个swf动画,无论出于什么原因,它导致最新版本的Safari冻结了部分库。解决方案:没有swfs。