Show 1 div with PREV - NEXT link, hiding all others, Show 1 div with PREV - NEXT link, hiding all others |
Show 1 div with PREV - NEXT link, hiding all others, Show 1 div with PREV - NEXT link, hiding all others |
Baffled in Baltimore |
Jan 9 2009, 05:29 PM
Post
#1
|
Member Group: Members Posts: 51 Joined: 9-January 09 From: Baltimore, MD Member No.: 7,507 |
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;
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 |
Jan 19 2009, 02:34 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,686 Joined: 10-August 06 Member No.: 7 |
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 } |
Brian Chandler |
Jan 19 2009, 02:48 PM
Post
#3
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
Hmm, doesn't appear to "work" for me (though I've no idea what "work" means)... QUOTE CODE <iframe onload="include('header','menu1','menu2');" ... function include() { ... Well, you have declared include() with no arguments, but have called it with three. Shurely shomething wrong here? |
Christian J |
Jan 19 2009, 06:20 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,686 Joined: 10-August 06 Member No.: 7 |
Hmm, doesn't appear to "work" for me (though I've no idea what "work" means)... Which browser/version? "Work" means content from the "index.html" file is included in "foo.html". QUOTE you have declared include() with no arguments, but have called it with three. Shurely shomething wrong here? No, they are used in the arguments array, as explained here: http://www.javascriptkit.com/javatutors/rfunction3.shtml |
Lo-Fi Version | Time is now: 14th June 2024 - 10:11 AM |