Seamless scrolling from recordset

Hello.

I have been working on this for some time, now, but have not quite got it resolved.

I am pulling a fixed number of images (30 - randomized) from an Access db, using SQL and Classic ASP VBScript.

I am wanting the images (thumbs) to scroll across, in a "screensaver" fashion, with 3 rows - thus the fixed number of 30, in order to be even.  

I have it scrolling just fine with the recordset parked inside the <MARQUEE> tag (I know it is basically deprecated, but it's quick and dirty for the moment).

That part is working fine:  Scrolling with 3 rows of 10 thumbs.

However, the catch is, I need it to scroll seamlessly, so that when the 10th column of thumbs scrolls by, it will immediately begin again with the first column of thumbs... without the large white space at the end.

Can someone, please, tell me how to do this?

I am not ultra proficient in Javascript, nor JQuery, though I hear JQuery could do it - I just have no clue how to "park" my recordset inside Javascript, nor JQuery.

Is there a way to make the <MARQUEE> seamless?

**
EDIT:  SORRY -  Here is a link to what I currently have:  (http://www.macweb.org/dksart/) - I can upload other files, if necessary.
**

Thank you!'
Shane
lshaneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Try adding the loop tag


<MARQUEE behavior="scroll" direction="left" width="100%" scrollamount="5" Loop=0>

What you have now seems to look infinite in chrome.  Which browser are you using.  I think there are some issues with ie in quirks mode.
0
lshaneAuthor Commented:
Thank you, padas.

Well, I am using Chrome, but I was mistaken with my test page.


The test page should be:  http://www.macweb.org/dksart/test.asp


At the moment - I am only scrolling 12 random images with 3 rows each.

I added the tag you suggested, but no change.

Any other ideas?

0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
My bad, I thought it was not looping.

Check this out using jquery. http://jsbin.com/uyawi/1495/edit#javascript,html  This is done with text but if you substitute your images it should work.  The key will be your image size and spacing to give the illusion of being continuous and seamless.  
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

lshaneAuthor Commented:
Hi, padas.

Thank you.

I looked at the code, and I kind of see what's going on, but - not being fluent in JS, I am unsure where to place the code.

I have attached my page's code. (There is a basic DW recordset, along with script from a plugin to randomize and "loop" the recordset).  Other than that, it is just the basic page you see in the URL.

Could you, please, help me with placement?
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/conn_dksartdata.asp" -->
<%
Dim rsImages
Dim rsImages_cmd
Dim rsImages_numRows

Set rsImages_cmd = Server.CreateObject ("ADODB.Command")
rsImages_cmd.ActiveConnection = MM_conn_dksartdata_STRING
rsImages_cmd.CommandText = "SELECT * FROM images" 
rsImages_cmd.Prepared = true

Set rsImages = rsImages_cmd.Execute
rsImages_numRows = 0
%>
<%
'**************************
'  dwzRandomRecordset
'  http://www.DwZone-it.com
'  Version: 1.1.4
'**************************
set dwzRnd_1 = new dwzRandomRecord
dwzRnd_1.Init()
dwzRnd_1.setQuantity "12"
dwzRnd_1.setRecordset rsImages
dwzRnd_1.setUniqueKeyField "imageID"
dwzRnd_1.setWeightField "None"
dwzRnd_1.setKeyNumeric "true"
dwzRnd_1.execute()
set rsImages = dwzRnd_1.getRecordset()
%>
<%
Dim HLooper1__numRows
HLooper1__numRows = 12
Dim HLooper1__index
HLooper1__index = 0
rsImages_numRows = rsImages_numRows + HLooper1__numRows
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.maintbl {
	margin-top: 0px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-left: 0px;
}
-->
</style>
</head>

<body>
<marquee behavior="scroll" direction="left" width="100%" scrollamount="5" Loop=0>
<table>
  <%
startrw = 0
endrw = HLooper1__index
numberColumns = 4
numrows = 3
while((numrows <> 0) AND (Not rsImages.EOF))
	startrw = endrw + 1
	endrw = endrw + numberColumns
 %>
  <tr align="center" valign="top">
    <%
While ((startrw <= endrw) AND (Not rsImages.EOF))
%>
    <td><table border="0" cellpadding="0" cellspacing="0" class="maintbl">
        <tr>
          <td><img src="<%=(rsImages.Fields.Item("imageThumb").Value)%>" alt="imgthumb" /></td>
        </tr>
        
    </table></td>
    <%
	startrw = startrw + 1
	rsImages.MoveNext()
	Wend
	%>
  </tr>
  <%
 numrows=numrows-1
 Wend
 %>
</table>
</marquee>
</body>
</html>
<%
'**************************
'  dwzRandomRecordset
'**************************
set dwzRnd_1 = nothing
%>
<%
rsImages.Close()
Set rsImages = Nothing
%>
<!--#include file="dwzRandom/dwzRandomRec.asp" -->

Open in new window

0
sybeCommented:
Leave out the "loop" property in the marquee tag:

<marquee behavior="scroll" direction="left" width="100%" scrollamount="5">
0
lshaneAuthor Commented:
Hi, sybe - thank you.

I tried that, but it still has the gap between the next scrolling occurrence.

I realize I may need to space my thumbs a little more, but... the goal is for the 2nd "iteration" of the recordset to follow right behind the first iteration in the scroll.

As it is... the recordset scrolls across and then disappears from the screen, and THEN has a 2-second, or so, white gap before coming back on the screen again.

It seemed like the JQuery example above could be of some help, but I am not sure how to implement it, nor where to place it in the code.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
here is a sample http://mypadas.com/ee/slidingbanner/

And the code below.  The trick is to have a wrapper that is the same size as the total width of your images.  In your case, the total width of each square (table) was 260.  260 X 3 = 780 so that is the width of the wrapper.  The illusion is seamless.

If you want it go full width of the screen, remember that some screens can be up to 2000 px wide.  So you will want to simply repeat your image squares two or three times.

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
'****************************************************
' put your recordset code here

'****************************************************
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banner</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {

var marquee = $("#marquee"); 
marquee.css({"overflow": "hidden", "width": "100%"});

// wrap "My Text" with a span (IE doesn't like divs inline-block)
marquee.wrapInner("<span>");
marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

marquee.wrapInner("<div>");
marquee.find("div").css("width", "200%");

var reset = function() {
$(this).css("margin-left", "0%");
// Set the speed slower by increasing the 10000 number or faster by lowering it
$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);
};

reset.call(marquee.find("div"));

});
</script>
<style type="text/css">
body {
background-color: #6782AF;
}
/* Set the width of the wrapper to match the width of your images */
#wrapper {
width: 780px;
background-color: #000;
margin-right: auto;
margin-left: auto;
}
#code {
padding-top: 50px;
width: 780px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>

<body>

<div id="wrapper">
<div id="marquee">
<%
'****************************************************
' Instead of the table below, place your response.write(MyRandomInfo)

%>
<table>

<tr align="center" valign="top">

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/sunset.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/winter.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/lillies.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

</tr>

<tr align="center" valign="top">

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/blue hills.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/001.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/002.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

</tr>

<tr align="center" valign="top">

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/003.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/004.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

<td> <table width="200" border="0" cellspacing="0" cellpadding="30">

<tr>

<td align="center"><a href="#"><img src="http://www.macweb.org/dksart/images/thumbs/005.jpg" alt="image" border="0" /></a></td>

</tr>

</table></td>

</tr>

</table>
 

</div>
 

</div>

<div id="code">

asdfas
</div>
</body>
</html>

Open in new window


0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Here is the same thing where I just repeated your last column 5 times http://mypadas.com/ee/slidingbanner/full.asp.  You can see it can widen open your browser wider.    The key is setting a fixed width of the wrapper to a proper size and that will prevent the images from over lapping.

I wonder if you changed from tables to divs if the overlapping would not happen.  I will give it a try.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think your best bet is going to be having a fixed width wrapper that matches the total width of your images and padding.
0
lshaneAuthor Commented:
Hi, padas.  Sorry for the delay!  Was out of town, and just got back.

I implemented your suggestion and it worked fine for the 9-image scroll, but when I tried to expand by adding another 260 to the 780 (Make the wrapper 1040) - it has a gap again.

Here is the link:  http://macweb.org/dksart/test.asp
(I also attached the current code)

I want to ultimately have 10 columns at 260px per image and padding in between; but I wanted to test with just one extra column at the moment.

Please let me know what I'm doing incorrectly.

Thank you!
Shane

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/conn_dksartdata.asp" -->
<%
Dim rsImages
Dim rsImages_cmd
Dim rsImages_numRows

Set rsImages_cmd = Server.CreateObject ("ADODB.Command")
rsImages_cmd.ActiveConnection = MM_conn_dksartdata_STRING
rsImages_cmd.CommandText = "SELECT * FROM images" 
rsImages_cmd.Prepared = true

Set rsImages = rsImages_cmd.Execute
rsImages_numRows = 0
%>
<%
'**************************
'  dwzRandomRecordset
'  http://www.DwZone-it.com
'  Version: 1.1.4
'**************************
set dwzRnd_1 = new dwzRandomRecord
dwzRnd_1.Init()
dwzRnd_1.setQuantity "12"
dwzRnd_1.setRecordset rsImages
dwzRnd_1.setUniqueKeyField "imageID"
dwzRnd_1.setWeightField "None"
dwzRnd_1.setKeyNumeric "true"
dwzRnd_1.execute()
set rsImages = dwzRnd_1.getRecordset()
%>
<%
Dim HLooper1__numRows
HLooper1__numRows = 12
Dim HLooper1__index
HLooper1__index = 0
rsImages_numRows = rsImages_numRows + HLooper1__numRows
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banner</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(function() {

var marquee = $("#marquee"); 
marquee.css({"overflow": "hidden", "width": "100%"});

// wrap "My Text" with a span (IE doesn't like divs inline-block)
marquee.wrapInner("<span>");
marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 
marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

marquee.wrapInner("<div>");
marquee.find("div").css("width", "200%");

var reset = function() {
$(this).css("margin-left", "0%");
// Set the speed slower by increasing the 10000 number or faster by lowering it
$(this).animate({ "margin-left": "-100%" }, 10000, 'linear', reset);
};

reset.call(marquee.find("div"));

});
</script>
<style type="text/css">
body {
background-color: #6782AF;
}
/* Set the width of the wrapper to match the width of your images */
#wrapper {
width: 1040px;
background-color: #000;
margin-right: auto;
margin-left: auto;
}
#code {
padding-top: 50px;
width: 1040px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>


<body>


<div id="wrapper">
<div id="marquee">


<table>
  <%
startrw = 0
endrw = HLooper1__index
numberColumns = 4
numrows = 3
while((numrows <> 0) AND (Not rsImages.EOF))
	startrw = endrw + 1
	endrw = endrw + numberColumns
 %>
  <tr align="center" valign="top">
    <%
While ((startrw <= endrw) AND (Not rsImages.EOF))
%>
    <td><table border="0" cellpadding="0" cellspacing="0" class="maintbl">
        <tr>
          <td><img src="<%=(rsImages.Fields.Item("imageThumb").Value)%>" alt="imgthumb" /></td>
        </tr>
        
    </table></td>
    <%
	startrw = startrw + 1
	rsImages.MoveNext()
	Wend
	%>
  </tr>
  <%
 numrows=numrows-1
 Wend
 %>
</table>

</div>
</div>

</body>
</html>
<%
'**************************
'  dwzRandomRecordset
'**************************
set dwzRnd_1 = nothing
%>
<%
rsImages.Close()
Set rsImages = Nothing
%>
<!--#include file="dwzRandom/dwzRandomRec.asp" -->

Open in new window

0
lshaneAuthor Commented:
Hello - sorry again for the delay - was working on this issue.

OK - I have the scrolling working with my randomized ASP VBScript recordset; however...

- It does not appear to work in IE8 and higher.

- It works fine in Chrome and Firefox


I know that MS supposedly killed off the <marquee> tag, and I know many don't care for it, however, I was wanting to know if there is a "hack", or workaround, for it to work in IE8+?


Here's the link:
http://macweb.org/dksart/test.asp



Thank you,
Shane
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You can use javascript in place of the marquee  http://remysharp.com/demo/marquee.html
0
lshaneAuthor Commented:
Thank you, padas, but I'm not seeing how to do multiple rows (3, in my case).

The recordset appears to work with the Javascript; HOWEVER, when I implement my "Horizontal Looper" script to give me 3 rows, it no longer works.  It kills the Javascript.

Any ideas?
0
lshaneAuthor Commented:
I didn't get the information on how to create 3 rows of scrolling images, but I will research further.  Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.