Timeline JScript not working in IExplorer

Question

I'm using timeline JScript in my website, and the original version has no problem running in Internet Explorer, but when I move it to my website, it can no longer run in IE (other browsers are working fine). I cannot figure out why.

By not working, I mean, when I click right button or a year, it went to the top of my website instead of shifting to that year slide, but in other browsers, it works well.

Original version is using jQuery v1.6, I'm using Jquery-1.7.1.min.

Another question is my <h1> tag does not working properly in Chrome Browser, did I missing anything? Also link the code.

Ok, my <h1> tag is working now, after adding Google fonts stylesheet, but timeline JScript still not working in IE.

 #header h1 { /*font-family: "Arial Black", Gadget, sans-serif;*/ /*font-family: "Veneer" Gadget, sans-serif;*/ font-family: "Maven pro", sans-serif; font-size: 70px; font-weight:900; line-height:70px; text-shadow: 3px 3px 5px rgba(122, 131, 175, 1); color:#FFF; text-transform: uppercase; text-align: center; margin: 0 auto; z-index:1; } 

---

 /* ---------------------------------- jQuery Timelinr 0.9.3 tested with jQuery v1.6+ ©2011 CSSLab.cl free for any use, of course... :D instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/ ---------------------------------- */ jQuery.fn.timelinr = function(options) { // default plugin settings settings = jQuery.extend({ orientation: 'horizontal', // value: horizontal | vertical, default to horizontal containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline datesDiv: '#dates', // value: any HTML tag or #id, default to #dates datesSelectedClass: 'selected', // value: any class, default to selected datesSpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) lrzj_lineDiv: '#lrzj_line', // value: any HTML tag or #id, default to #lrzj_line lrzj_lineSelectedClass: 'selected', // value: any class, default to selected lrzj_lineSpeed: 200, // value: integer between 100 and 1000 (recommended), default to 200 (fast) lrzj_lineTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 lrzj_lineTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true/false, default to false startAt: 1 // value: integer, default to 1 (first) }, options); $(function() { // setting variables... many of them var howManyDates = $(settings.datesDiv + ' li').length; var howManylrzj_line = $(settings.lrzj_lineDiv + ' li').length; var currentDate = $(settings.datesDiv).find('a.' + settings.datesSelectedClass); var currentIssue = $(settings.lrzj_lineDiv).find('li.' + settings.lrzj_lineSelectedClass); var widthContainer = $(settings.containerDiv).width(); var heightContainer = $(settings.containerDiv).height(); var widthlrzj_line = $(settings.lrzj_lineDiv).width(); var heightlrzj_line = $(settings.lrzj_lineDiv).height(); var widthIssue = $(settings.lrzj_lineDiv + ' li').width(); var heightIssue = $(settings.lrzj_lineDiv + ' li').height(); var widthDates = $(settings.datesDiv).width(); var heightDates = $(settings.datesDiv).height(); var widthDate = $(settings.datesDiv + ' li').width(); var heightDate = $(settings.datesDiv + ' li').height(); // set positions! if (settings.orientation == 'horizontal') { $(settings.lrzj_lineDiv).width(widthIssue * howManylrzj_line); $(settings.datesDiv).width(widthDate * howManyDates).css('marginLeft', widthContainer / 2 - widthDate / 2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0, $(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if (settings.orientation == 'vertical') { $(settings.lrzj_lineDiv).height(heightIssue * howManylrzj_line); $(settings.datesDiv).height(heightDate * howManyDates).css('marginTop', heightContainer / 2 - heightDate / 2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0, $(settings.datesDiv).css('marginTop').indexOf('px'))); } /* 代码整理：懒人之家 www.lanrenzhijia.com 转载请注明出处 */ $(settings.datesDiv + ' a').click(function(event) { event.preventDefault(); // first vars var whichIssue = $(this).text(); var currentIndex = $(this).parent().prevAll().length; // moving the elements if (settings.orientation == 'horizontal') { $(settings.lrzj_lineDiv).animate({ 'marginLeft': -widthIssue * currentIndex }, { queue: false, duration: settings.lrzj_lineSpeed }); } else if (settings.orientation == 'vertical') { $(settings.lrzj_lineDiv).animate({ 'marginTop': -heightIssue * currentIndex }, { queue: false, duration: settings.lrzj_lineSpeed }); } $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }).removeClass(settings.lrzj_lineSelectedClass).eq(currentIndex).addClass(settings.lrzj_lineSelectedClass).fadeTo(settings.lrzj_lineTransparencySpeed, 1); // now moving the dates $(settings.datesDiv + ' a').removeClass(settings.datesSelectedClass); $(this).addClass(settings.datesSelectedClass); if (settings.orientation == 'horizontal') { $(settings.datesDiv).animate({ 'marginLeft': defaultPositionDates - (widthDate * currentIndex) }, { queue: false, duration: settings.datesSpeed }); } else if (settings.orientation == 'vertical') { $(settings.datesDiv).animate({ 'marginTop': defaultPositionDates - (heightDate * currentIndex) }, { queue: false, duration: settings.datesSpeed }); } }); /* 代码整理：懒人之家 www.lanrenzhijia.com 转载请注明出处 */ $(settings.nextButton).bind('click', function(event) { event.preventDefault(); if (settings.orientation == 'horizontal') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginLeft').substring(0, $(settings.lrzj_lineDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0, $(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates - widthDate; if (currentPositionlrzj_line <= -(widthIssue * howManylrzj_line - (widthIssue))) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:last-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginLeft': currentPositionlrzj_line - widthIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).next().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginLeft': currentIssueDate }, { queue: false, duration: settings.datesSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); } } } else if (settings.orientation == 'vertical') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginTop').substring(0, $(settings.lrzj_lineDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0, $(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates - heightDate; if (currentPositionlrzj_line <= -(heightIssue * howManylrzj_line - (heightIssue))) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:last-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginTop': currentPositionlrzj_line - heightIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).next().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginTop': currentIssueDate }, { queue: false, duration: settings.datesSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); } } } }); /* 代码整理：懒人之家 www.lanrenzhijia.com 转载请注明出处 */ $(settings.prevButton).click(function(event) { event.preventDefault(); if (settings.orientation == 'horizontal') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginLeft').substring(0, $(settings.lrzj_lineDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0, $(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates + widthDate; if (currentPositionlrzj_line >= 0) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:first-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginLeft': currentPositionlrzj_line + widthIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).prev().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginLeft': currentIssueDate }, { queue: false, duration: settings.datesSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); } } } else if (settings.orientation == 'vertical') { var currentPositionlrzj_line = parseInt($(settings.lrzj_lineDiv).css('marginTop').substring(0, $(settings.lrzj_lineDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionlrzj_line / heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0, $(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates + heightDate; if (currentPositionlrzj_line >= 0) { $(settings.lrzj_lineDiv).stop(); $(settings.datesDiv + ' li:first-child a').click(); } else { if (!$(settings.lrzj_lineDiv).is(':animated')) { $(settings.lrzj_lineDiv).animate({ 'marginTop': currentPositionlrzj_line + heightIssue }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li').animate({ 'opacity': settings.lrzj_lineTransparency }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.lrzj_lineDiv + ' li.' + settings.lrzj_lineSelectedClass).removeClass(settings.lrzj_lineSelectedClass).prev().fadeTo(settings.lrzj_lineTransparencySpeed, 1).addClass(settings.lrzj_lineSelectedClass); $(settings.datesDiv).animate({ 'marginTop': currentIssueDate }, { queue: false, duration: settings.datesSpeed }, { queue: false, duration: settings.lrzj_lineSpeed }); $(settings.datesDiv + ' a.' + settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); } } } }); /* 代码整理：懒人之家 www.lanrenzhijia.com 转载请注明出处 */ // keyboard navigation, added since 0.9.1 if (settings.arrowKeys == 'true') { if (settings.orientation == 'horizontal') { $(document).keydown(function(event) { if (event.keyCode == 39) { $(settings.nextButton).click(); } if (event.keyCode == 37) { $(settings.prevButton).click(); } }); } else if (settings.orientation == 'vertical') { $(document).keydown(function(event) { if (event.keyCode == 40) { $(settings.nextButton).click(); } if (event.keyCode == 38) { $(settings.prevButton).click(); } }); } } /* 代码整理：懒人之家 www.lanrenzhijia.com 转载请注明出处 */ // default position startAt, added since 0.9.3 $(settings.datesDiv + ' li').eq(settings.startAt - 1).find('a').trigger('click'); }); }; 

 .timeline_bg { width: 100%; height: 1080px; position: relative; z-index: 400; } .timeline_wrapper { width: 960px; height: 1080px; margin: 0 auto; } #lrzj_x { width: 960px; height: 350px; overflow: hidden; margin: 0 auto; position: relative; background: url(../image/dot.gif) left 45px repeat-x; } #lrzj_x a { color: #117FB2; -webkit-mask-box-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, 0))); text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } #lrzj_x a:hover { color: #ffcc00; } #lrzj_x a.selected { color: #ffcc00; } #dates { width: 960px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 100px; height: 50px; font-size: 24px; text-align: center; background: url(../image/biggerdot.png) center bottom no-repeat; } #dates a { line-height: 38px; padding-bottom: 10px; } #dates .selected { font-size: 38px; } #lrzj_line { width: 800px; height: 350px; overflow: hidden; } #lrzj_line li { width: 800px; height: 350px; list-style: none; float: left; } #lrzj_line li img { float: left; margin: 10px 30px 10px 50px; } #lrzj_line li h1 { color: #ffcc00; font-size: 48px; margin: 20px 0; text-shadow: #000 1px 1px 2px; } #lrzj_line li p { font-size: 14px; margin-right: 70px; font-weight: normal; line-height: 22px; text-shadow: #000 1px 1px 2px; } #next, #prev { position: absolute; top: 0; font-size: 70px; top: 200px; width: 50px; height: 70px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; } #next:hover, #prev:hover { background-position: 0; } #next { right: 10px; background-image: url(../image/navigate-right-icon.png); } #prev { left: 10px; background-image: url(../image/navigate-left-icon.png); } #next.disabled, #prev.disabled { opacity: 0.2; } 

 <div class="timeline_bg"> <div class="timeline_wrapper"> <div class="title"> <div class="title_line"></div> <h5>My Timeline</h5> <div class="title_line"></div> </div> <!-- title end here --> <div id="lrzj_x"> <ul id="dates"> <li><a href="#">01-04</a> </li> <li><a href="#">04-06</a> </li> <li><a href="#">08-09</a> </li> <li><a href="#">09-10</a> </li> <li><a href="#">2010</a> </li> <li><a href="#">2011</a> </li> <li><a href="#">2012</a> </li> <li><a href="#">2013</a> </li> <li><a href="#">2014</a> </li> </ul> <ul id="lrzj_line"> <li id="#01-04"> <img src="images/1.png" width="256" height="256" /> <h1>2001-2004</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#04-06"> <img src="images/2.png" width="256" height="256" /> <h1>1930</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#08-09"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#09-10"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2010"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2011"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2012"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2013"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> <li id="#2014"> <img src="images/3.png" width="256" height="256" /> <h1>1944</h1> <p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula.</p> </li> </ul> <a href="#" id="next">+</a> <a href="#" id="prev">-</a> </div> <!--time line script end here --> </div> <!-- timeline wrapper --> </div> <!-- time line end here --> 

Answer 1

Just add (jQuery) at the end of the function.

Working fiddle