SAG Content Scroller v1.3 - Content Does Not Load When Using AjaxSource Option

**Zatek** · 10-30-2012, 06:51 PM

1) Script Title: SAG Content Scroller v1.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agscroller.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:

Code:

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

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>

**ddadmin** · 10-30-2012, 07:54 PM

Please post a link to the page on your site that contains the problematic script so we can check it out.

**Zatek** · 10-30-2012, 09:01 PM

I don't have a site yet. I can't even get it to work on a test page. I can attach a copy though.

The DD demo page works fine, example #2 uses the ajaxsource option, however when I go to View Source -> Save As even the demo page does the same thing as my test page. It gets stuck at the loading image when the ajaxsource option is used even though I didn't change anything. I also tried reading through the entire demo page code and made sure I corrected any relative paths but that didn't make any difference.

**ddadmin** · 10-31-2012, 01:55 AM

So just to confirm, you haven't actually run the SAG scroller on a live web site yet, only offline? That would possibly explain why the Ajax option of the script isn't work for you. In certain browsers such as Google Chrome, Ajax is only executed when the page is being run online.

**Zatek** · 10-31-2012, 06:17 PM

Originally Posted by ddadmin

So just to confirm, you haven't actually run the SAG scroller on a live web site yet, only offline? That would possibly explain why the Ajax option of the script isn't work for you. In certain browsers such as Google Chrome, Ajax is only executed when the page is being run online.

Yeah, that was the issue. I put the page on a network share and it's working now. Thanks.