Link to home
Start Free TrialLog in
Avatar of Wayne Barron
Wayne BarronFlag 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
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

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

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.
Avatar of Wayne Barron

ASKER

Thanks padas.
Tried it, however, it did not work.
Thanks for the effort.
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.
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.
How many items do you have?
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.
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.
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.
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
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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