Javascript滚动在本地服务器上工作，但不能在线(jsScroller.js)
Javascript scroller works on local server but not online (jsScroller.js)
我最近对我的一个网站进行了一些小的编辑，这个网站使用了javascript滚轮(我在十年前在网上发现的)，突然它不再工作了。我想不出我能改变什么。这很奇怪，因为它继续在我的本地服务器(MAMP)上工作良好，但不再在web上工作。
这是一个链接到不能正常工作的在线页面:
http://tinyurl.com/scrollernotworking如果在这里发布代码更有意义，这是我的html:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/scroll.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" --><title>TEST SCROLLER ONLINE</title><!-- InstanceEndEditable -->
<!-- InstanceParam name="id" type="text" value="staff" -->
<style type="text/css">
@import url(test.css);
</style>
<script type="text/javascript" src="../javascript/jsScroller.js"></script>
<script type="text/javascript" src="../javascript/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("Scroller"), 400, 200);
scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}
</script>
</head>
<body id="staff">
<div id="content">
<div id="Scroller">
<div class="Scroller-Container"><!-- InstanceBeginEditable name="text" -->
<div id="lipsum">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere nisi sed tortor molestie sodales. In at turpis id nibh eleifend porta. Sed risus dui, eleifend non sem eget, tempor adipiscing mauris. In sodales sem vel commodo pretium. Phasellus vulputate velit a imperdiet tristique. Nunc a lacus ut elit sagittis bibendum. Ut vel quam nunc. Aenean hendrerit nulla eu ligula porttitor accumsan. </p>
<p> Duis turpis justo, commodo ac massa rhoncus, rhoncus semper massa. Nullam faucibus leo ut tempor tempus. Mauris a elementum nibh, non congue felis. Curabitur eu nibh mauris. Maecenas quis fringilla augue. Morbi id malesuada nisl. Donec nec aliquam purus. Proin at malesuada justo. Vivamus tempor velit lectus, a sagittis nisl mollis eu. Donec at enim laoreet, rhoncus nulla posuere, consequat elit. Nam vel ante eros. Phasellus laoreet tempus mattis. Phasellus a fringilla neque. Nulla rutrum nibh quis malesuada sollicitudin. Etiam suscipit nibh eu porttitor tristique. </p>
<p> Ut aliquam, diam sit amet dapibus imperdiet, nisl augue pharetra odio, in interdum tortor quam non sem. Nulla molestie rhoncus sem eget tincidunt. Sed vel velit fermentum, sagittis turpis vel, accumsan nibh. Aliquam erat volutpat. Fusce leo est, pharetra eu tortor non, sollicitudin tempor ligula. Proin nec adipiscing erat, at suscipit tellus. Nullam scelerisque porta iaculis. Cras est tortor, scelerisque non vestibulum eu, pellentesque vel magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<h2> Heading Example 1</h2>
<p>ullam accumsan leo erat, in interdum quam luctus ac. In nulla mi, sodales a aliquet at, gravida nec mauris. Quisque nec interdum diam. Etiam fermentum pulvinar dolor in cursus. Ut hendrerit porta ullamcorper. In lobortis neque sed sem condimentum, quis feugiat elit consequat. In eu erat mi. </p>
<p> Nulla ornare egestas libero nec tempus. Sed id ornare enim. Maecenas pharetra massa sed augue sodales vestibulum. Suspendisse potenti. Duis et accumsan justo, a dictum velit. Aliquam ultricies eleifend sagittis. Cras in risus est. Sed molestie urna elit, eget varius magna euismod sit amet. </p>
<h2> Heading Example 2</h2>
<p>Sed turpis elit, hendrerit eu diam nec, vulputate laoreet lectus. Pellentesque volutpat erat vel nisl tincidunt feugiat. Vestibulum quam sem, condimentum eu ultrices eu, scelerisque a turpis. Duis condimentum dictum lectus, in ornare lacus vehicula posuere. Ut venenatis urna ac euismod bibendum. Aenean eu arcu cursus, fermentum mi at, interdum libero. Praesent tincidunt tortor eu ultrices viverra. Fusce in velit a mi euismod mollis. Suspendisse venenatis congue justo, at luctus enim. Aliquam nec volutpat erat. </p>
<p> Fusce fringilla sapien magna, ac bibendum turpis condimentum sed. Donec posuere, nunc et rhoncus dapibus, velit magna semper leo, sed commodo odio enim feugiat magna. Nam aliquet turpis eu lectus ultricies, eget tempor urna eleifend. Aliquam sit amet magna volutpat nunc pretium accumsan quis nec erat. Fusce volutpat porta ipsum nec adipiscing. Donec eu enim molestie ante sollicitudin consequat eget at arcu. Ut id ante eget metus porttitor imperdiet. Fusce faucibus nunc vel elit convallis, eu iaculis nulla semper. Vivamus ullamcorper diam libero, non dignissim dolor vestibulum et. Vivamus in volutpat nunc. Aliquam erat volutpat. Maecenas massa massa, congue quis tortor at, interdum laoreet augue. Aenean mattis lacus dui, quis ullamcorper massa tincidunt quis. </p>
<h2> Heading Example 3</h2>
<p>Nullam sit amet porta urna. Pellentesque quis tristique diam. Sed ac porta urna. Nunc porttitor eget nibh id ornare. Duis a nunc a purus ultrices pretium eu et lacus. Duis auctor condimentum ligula, nec commodo lectus eleifend sed. Cras varius adipiscing feugiat. Mauris posuere sem a ultrices adipiscing. Sed id lectus tortor. Aenean vitae rhoncus turpis, a vulputate purus. Etiam rutrum nulla sit amet urna hendrerit bibendum. Donec laoreet porttitor risus nec porttitor. </p>
</div>
<div id="generated"></div>
<!-- InstanceEndEditable --></div><!--close Scroller-Container-->
</div><!--close Scroller-->
<div id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div><!--close Scrollbar-Handle-->
</div><!--close Scrollbar-Track-->
<!-- InstanceBeginEditable name="homepage-calltoActions" --><!-- InstanceEndEditable -->
</div><!--close Scrollbar-Container-->
</div><!--close Content-->
</body>
<!-- InstanceEnd --></html>
html, body {
height:100%;
width:100%;
}
body {
margin:0;
padding:50px;
background-color:#676B62;
line-height:135%;
font-family:Verdana,Arial, Helvetica, sans-serif;
color:#333;
}
p {
margin:0 0 15px 0;
line-height:145%;
}
h2 {
font-size:1.1em;
margin:0 0 9px 0;
text-transform:none;
font-weight:bold;
line-height:140%;
}
#content {
float:left;
width:700px;
min-height:469px; /** added min to test ****/
margin:0;
padding:50px;
background-color:#FFC;
}
/*************** Scroller CSS **************/
#Scroller {
text-align:left;
font-size:12px;
position:absolute;
width: 590px;
height: 375px;
overflow: hidden;
margin:0;
line-height:135%;
/*background-color:#6CF;*/
}
.Scroller-Container {
position: absolute;
}
.Scrollbar-Track {
width: 20px;
height: 375px;
position: absolute;
background-color:#ccd59a;
margin:0 0 0 605px;
}
.Scrollbar-Handle {
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 30px;
background-color: #81943B;
background-image:url(images/site/scrollbar-handle.gif);
background-repeat:no-repeat;
}
和javascript没有被我改变，因为它原来的工作完美，但你可以看到它链接到上面的链接页面的头部。
我将感激任何人提供的任何帮助!
提前感谢……我花了几个小时试图弄清楚我可能不小心改变了什么，但无济于事:(
当我打开链接Uncaught ReferenceError: jsScroller is not defined时，我可以在我的控制台上看到此错误，这意味着您没有包含js文件或您的js文件路径是错误的。
相关文章：
- JS可以在Chrome中工作，但不能在Firefox中工作
- WebRTC视频聊天可以在FF中使用，但不能在Chrome中使用
- jQuery Datepicker可以在Safari中工作，但不能在FF或Chrome中工作
- 三角库可以与firefox一起使用，但不能在Chrome中使用
- Highcharts可以从服务器加载数据，但不能更新
- 刷新GoogleMaps tile服务器可以使用JavaScript，但不能使用GWT
- node.js可以识别字符模式，但不能识别数字模式
- 如何在元素中处理鼠标事件，但不能在其子元素上处理
- Json到CSV下载，可以在chrome中工作，但不能在IE浏览器中工作
- jQuery$.post可以在chrome、safari中工作，但不能在FF中工作(声明成功回调函数未定义）
- Javascript可以在chrome中使用，但不能在其他浏览器中使用
- Iframe加载调整大小在Chrome中工作，但不能在IE或Firefox中工作
- Rails Production-可以工作，但不能编辑/删除/创建记录
- 能够在Highcharts中看到值，但不能看到图形
- 漂亮的照片在Dreamweaver上完美运行;但不能在任何浏览器上在线工作
- 在本地工作，但不能在线工作
- Javascript滚动在本地服务器上工作，但不能在线(jsScroller.js)
- jQuery Gallery可以在Firefox和Chrome上本地显示，但不能在线显示
- 此jQuery离线工作，但不能在线工作
- Jquery幻灯片可以离线运行，但不能在线运行
