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

[Christian J]

Here's a simple demo: http://hem.fyristorg.com/g-force/test/java...pt_SSI/foo.html

I've used both a hidden IFRAME and JS for this. The IFRAME is hidden from human users, but JS should still be able to read the contents of the index page through it (if both pages are on the same domain). If it doesn't work for some reason, browsers should at least be able to use the link to the Home page.

I've tested in latest MSIE, Firefox, Safari and Opera (all in Windows) but try more browsers/versions before using this. There could be some serious bugs, for example I had to fix one that caused an infinite loop in MSIE7 (so I had to close the browser from Windows Task Manager).

All included DIVs will end up at the end of the page by default, but this can be changed to the beginning. You can also position them with CSS.

Installation

1. On the index/home page, add everything that you want included on other pages in separate DIV elements, and give each DIV its own ID. In the future you'll only edit menus on this page.

2. On each page where you want to include things, add the following HTML:

CODE

<iframe onload="include('header','menu1','menu2');"
src="/" width="1" height="1" name="iframe"
style="position: absolute; left: -100px;"></iframe>
<a href="/">Home</a>
<script type="text/javascript" src="include.js"></script>

Both the IFRAME and the "Home" link should point to the index/home page (i.e., "/").

Put the IDs of the DIV elements you want included from the index page in here:

CODE

onload="include('header','menu1','menu2');"

(the example above loads DIVs with the IDs 'header', 'menu1' and 'menu2'). You can add as few or as many as you want, as long as they exist on the index/home page. If one doesn't exist, none will show up.

3. Put the following in the external JS file "include.js":

CODE

var finished;
function include()
{
    if(finished!='yes')
    {
        // first making an array prevents a bug in MSIE:
        var codeblock=new Array();
        for(var i=0; i<include.arguments.length; i++)
        {
            var div_content=top.iframe.document.getElementById(include.arguments[i]).innerHTML;
            codeblock.push('<div id="'+include.arguments[i]+'">'+div_content+'</div>');
        }

        for(var i=0; i<codeblock.length; i++)
        {
            document.body.innerHTML+=codeblock[i];
        }
    }
    finished='yes'; // prevents an infinite loop bug in MSIE
}

[Baffled in Baltimore]

Here's a simple demo: http://hem.fyristorg.com/g-force/test/java...pt_SSI/foo.html

I've used both a hidden IFRAME and JS for this. The IFRAME is hidden from human users, but JS should still be able to read the contents of the index page through it (if both pages are on the same domain). If it doesn't work for some reason, browsers should at least be able to use the link to the Home page.

I've tested in latest MSIE, Firefox, Safari and Opera (all in Windows) but try more browsers/versions before using this. There could be some serious bugs, for example I had to fix one that caused an infinite loop in MSIE7 (so I had to close the browser from Windows Task Manager).

All included DIVs will end up at the end of the page by default, but this can be changed to the beginning. You can also position them with CSS.

Installation

1. On the index/home page, add everything that you want included on other pages in separate DIV elements, and give each DIV its own ID. In the future you'll only edit menus on this page.

2. On each page where you want to include things, add the following HTML:

CODE

<iframe onload="include('header','menu1','menu2');"
src="/" width="1" height="1" name="iframe"
style="position: absolute; left: -100px;"></iframe>
<a href="/">Home</a>
<script type="text/javascript" src="include.js"></script>

Both the IFRAME and the "Home" link should point to the index/home page (i.e., "/").

Put the IDs of the DIV elements you want included from the index page in here:

CODE

onload="include('header','menu1','menu2');"

(the example above loads DIVs with the IDs 'header', 'menu1' and 'menu2'). You can add as few or as many as you want, as long as they exist on the index/home page. If one doesn't exist, none will show up.

3. Put the following in the external JS file "include.js":

CODE

var finished;
function include()
{
    if(finished!='yes')
    {
        // first making an array prevents a bug in MSIE:
        var codeblock=new Array();
        for(var i=0; i<include.arguments.length; i++)
        {
            var div_content=top.iframe.document.getElementById(include.arguments[i]).innerHTML;
            codeblock.push('<div id="'+include.arguments[i]+'">'+div_content+'</div>');
        }

        for(var i=0; i<codeblock.length; i++)
        {
            document.body.innerHTML+=codeblock[i];
        }
    }
    finished='yes'; // prevents an infinite loop bug in MSIE
}

I think we have the right orchard, but the wrong tree; what is proposed here is creating new pages with the variations.
What is needed is; go from THIS page to THIS page (Note the menu in sidebar and Heading; thay are different. The content changes with new menu in sidebar) without creating new pages. Can this be accomplished using this or any other script?

Or did I miss-read the intent of the above script?

PS
MENU AND CONTENT PAGES ARE THEIR OWN HTML PAGES AS WELL; BUT CURRENTLY NOT USED:
(This was done to allow external file targeting from other pages)

This post has been edited by Baffled in Baltimore: Jan 20 2009, 01:32 PM

[Christian J]

Or did I miss-read the intent of the above script?

Maybe it's me that misunderstood?

The idea is that you change the include function's parameters (as shown below) depending on what content (headers, menus etc) you want to include on a page. E.g., one page might include "header1" and "menu2":

CODE

onload="include('header1','menu2');"

while another instead uses "header2" and "menu1":

CODE

onload="include('header2','menu1');"

...etc (as long as the included DIVs exist "hard-coded" on the index page).

[Baffled in Baltimore]

Or did I miss-read the intent of the above script?

Maybe it's me that misunderstood?

The idea is that you change the include function's parameters (as shown below) depending on what content (headers, menus etc) you want to include on a page. E.g., one page might include "header1" and "menu2":

CODE

onload="include('header1','menu2');"

while another instead uses "header2" and "menu1":

CODE

onload="include('header2','menu1');"

...etc (as long as the included DIVs exist "hard-coded" on the index page).

This is a great idea but showing issues:

• Style sheets in use employ positioning as one of their functions; this would make it difficult to modify for adaptation of proposed theme. (Each new Div id will require its own declaration in the CSS)

• Menus and search engines in sidebar currently target the "content" iframe and works well using this element. The proposed theme does seem to work with directly-loaded content into their named divs but fails to work with anything targeted from another area of the page; a menu2 link for example, will not target the content div although the div is named /ID'd as content.

• Menus and other content using external js fail to function properly when loaded into a sheet using this scheme. Don't know why, they just don't see the external js they rely on.

Iframes are great for many things and reasons but poses a problem for html strict; hence the need to discontinue their use. How can a div be sugar-coated to function like an iframe for targeting external content?

This post has been edited by Baffled in Baltimore: Jan 22 2009, 10:45 AM

[Christian J]

[*]Style sheets in use employ positioning as one of their functions; this would make it difficult to modify for adaptation of proposed theme. (Each new Div id will require its own declaration in the CSS)

You can also "hard-code" empty DIVs anywhere you want in the product pages where the header and menu content should be inserted. But then you must decide from the beginning on which (and how many) such containers you want to use (and rewrite the script accordingly).

[*]Menus and search engines in sidebar currently target the "content" iframe and works well using this element. The proposed theme does seem to work with directly-loaded content into their named divs but fails to work with anything targeted from another area of the page; a menu2 link for example, will not target the content div although the div is named /ID'd as content.

Didn't understand that.

[*]Menus and other content using external js fail to function properly when loaded into a sheet using this scheme. Don't know why, they just don't see the external js they rely on.

Could you make a test page showing this? One problem I can think of might be that your existing menu scripts are made to work with iframes.

Iframes are great for many things and reasons but poses a problem for html strict;

On the contrary: writing Strict HTML is not an end by itself (writing valid HTML is good, though). The reason for avoiding iframes is the problems they cause, as mentioned earlier.

How can a div be sugar-coated to function like an iframe for targeting external content?

With HTML alone it can't.

[Darin McGrew]

How can a div be sugar-coated to function like an iframe for targeting external content?

With HTML alone it can't.

And frankly, using JavaScript to make div elements act like iframe elements isn't really any better than just using iframe elements to begin with. In addition to the normal problems associated with frames (inline or regular), you add the dependency on JavaScript.