Show 1 div with PREV - NEXT link, hiding all others, Show 1 div with PREV - NEXT link, hiding all others Options

[Baffled in Baltimore]

First, thank you for your patience and please forgive the lengthy blurb. This is a bit complicated, but I am sure there is a fix.

My website is heavily CSS structured for layout and styles for its Side-bar, heading, menu, etc. A modified CSS is used for the content and the content section is now an Iframe where all content is targeted. This was done to prevent duplication of parent. I am using GOOGLE site-map generator for the web and FreeFind for my site. Site consists of hundreds of HTML each consisting of an Image linked to a bigger image, Content, PayPal Links and other content all created with Excel for the code, Nvu for the file-saves and HTMLToolkit for the previews and error checking. When someone clicks an image anywhere on the site, it opens the HTML associated with it giving all the information about the Image. By the way, they are all table-based pages; DUMB, I know.

The Problem:
All these pages require updates or deletions depending on stock and pricing for any given item and frequent crawler checks for broken links afterwards. My site Spiders at roughly 500 pages and it keeps growing and getting out of hand. HELLLLLP!!!!

On a more personal note; the author of the website (that’s me) is loosing his vision and can no-longer keep-up with this maddening effort…

Proposed solution:
I believe that enclosing all images and their associated content in DIVS is the better way to go. The idea is to have all images along with its content on one HTML. There are different categories that would use their own pages but the goal is to remove those hundreds of HTML pages and replace them with maybe a couple of dozen Category pages instead. There are as few as 1 or 2 items to as many as 100 items for any given category that would be shown 1-at-a-time using PREV - NEXT links.

What I would like to accomplish is;

• Ensure cross-Browser Compatibility.
• All Category pages and selected DIVS target the content Iframe. (individually-set, CSS or Script file)
• Open the Catalog page of my site. It opens with the Category Menu in the Side-bar and maybe a promo page in the content Iframe.
• Select a category from the Side-bar; say Airplanes. Other categories might include Boats, Cars, Trains, etc.
• The selected “content-targeted” category page opens with a Thumbnail page of all Items on the Page. Each thumbnail is set to say; 150px, 4-wide. (In creating the Category pages, it would be simpler if the Thumbnails are on the same page or separate CSS for each Category.)
• An Image is selected, targeting the Content Iframe. The Image is now at say; 420px and displays all content along with it, including its Add to Cart Button.
• At the top of the page are Item and Category hyperlinks. The Item hyperlink opens on mouseover with ‘Prev–Next’, user selects. If Category hyperlink is selected, it returns current Category Thumbnail page for broader view of available selections.

When an item is no longer available, it is deleted from my data-base and the affected page amended to read “Item is no longer available”. This would be done by selecting appropriate “Item Status” in Excel for compilation of the page. If a deleted item is searched for, it will merely show this instead of a broken link associated with a missing webpage.

Whew!!! I told you it was complicated. Any assistance on setting this up (show 1 and hide the rest) is greatly appreciated.

CHEERS

This post has been edited by Baffled in Baltimore: Jan 9 2009, 05:56 PM

[Baffled in Baltimore]

Thank you for all the responses; some useful info indeed

However, I believe we're loosing focus of the issue at hand. Yes, my vision is an issue and primary reason I am on this quest, but it is not the focal point of this discussion.

I am here because I will have extreme difficulties maintaining my site as written; I am loosing my sight. I am not a web programmer, I am an industrial troubleshooter (was, before vision problem)

The topic is finding a way to minimize the maintenance effort by eliminating the hundreds of already produced product pages (and the necessity of creating more of them) It was thought that combining the content of many single pages into one categorized page would be the fix. This was accomplished and demonstrated here with one of maybe 2-dozen similar pages also to be created: http://www.wjstewart-associates.com/auto_travel.html

My server does not support php, so that's out. Anything-else has to be accomplished by other means. If jscript (not search friendly) or DOM are not viable solutions, please help with alternatives. I know they are out there.

As published, categorized thumbnails are already in use but they reference the many pages that now have to be maintained and in need of removal once a fix is found. An example of this is found here
http://www.wjstewart-associates.com/Catalo...ntent/auto.html.
This is one of several thumbs pages that currently target the many external pages that will be removed.

The BIG question is this: how are you generating this page?

As previously mentioned, I use VB scripts in Excel to create the pages. The subroutines include many other variations ranging from a few divd content to full html that is pasted into my html editor, saved then uploaded. The script references a workbook containing the master records; these are manually created with a “New Record” subroutine also written in VB. In practice, it may take anywhere from a few seconds to maybe a minute or so to create a new record. The Master is frequently-saved and backed-up for use by the HTML creator workbook used for manipulation of the records that will be uploaded.

The iframe on the home page

To be honest, I don’t much-like using them either. This was done to prevent duplication of the parent. It is heavily CSS-based for style, layout, etc. It was desirable to maintain the structure and layout of the site by using an Iframe for deployment of content in the same area, avoiding page-changes and shifting of theme.

Not sure about that, at least not as the only means of navigation. Especially on product pages customers may prefer some kind of thumbnail gallery like on http://www.wjstewart-associates.com/Catalo...ntent/auto.html rather than have to view every item one at the time

I’m a shop by image type myself. This was never mentioned as the only means of navigation, merely an option along with other links to return the thumbs page for another selection or select another category.

The idea is when a category is selected; the thumbs page for that category is displayed in the content Iframe. Next, an Image is selected, loading the page replacing the thumbs page with the selected content. Along with this are the necessary navigation links for Prev-Next, etc.

Search engines don't support JS

This was a given; I would like to avoid jscript for this reason and is why I am here, to seek out viable options. If jscript is the only way out, then so-be-it; but let’s avoid it if possible.

Like Darin, I see just a list of products, which looks OK.

Yes, it does; but when using Iframes, the scrolling has an effect of loosing focus from the rest of the current page when it scrolls out. And the reason I am using a full image is to prevent text wrapping around it when the description gets a bit wordy.
Another point to consider is this; Not everyone uses a scroll mouse, some still have to click and drag those bars. This is why I am seeking a way of displaying one item at a time with link options. By the way, I believe the Iframe is suitably-sized for most resolutions commonly used for web-browsing. Another point is compatibility and Iframes. When the selected content is viewed in an incompatible browser, it will loose the frame attributes, retaining the content. But the content needs to meet compatibility criteria for this to work.

It seems to me you are confusing two separate issues: how to present the information to the visitor, and how to generalise its production from a large number of products

Actually, this is not entirely accurate. Production by generalization was never an issue. Production is by local means merely attempting a better way (from current build) of presentation based on popular tripe while reducing the profound effects site maintenance will have on me when my vision goes from bad to worse; this was already prognosticated.

This all started as a simple problem.(kind of big, but simple) in search of a viable solution. I just need a way of displaying 1-divd-content (paragraph) at a time of whatever category page is loaded.

Goal is to eliminate the many by replacing them with a few. The few is much easier and manageable to maintain.

Thank you all once again.

[Christian J]

My server does not support php, so that's out.

Assuming PHP turned out the best solution I suspect changing web host would be worth it. Learning PHP is of course another issue.

The iframe on the home page

To be honest, I don’t much-like using them either. This was done to prevent duplication of the parent.

Again you could use e.g. PHP (or Excel?) to include common content from an external file.

It is heavily CSS-based for style, layout, etc. It was desirable to maintain the structure and layout of the site by using an Iframe for deployment of content in the same area, avoiding page-changes and shifting of theme.

With an external CSS file this should not be a problem.

The idea is when a category is selected; the thumbs page for that category is displayed in the content Iframe. Next, an Image is selected, loading the page replacing the thumbs page with the selected content. Along with this are the necessary navigation links for Prev-Next, etc.

As long as there's a "Back to category"-link there.

Search engines don't support JS

This was a given; I would like to avoid jscript for this reason and is why I am here, to seek out viable options. If jscript is the only way out, then so-be-it; but let’s avoid it if possible.

Search engines will have no problem indexing a page like http://www.alistapart.com/d/eatcake/final.html since the JS/DOM is just an enhancement of the existing content (as opposed to creating the content with JS). The problem here is more that hidden content is considered search engine manipulation and may get punished, e.g. Google advices against it but I have no idea if or how much it matters in practice. To my surprise I couldn't find much discussions about the "Eat cake" design and search engines.

the reason I am using a full image is to prevent text wrapping around it when the description gets a bit wordy.

That could be prevented with a two-column layout. E.g., you could put the text in P elements and give these a left margin wide enough to stay free of the floated images.

Another point to consider is this; Not everyone uses a scroll mouse, some still have to click and drag those bars. This is why I am seeking a way of displaying one item at a time with link options.

How about simply using internal links on the page? Especially as long as you're using the iframe this seems to be all you really need. Creating the anchor links for lots of page sections might be tedious, though.

In any case, hiding and showing parts of a page with JS and then showing the visible part through an iframe seems unnecessarily complicated.

By the way, I believe the Iframe is suitably-sized for most resolutions commonly used for web-browsing.

I think it's a bit small, while the index page http://www.wjstewart-associates.com/ contains a lot of unused space...