javascriptjqueryinternet-explorer-8anythingslider

Javascript navigation not working in IE8

I'm using anythingslider and colorbox to create a horizontally sliding page that is kind of an e-book. I have implemented the 'nav(to)' function in anythingslider to build navigation, which works wonderfully in Firefox and Safari but not it IE8. The frustrating thing is that the slider part still works - it will go left and right, it just won't work with the navigation to jump directly to a 'page' (which is actually a list item). I suspect some finicky piece of syntax is being rejected by IE8, but I can't find it to save my life.

In the interest of full disclosure, the code for this page was originally created using in5, which converts an InDesign document into HTML. It's a tad sloppy, and doesn't do everything I wanted, so I have been hand-coding it for about two weeks to tweak it (and the fact that it took two weeks should explain why I can't figure out what's wrong. In case that wasn't clear, I'm a total rookie).

I have searched all over for answers, including stackoverflow, github, and csstricks. I can't find anyone with my specific problem, and the answers provided for similar issues were things I had either already done, or implemented with no joy. I modified the meta tag to account for IE8. I have beautified the javascript files so I could find exactly where the navigation is defined in the external .js file (and I found it, but I'm not enough of a javascript programmer to completely understand what I was looking at).

So here's the code:

<!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>

I've abbreviated it a lot - the whole thing is ginormous - but that is the whole head section. I only included one 'page' (actually a list item). The relevant bits are the onclick="nav.to(n);" at the buttons at the end, and the navigation definitions in the slidersettings block of script near the end of the head.

I know everyone probably has actual programming issues to answer, and my feeble programming efforts are low on your list of priorities, but I am trying desperately to learn this stuff as fast as I can, and would thoroughly appreciate any help anyone can offer.

Solution

  • Towards the end of the script block you have an extra comma. IE8 is notorious for breaking due to these.

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

}