Zatek
10-30-2012, 06:51 PM
1) Script Title: SAG Content Scroller v1.3
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm
3) Describe problem: The script works great, except when I use the ajaxsource option. When I use the ajaxsource option the scroller becomes stuck displaying the loading .gif with the grey background. If I purposely use an incorrect path to the .txt file it will give an error saying 'error fetching content', but even when I try putting the file in the same directory as the .html page it still displays nothing but the loading .gif on a grey background. I tried specifying the path in the .js file, but the result was the same. I also tried using a separate script to automatically .load content into the DIV, but when I do that the scroller breaks and can no longer be scrolled automatically or manually.
I am using FF v16.0.2 and have been using just the code on a test page.
TXT File:
<ul>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
Page Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="Scripts/sagscroller.css" />
<script src="Scripts/sagscroller.js">
/***********************************************
* SAG Content Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type="text/css">
/* #SAG scroller demo #1 */
div#mysagscroller{
width: 200px; /*width of scroller*/
height:250px;
}
div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}
div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}
/* #SAG scroller demo #2 */
div#mysagscroller2{
width: 250px; /*width of scroller*/
height:300px;
border:7px solid #C0C0C0;
}
div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}
</style>
<script>
//SAG scroller demo #1:
var sagscroller1=new sagscroller({
id:'mysagscroller',
ajaxsource: 'sagcontent.txt',
refreshsecs: 300,
mode: 'manual',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})
//SAG scroller demo #2:
var sagscroller2=new sagscroller({
id:'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})
</script>
</head>
<body>
<div id="mysagscroller" class="sagscroller">
<ul>
<li>Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>SVG and HTML5's canvas element allow for the creation of simple graphical objects using programming.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
</div>
<br />
<div id="mysagscroller2" class="sagscroller">
<ul>
<li><a href="#"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a></li>
<li><a href="#"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a></li>
<li><a href="#"><img src="http://i31.tinypic.com/119w28m.jpg" /></a></li>
<li><a href="#"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a></li>
</ul>
</div>
</body>
</html>
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/sagscroller.htm
3) Describe problem: The script works great, except when I use the ajaxsource option. When I use the ajaxsource option the scroller becomes stuck displaying the loading .gif with the grey background. If I purposely use an incorrect path to the .txt file it will give an error saying 'error fetching content', but even when I try putting the file in the same directory as the .html page it still displays nothing but the loading .gif on a grey background. I tried specifying the path in the .js file, but the result was the same. I also tried using a separate script to automatically .load content into the DIV, but when I do that the scroller breaks and can no longer be scrolled automatically or manually.
I am using FF v16.0.2 and have been using just the code on a test page.
TXT File:
<ul>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
Page Code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="Scripts/sagscroller.css" />
<script src="Scripts/sagscroller.js">
/***********************************************
* SAG Content Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type="text/css">
/* #SAG scroller demo #1 */
div#mysagscroller{
width: 200px; /*width of scroller*/
height:250px;
}
div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}
div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}
/* #SAG scroller demo #2 */
div#mysagscroller2{
width: 250px; /*width of scroller*/
height:300px;
border:7px solid #C0C0C0;
}
div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}
</style>
<script>
//SAG scroller demo #1:
var sagscroller1=new sagscroller({
id:'mysagscroller',
ajaxsource: 'sagcontent.txt',
refreshsecs: 300,
mode: 'manual',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})
//SAG scroller demo #2:
var sagscroller2=new sagscroller({
id:'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})
</script>
</head>
<body>
<div id="mysagscroller" class="sagscroller">
<ul>
<li>Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>SVG and HTML5's canvas element allow for the creation of simple graphical objects using programming.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
</div>
<br />
<div id="mysagscroller2" class="sagscroller">
<ul>
<li><a href="#"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a></li>
<li><a href="#"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a></li>
<li><a href="#"><img src="http://i31.tinypic.com/119w28m.jpg" /></a></li>
<li><a href="#"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a></li>
</ul>
</div>
</body>
</html>