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 |
Baffled in Baltimore |
Jan 14 2009, 11:30 AM
Post
#2
|
Member Group: Members Posts: 51 Joined: 9-January 09 From: Baltimore, MD Member No.: 7,507 |
Hello again Christian, J; and thanks
QUOTE Didn't quite follow that. Why have more links at the top of the page if you already have the thumbnail gallery there? And how would the user navigate when he's arrived at an individual product (besides using the Back button? It's not having more links at the top of the page, it's having a set of links available for each called item. (Once the link-to is called for first-item from the gallery) This is based on what you proposed earlier, having the thumbs gallery and the divd content on the same page. Sorry about the misnomer (#) = anchor, not null I only know how to target when the target name is known, I don't have a clue on how to target anything wild-card or variable (for a Prev-Next scenario.) What I envisioned is this: when an image is selected from the gallery, it displays the image and text-content for that image. Along with this, there would be navigation links (maybe at the beginning of each section) for the user to get the Next or Prev item or jump-to the gallery. ALTERNATELY, the beginning of each section would have a named anchor for the purpose of activating an onhover menu for the prev-next, etc links. For any item selected, navigation is present. But the only way I know how to do this is when the item is known targeting each item on the page for Prev-Next. I am sure there are better methods; if targeting can be done with say; a variable, I would like to use it but I don't know how. Otherwise, its navigation for each section and/or using a popup menu system that activates (shows) onhover. It's overkill, but this method would probably be best. PS: I'm thinking about those who don't use a scroll mouse; it would be more convenient for them to have this option This post has been edited by Baffled in Baltimore: Jan 14 2009, 11:45 AM |
Christian J |
Jan 14 2009, 03:57 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,678 Joined: 10-August 06 Member No.: 7 |
I only know how to target when the target name is known, I don't have a clue on how to target anything wild-card or variable (for a Prev-Next scenario.) The target element needs an ID (or NAME). This can be added with javascript, maybe like this (I added the first one for the gallery manually anyway): CODE <div id="gallery"> Put thumbnail gallery in this DIV </div> <div class="section"> <img src="..." width="..." height="..." alt="...."> <p>First item</p> </div> <div class="section"> <img src="..." width="..." height="..." alt="...."> <p>Middle item(s)</p> </div> <div class="section"> <img src="..." width="..." height="..." alt="...."> <p>Middle item(s)</p> </div> <div class="section"> <img src="..." width="..." height="..." alt="...."> <p>Last item</p> </div> <script type="text/javascript"> var div=document.getElementsByTagName('div'); var section=new Array(); for(var i=0; i<div.length; i++) { if(div[i].className=='section') { section.push(i); } } function make_link(num, url, txt) { var a=document.createElement('a'); a.href=url; a.appendChild(document.createTextNode(txt)); div[section[num]].insertBefore(a, div[section[num]].firstChild); var space=document.createTextNode(' '); div[section[num]].insertBefore(space, div[section[num]].firstChild); } for(var i=0; i<section.length; i++) { div[section[i]].id='s'+i; if(i!=section.length-1) { make_link(i, '#s'+1*(i+1), 'Next'); } make_link(i, '#gallery', 'Gallery'); if(i!=0) { make_link(i, '#s'+1*(i-1), 'Previous'); } } </script> The thumbnail gallery must be in a DIV with the ID "gallery", while products must be added in DIVs with the CLASS "section". The script must be placed after the product DIVs on the page (if you rather want it in the page's <HEAD> it must first be modified slightly, and the script may appear to run slightly slower in some browsers). If you load an external JS file in the <script> element the same script can be used for multiple pages. |
Lo-Fi Version | Time is now: 3rd June 2024 - 04:05 AM |