Javascript导航无法在IE8中运行

时间：2013-02-26 15:40:37

标签： javascript jquery internet-explorer-8 anythingslider

我使用anythingslider和colorbox来创建一个水平滑动页面，这是一种电子书。我已经实现了导航（到）＆＃39;功能在anythingslider中构建导航，在Firefox和Safari中运行得非常好，但不是IE8。令人沮丧的是，滑块部分仍然可以工作 - 它将左右移动，它只是不会使用导航工具直接跳转到一个页面＆＃39; （实际上是一个列表项）。我怀疑一些挑剔的语法被IE8拒绝了，但是我无法找到它来挽救我的生命。

为了完全公开，此页面的代码最初是使用in5创建的，它将InDesign文档转换为HTML。它有点草率，并没有做我想做的一切，所以我已经手动编码了大约两个星期来调整它（事实上花了两个星期应该解释为什么我可以＆＃39弄清楚错误的原因。如果不清楚，我就是新手。

我已经搜遍了所有的答案，包括stackoverflow，github和csstricks。我无法找到任何有我特定问题的人，而且针对类似问题提供的答案是我已经完成的事情，或者没有任何快乐的实施。我修改了元标记来解释IE8。我已经美化了javascript文件，所以我可以找到外部.js文件中导航定义的确切位置（我找到了它，但我还不够javascript程序员来完全理解我在看什么）。

所以这里是代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>BestBrands2013</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery.min.js"><\/script>')</script>
<script type="text/javascript" src="assets/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.anythingslider.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="assets/css/theme-minimalist-square.css">
<link rel="stylesheet" href="assets/css/pages.css">


<script type="text/javascript" >
var touchEnabled = 'ontouchstart' in document.documentElement;
var useSwipe = 1;
var pageMode = 'h';
var nav;

$(function(){

    if($.colorbox) {
        $('.lightbox').colorbox({iframe:true, width:"80%", height:"80%"});
        $('.thumb').colorbox({maxWidth:"85%", maxHeight:"85%"});
    }
    $('img').bind('dragstart', function(event) { event.preventDefault(); });
    $('.pageItem').each(function(){
        if($(this).is('[onclick]')){
            if(touchEnabled) {
                //this.setAttribute('touchstart', this.getAttribute('onclick'));
                //this.removeAttribute('onclick');
            } else this.style.cursor = 'pointer';
        }
    });
    if($.hasOwnProperty('scrollTo')){
    nav = { numPages:$('.pages .page').length,
        back:function(ref){var targ=$(ref).parent('.page').prev()[0]; if(targ!=undefined); $.scrollTo(targ, 500);},
        next:function(ref){var targ=$(ref).parent('.page').next()[0]; if(targ!=undefined); $.scrollTo(targ, 500);},
        first:function(){$.scrollTo($('.page')[0], 500)},
        last:function(){$.scrollTo($('.page')[nav.numPages-1], 500)},
        to:function(n){$.scrollTo($('.page')[n-1], 500)} };
    }
    var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
    // autoplay
    vid[0].play();
}
};
            var sliderSettings = {
        mode: pageMode,
        theme: 'minimalist-square',
        buildArrows: (!touchEnabled && 1),
        buildNavigation: false,
        buildStartStop: false,
        hashTags: false,
        infiniteSlides: false,
        stopAtEnd: true,
        onInitialized: function(e, slider) {
            playvid(slider);
            nav = {
                numPages:slider.pages,
                current:slider.currentPage,
                next:function(){slider.goForward();},
                back:function(){slider.goBack();},
                first:function(){this.to(1);},
                last:function(){this.to(this.numPages)},
                to:function(n){slider.gotoPage(n);}
            };
            if(useSwipe) {
            var container = $('#container');
            var vertMode = (pageMode.substr(0,1) == "v");
            container.swipe({
                swipe:function(event, direction, distance, duration, fingerCount) {
                    switch(direction) {
                        case "left":
                            if(!vertMode) nav.next();
                            break;
                        case "right":
                            if(!vertMode) nav.back();
                            break;
                        case "up":
                            if(vertMode) nav.next();
                            break;
                        case "down":
                            if(vertMode) nav.back();
                            break;      
                    }
                }
            });
            }
        },

    }

    $('#slider').anythingSlider(sliderSettings);
});
</script>

</head>

<body>    
<div id="container">
<ul class="pages" id="slider">

<li class="page">
  <img class="pageItem" src="assets/images/item_16.png" alt="page item"/>
  <a href = "javascript:void(0)" onclick = "document.getElementById('popclinique').style.display='block';document.getElementById('fade').style.display='block'">
    <img class="pageItem" src="assets/images/item_17.png" style="left:165px; top:116px; " alt="page item"/>
  </a>
  <a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8520&cm_sp=ebook-_-30513-_-bb_p2_clinique_sun" target="_blank"><img class="pageItem" src="assets/images/item_18.png" style="left:85px; top:381px; " alt="Clinique Sun"/></a>
  <a href = "javascript:void(0)" onclick = "document.getElementById('popmilstar').style.display='block';document.getElementById('fade').style.display='block'">
  <img class="pageItem" src="assets/images/item_19.png" style="left:38px; top:567px; " alt="page item"/>
</a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8517&cm_sp=ebook-_-30513-_-bb_p2_clinique_fragrance" target="_blank"><img class="pageItem" src="assets/images/item_20.png" style="left:271px; top:210px; " alt="Clinique Fragrance"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8523&cm_sp=ebook-_-30513-_-bb_p2_clinique_mens" target="_blank"><img class="pageItem" src="assets/images/item_21.png" style="left:436px; top:207px; " alt="Clinique Mens"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8501&cm_sp=ebook-_-30513-_-bb_p2_clinique_3step" target="_blank"><img class="pageItem" src="assets/images/item_22.png" style="left:591px; top:318px; " alt="Clinique 3 Step"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8512&cm_sp=ebook-_-30513-_-bb_p2_clinique_makeup" target="_blank"><img class="pageItem" src="assets/images/item_23.png" style="left:864px; top:350px; " alt="Clinique Makeup"/></a>
<a href="https://shop.aafes.com/shop/default.aspx?loc=department.aspx%7Edept_id%3D8505&cm_sp=ebook-_-30513-_-bb_p2_clinique_skincare" target="_blank"><img class="pageItem" src="assets/images/item_24.png" style="left:696px; top:47px; " alt="Clinique Skin Care"/></a>
<button class="pageItem" style="left:217px; top:641px; " alt="clinique 11" id="item26" onclick="nav.to(2);">&nbsp;</button>
 <button class="pageItem" style="left:271px; top:641px; " alt="nikebutton 11" id="item27" onclick="nav.to(3);">&nbsp;</button>
 <button class="pageItem" style="left:325px; top:641px; " alt="underarmourbuttpn 11" id="item28" onclick="nav.to(4);">&nbsp;</button>
 <button class="pageItem" style="left:379px; top:641px; " alt="coachbutton 11" id="item29" onclick="nav.to(5);">&nbsp;</button>
 <button class="pageItem" style="left:433px; top:641px; " alt="fossilbutton 11" id="item30" onclick="nav.to(6);">&nbsp;</button>
 <button class="pageItem" style="left:487px; top:641px; " alt="keurigbutton 11" id="item31" onclick="nav.to(7);">&nbsp;</button>
 <button class="pageItem" style="left:541px; top:641px; " alt="dellbutton 11" id="item32" onclick="nav.to(8);">&nbsp;</button>
 <button class="pageItem" style="left:595px; top:641px; " alt="applebutton 11" id="item33" onclick="nav.to(9);">&nbsp;</button>
 <button class="pageItem" style="left:649px; top:641px; " alt="dysonbutton 11" id="item34" onclick="nav.to(10);">&nbsp;</button>
 <button class="pageItem" style="left:703px; top:641px; " alt="samsungbutton 11" id="item35" onclick="nav.to(11);">&nbsp;</button>
 <button class="pageItem" style="left:757px; top:641px; " alt="knmorebutton 11" id="item36" onclick="nav.to(12);">&nbsp;</button>
 <img class="pageItem" src="assets/images/item_25.png" style="left:16px; top:12px; " alt="page item"/>
 </li>
</body>

我已经将它缩写了很多 - 整个事情都是巨大的 - 但这就是整个部分。我只包含了一个页面＆＃39; （实际上是一个列表项）。相关位是onclick =＆＃34; nav.to（n）;＆＃34;在最后的按钮，以及靠近头部的脚本的slidersettings块中的导航定义。

我知道每个人都可能有实际的编程问题需要回答，而我的微弱编程工作在你的优先级列表中很少，但我正在拼命地尽可能快地学习这些东西，并且会非常感谢任何帮助。报价。

2 个答案:

答案 0 :(得分：0)

在脚本块的末尾，您有一个额外的逗号。 IE8因为这些而破裂而臭名昭着。

                }
            }
        });
        }
    }, <-- here

}

答案 1 :(得分：0)

评论：
如果您正在寻找替代解决方案，以下链接提供了滚动到html元素的一般实现。它在我的项目（IE8）中工作。

资源：
http://css-tricks.com/snippets/jquery/smooth-scrolling/

相关问题
最新问题