Avatar of Wayne Barron
Wayne Barron
Flag for United States of America asked on

ASP Classic, JQuery, Dynamic Content from Access Database

The following Project, I had help from "madaboutasp" to assist me in getting the JQuery work done for the linked description, so it is completed.
Now. what I am needing is the following.

If you look at this original example of this project from here.
DEMO
http://tympanus.net/Tutorials/AnimatedPortfolioGallery/
PROJECT PAGE
http://tympanus.net/codrops/2010/11/14/animated-portfolio-gallery/

#1: When you images on the left first load, they slide in from the side.
#2: And when you click on the images to display in the main of the page
      Each of the images and their information, glides in and out, really cool looking.

OK.
In my project, neither of them are working.
Now, in my project, it is ASP Classic and the images and data is feeding in from an Access Database.

EXAMPLE
http://ee.cffcs.com/Q_Project/Test.asp
CODE
http://ee.cffcs.com/Q_Project/Project.zip


Can someone please assist me in making my project work like the original one does?
With it being Dynamic Content, it is so very hard to get JQuery to play nice with Dynamic stuff.

Thanks in advance.
Carrzkiss
ASPjQueryAJAX

Avatar of undefined
Last Comment
Wayne Barron

8/22/2022 - Mon
Scott Fell

Keep it simple.....  Start with their static html and replace the repeating content with your dbf content.  It looks like each section just needs to have repeating content in the same order.  So I would use rs.requery after each loop.

<h1 class="title">Portfolio <span>Codrops Tutorial</span></h1>


<div class="pg_content">
<div id="pg_title" class="pg_title">
<h1 style="display:block;top:25px;">Shape Company Website Design</h1>
<%
 do until rs.eof
 %>	
 <h1><%=rs("title")%></h1>
<%
  rs.movenext
  loop
  rs.requery 'get ready for the next loop
   %>	
</div>
 <div id="pg_preview">
<%
 do until rs.eof
 %>	
<img class="pg_thumb" style="display:block;z-index:9999;" src="images/medium/<%=rs(imagemed")%>" alt="images/large/<%=rs(imagemed")%>"/>
<%
  rs.movenext
  loop
  rs.requery 'get ready for the next loop
   %>
</div>
<div id="pg_desc1" class="pg_description">
<%
 do until rs.eof
 %>					
<div style="display:block;left:250px;">
					<h2><%=rs("description_title")%></h2>
					<p><%=rs("description_content")%>.</p>
				</div>
<%
  rs.movenext
  loop
  rs.requery 'get ready for the next loop
   %>
</div>

div id="thumbContainter">
			<div id="thumbScroller">
				<div class="container">
					<div class="content">
<%
 do until rs.eof
 %>							
<div><a href="#"><img src="images/thumbs/<%=rs("image")%>" alt="" class="thumb" /></a></div>

<%
  rs.movenext
  loop
  rs.requery 'get ready for the next loop
   %>

					</div>
                             </div>
     </div>
</div>

Open in new window

Scott Fell

In your loadit.asp file, I don't see anything repeating.   I think each section needs to load in the same order with the same amount of data.
Wayne Barron

ASKER
Thanks padas.
Tried it, however, it did not work.
Thanks for the effort.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Scott Fell

Ok, I should be able to look at your files in detail later tonight.  I typed out my sample pretty quick and maybe left something out.   Get a static sample working, then keep adding on from the dbf.  The jquery portion shouldn't be getting in the way.  

I did see it looks like you are trying to load the main area via ajax one at a time.  I think the way the code works for that page is everything has to be loaded on the page at once for it work.  

If you are trying to avoid the page loading slow from too large a database, try looking at using anti fouc code to load everything first with a short delay to the screen. http://www.bluerobot.com/web/css/fouc.asp/ in place of your ajax code that calls each item up one at a time.  

if you only have 100 items for instance, it shouldn't be much of a problem anyway.
Wayne Barron

ASKER
If that is the case, and it has to load everything at once in order to do that, then I will try to do something else instead.

Look forward to your interpretation of the code example when you get the chance.
Scott Fell

How many items do you have?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Wayne Barron

ASKER
They could range from 5 to 100 + or more.
It will all depend on the user.

This script is going to be used in the redesign of our Image Hosting site.
Scott Fell

Each of those thumbs are about 5k.  So 100 would be about a half meg.  Depending on the service that could start to see a little extra load time.     There are a few options we can try out.   One is to load 30 to 50 wait a few seconds and load more until complete.   What may work better though is loading the 30 to 50, then detect when the scroll on the left gets towards the end and load some more.  I know using jquery you can add the div's to the page on the fly.

Another option that may just be easier for now is to load the 30 to 50 and have the very last image read, "Click for more...".  Then when clicked, either a new 30 to 50 or an additional 30 to 50 loads.  

I would say the first step is to get it to load all at once just like the sample but using the dbf.   Then break it down.
Wayne Barron

ASKER
In the project, I am adding this to it left image load
http://www.cffcs.com/Tutorials/carrzkiss/10/Load.asp
So, this is added in, to my actual page, not to the example that I provided.

The issue that I am looking at other than that, is the effect
Of the data being loading in the center of the page.
Which is the cool slide in and out effect, and also, when you click
On the actual DEMO page image, it displays the larger image.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Scott Fell

I am still trying to finish up another project.  But it looks like your rendered page is missing elements.  

One example I found is just below the <div class="pg_content"> in the sample site is the id pg_title.  You have the jquery code for this but it is missing in your rendered html.

                  
<div id="pg_title" class="pg_title">
				<h1 style="display:block;top:25px;">Shape Company Website Design</h1>
				<h1>Summer of Love</h1>
				<h1>Smashing Multimedia</h1>
				<h1>Design Studio Project</h1>
				<h1>Graphpedia Blog Innovative Solutions</h1>
				<h1>My Portfolio Project</h1>
				<h1>1st Webdesigner</h1>
				<h1>Workspace Tools Conference</h1>
				<h1>Herbal Treats Webdesign</h1>
				<h1>Fresh Web Development</h1>
				<h1>Projection Website Design</h1>
				<h1>Dellistore Interactions Project</h1>
				<h1>Get Your Hands Dirty</h1>
				<h1>Custom Template Design</h1>
				<h1>Chocolate PSDVibe Project</h1>
				<h1>The Web Lover Portfolio</h1>
				<h1>Custom Template Solution</h1>
				<h1>Grafpedia Project</h1>
				<h1>Crisp Presentation Design</h1>
				<h1>Avatar Website Project</h1>
			</div>

Open in new window


The way I would trouble shoot this is to go back to using static sample data and piece by piece convert to dynamic.  I know it sounds the long way.
SOLUTION
hielo

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Wayne Barron

ASKER
Hello "Hielo"
Thanks for your input.
I had changed that in my project, as it was causing problems in the real project.
Now, that I know that is the issue on the sliding of the side images, that is resolved.

@padas
I guess the way it is looking, there is no possible way thus far, that it is going to be able to work in the project.
Loading the content all, or even half, may and may not work.

I would be happy to have some type of Animation play between the loading of the
Data, so, if you can think of an Animation that would be great as a replacement.

Thanks guys.
I am going to see if I can get the markup to work in the real project, as "hielo" had spotted.
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Wayne Barron

ASKER
Thanks Guys.
I have spent way to much time on this project.
I am going to have find another solution.
I am trying to give a new twist to our Image Hosting site.
And I thought this would be a good thing to add in.
Maybe later on down the road we can add something like this in,
However, I am a week behind on schedule.
So, off to the drawing board to thing of something else.
Or just design the new interface and add in the Folder Browsing, like this was going to be used for later on.

Take Care Padas, and thanks for your continued support and the helpful little code there at the end, that is something that I am going to look into, when I look back at this project at another time.

Carrzkiss
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.