The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

5 Pages V  1 2 3 > »   
Reply to this topicStart new topic
> Show 1 div with PREV - NEXT link, hiding all others, Show 1 div with PREV - NEXT link, hiding all others
Baffled in Baltimore
post 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;
  • 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 9 2009, 06:13 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,279
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Your proposed solution is basically using one big HTML document as a database. I suggest that you'd be better off just switching the site from static HTML documents to a database-driven site.

One of these CGI shopping-cart programs or these PHP shopping-cart programs may meet your needs.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 9 2009, 07:51 PM
Post #3


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Thank you for your response
I am going blind from a motorcycle accident that caused nerve damage and as a result, I have to do thyings differently.

No, not one-big HTML; this would be totally wrong. The issue is not data access either, it is running div'd content on a hand full of pages as opposed to running many pages.

What I am proposing is placing items in divs by category, with each category being a page of its own. There may be 20 categories (pages) altogether.

In other words, 1, 2, or ,maybe 20 current HTML items (pages) now become 1-page of div'd content. This would be far more manageable than trying to keep up with several hundred individual pages and to stream-line things

When 1 item (div) of say; 20 on the same page is selected, the rest of the div'd items remain hidden. This is where I need help, hiding the rest when 1 is selected and doing so using a couple of links.

When another div'd item is selected by using a Next or Prev link, it closes the visible content and opens the new selection; hiding the rest of them again.

How is the code for this written? I tried researching this but have too much trouble seeing

Thanks again
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 9 2009, 08:02 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,279
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



There are JavaScript techniques for hiding some of the content on a page.

However, I think it's better to use a database-backed system to generate different content at different URLs, rather than to have a single URL with multiple views depending on what JavaScript is doing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 10 2009, 06:35 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



To see a javascript driven sample, go read ALA's article Let them eat cake.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 10 2009, 11:30 AM
Post #6


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



I am an American Vet, now with a disability.
Like so many other articles I read long ago, Let them eat cake appears to be a great article and just what the doctor ordered; but my vision prevents me from reading much of it (or anything else) at a time. Speech to text is not a good tool for this one.

I hate to be a thorn, is there usable HTML and/or CSS code I can just copy and tweek to my needs? I can author it to some degree thru a mic and what sr doesn't understand, I will have to visually scribe.

Thanks again for your help

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2009, 11:40 AM
Post #7


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



Here's a simpler alternative to a database, using PHP to show different parts depending on the query string. Just be careful with the single-quotes, since one missing or one too many will break it (single quotes that are part of the content can be commented out with a backslash as shown at the end):

CODE
<?php

if(isset($_GET['section']) && $_GET['section']=='foo')
{
    echo '
    <h1>Section foo</h1>
    <p><a href="?section=bar">Next</a></p>
    ';
}

else if(isset($_GET['section']) && $_GET['section']=='bar')
{
    echo '
    <h1>Section bar</h1>
    <p><a href="?section=foo">Previous</a></p>
    ';
}

else
{
    echo '
    <h1>No section is chosen</h1>
    <p><a href="?section=foo">foo\'s page</a> <a href="?section=bar">bar\'s page</a></p>
    ';
}

?>


A related solution is to put the section's content in an external HTML page, separated by pre-determined "divider" strings:

CODE
#divider#

Section foo

#divider#

Section bar

#divider#


Then that HTML page's content is read by a PHP script, which divides the content into sections (using the #divider# separator), only showing one of them at the time depending on the query string.

To maintain the HTML page you can then use any HTML editor, as long as the #divider# separators are used correctly.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 10 2009, 02:23 PM
Post #8


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Thanks again for your help

I appreciate the code and the assist, but I believe there is some discontinuity to the objective.

When I started the website many-moons ago, I began writing the pages 1-at-a-time; but (this was already a given) this would be too prone to errors and inconsistencies. Lacking support, resources and a better way to go, I went to Excel for this purpose because there is a lot of repitition that I knew Excel would be good at. (I'm an old LOTUS user from the 80's)

Using the VB tools in Excel, I wrote some code to help automate the process of writing the HTML for me. I maintain a database in one workbook that is used as the Master Record and new record input. The HTML code is written in another workbook with many variations that references the Master records; this was done to prevent data loss in the event something happens. It worked well enough to be able to author, test and debug dozens of pages at a time, ready for upload in about an hour and have been using this method until recently.

I realized then that maintenance would be a problem and I was ok with that. But in light of my recent disability, I can no longer spend the time for basic upkeep; this is why I am trying to eliminate the need for having to upload and maintain MANY pages. Once this is done, there will be only a hand-full of pages to maintain instead of a truck load (the hundreds of pages that will be removed later).

The information is already there, I just need a way to display it without being overwhelming or senseless. Instead of writing them with the full html script, it will be (for the most part) content that will go inside the BODY tags.

Please consider the following Example for clarification:

I have one html page with 20 div'd sections all showing their content. Contents are; 1001, 1002, 1003, etc to 1020. Each divd section is garnered from previously uploaded pages; twenty of them in this case.

The goal is to have the first div'd section on this page show by default when the page loads, hiding the rest of them. Along with this, have one link to show previous section (if already shown, link is disabled) hiding all others and a link to show the NEXT section, hiding all others. If the last div'd section is already shown, the NEXT link is now disabled.

Please keep in mind, this all happens on the given page; not involving any others unless specifically called by another link...

I suppose a better question is; how do I set up my divs, and the links. I know main or master divs need a unique id for this but not sure how to structure them. Once this is accomplished, it is just a matter of changing a bit of code in Excel to re-compile them.

Thank you again for the help...

This post has been edited by Baffled in Baltimore: Jan 10 2009, 02:55 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 10 2009, 03:13 PM
Post #9


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



By the way, a database structure sounds sweet but not set up for it; don't know how...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2009, 05:15 PM
Post #10


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 10 2009, 08:23 PM) *

Please consider the following Example for clarification:

Yes that's what I had in mind with my example(s). Using a server-side script like PHP avoids any browser support problems inherent with Javascript, and also saves the user download time (since when using JS, all the DIVs are downloaded at once).
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 10 2009, 06:02 PM
Post #11


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Thanks again.

Just wanted to make sure I was on the same sheet of music.

This php is unfamiliar to me, how do I put it to actual use?
Any sample html I could try?
What if anything would I have to upload to make it work?

When I mentioned my Excel database, would this be something for uplad; if so, should it be saved as an XML and uploaded as such?

Sorry for all the dumb questions; I'm just trying to simplify things for myself and php sounds like a very good method.
Given my disability, I now see that it may be the only way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 10 2009, 07:48 PM
Post #12


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 11 2009, 12:02 AM) *

This php is unfamiliar to me, how do I put it to actual use?

PHP is a server-side scripting language, so the user/browser never sees the script, only its output. This forum is made with PHP. Here's the official site: http://www.php.net/ (the introduction is at the top left).

QUOTE
Any sample html I could try?

Assuming your web host offers PHP (most commercial ones do) you can paste my first code example into the BODY of a web document and upload. You may have to use a .php file extension, dependning on how your web server is configured (this can easily be changed so it works with the .html extension too).

QUOTE
When I mentioned my Excel database, would this be something for uplad;

The processing of the PHP code is done on the server, so you can't view the finished pages offline (i.e. from your computer's file system). I don't know how various HTML editors treat PHP code (ideally they'd leave it as is), I wouldn't trust Excel not to mess things up. OTOH, if you used my second idea (with all content in a separate HTML document) you'd "never" have to touch the page with the PHP script after first writing it, since all section updates would be made in the other page.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 11 2009, 09:26 AM
Post #13


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Hello again;

Based on the sample code (php script), how would an external file for the divider sections be named to make the script work?

Thanks again for your help.

This post has been edited by Baffled in Baltimore: Jan 11 2009, 09:50 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 11 2009, 10:43 AM
Post #14


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



With an external file you'll need a different script. Note that this could be buggy, it's just to show the concept:

CODE
<body>

<?php

// content of the remote HTML page:
$content=file_get_contents('content.html');

// divide HTML page content into sections, separated by the string "#separator#":
$section=explode('#separator#', $content);

// last item of two or more:
if(isset($_GET['section']) && count($section)>3 && $_GET['section']=='100'.count($section)-2)
{
    echo $section[(count($section)-2)].'
    <p>
    <a href="?section=100'.(count($section)-3).'">Previous</a>
    Next
    </p>
    ';
}

// items between the first and last:
else if(isset($_GET['section']) && $_GET['section']>1001 && $_GET['section']<'100'.count($section)-2)
{
    for($i=2; $i<(count($section)-2); $i++)
    {
        if($_GET['section']=='100'.$i)
        {
            echo $section[$i].'
            <p>
            <a href="?section=100'.($i-1).'">Previous</a>
            <a href="?section=100'.($i+1).'">Next</a>
            </p>
            ';
        }
    }
}

// first item of two or more:
else if(count($section)>3)
{
    echo $section[1].'
    <p>
    Previous
    <a href="?section=1002">Next</a>
    </p>
    ';
}

// single item:
else
{
    echo $section[1].'
    <p>
    Previous Next
    </p>
    ';
}

?>

</body>


The external page called "content.html":

CODE
<body>

Put no content here (before the first separator). If this line of text shows up something went wrong.

#separator#

<h1>1001</h1>
<p>Lorem ipsum</p>

#separator#

<h1>1002</h1>
<p>Lorem ipsum</p>

#separator#

<h1>1003</h1>
<p>Lorem ipsum</p>

#separator#

<h1>1004</h1>
<p>Lorem ipsum</p>

#separator#

Put no content here (after the last separator). If this line of text shows up something went wrong.

</body>

User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 11 2009, 11:27 AM
Post #15


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Hello again; and thanks for your patience.

I uploaded recent samples with the following results:

CODE

3 && $_GET['section']=='100'.count($section)-2) { echo $section[(count($section)-2)].'
Previous Next

'; } // items between the first and last: else if(isset($_GET['section']) && $_GET['section']>1001 && $_GET['section']<'100'.count($section)-2) { for($i=2; $i<(count($section)-2); $i++) { if($_GET['section']=='100'.$i) { echo $section[$i].'
Previous Next

'; } } } // first item of two or more: else if(count($section)>3) { echo $section[1].'
Previous Next

'; } // single item: else { echo $section[1].'
Previous Next

'; } ?>


This is a copy/paste of the screen output. I see what you mean by it being "Buggy" The first section was saved as .php and .html; with and without html elements (body, dtd. etc) with similar results. The Content sect was saved as content.html


Any thoughts on this, or is server php-deficient?

Thanks again...

This post has been edited by Baffled in Baltimore: Jan 11 2009, 11:32 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 11 2009, 03:02 PM
Post #16


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 11 2009, 05:27 PM) *

I uploaded recent samples with the following results:

If that's how it looks online your web server may not support PHP. Your web host should have a list on what's included in the account plan.

Possibly the web host offers ASP instead, then maybe something similar can be programmed in ASP, but alas I don't know that language. Free hosts usually don't support any of this.




User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 11 2009, 04:43 PM
Post #17


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



Thanks for reply

Well, I'm paying for this stuff; you'd think they'd give me something useful. I contacted support for this and will wait for their response.

I have an ftp account I opened shortly after this one. I was not too happy with this host after I bought into it. I use the ftp less frequently; mainly file access for visitors who get a log-in to access certain docs. Maybe it's time to move over to it full-time.

Either way I go, I still need to minimize my efforts in maintaining all that html; and removing most of it. Each visit to the VA brings more bad news about my vision.

In the mean time, I need to move back over to the original idea of using jscript and divs; it would be a big improvement over what's being done now.

Can you provide sample script / html for the purpose at hand?

Ordinarilly I'd just research, but no longer have that luxury.

Thanks again for your time...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jan 12 2009, 01:33 AM
Post #18


Jocular coder
********

Group: Members
Posts: 2,298
Joined: 31-August 06
Member No.: 43



QUOTE(Baffled in Baltimore @ Jan 12 2009, 01:27 AM) *

Hello again; and thanks for your patience.

I uploaded recent samples with the following results:

CODE

3 && $_GET['section']=='100'.count($section)-2) { echo $section[(count($section)-2)].'
Previous Next

'; } // items between the first and last: else if(isset($_GET['section']) && $_GET['section']>1001 && $_GET['section']<'100'.count($section)-2) { for($i=2; $i<(count($section)-2); $i++) { if($_GET['section']=='100'.$i) { echo $section[$i].'
Previous Next

'; } } } // first item of two or more: else if(count($section)>3) { echo $section[1].'
Previous Next

'; } // single item: else { echo $section[1].'
Previous Next

'; } ?>


This is a copy/paste of the screen output. I see what you mean by it being "Buggy" The first section was saved as .php and .html; with and without html elements (body, dtd. etc) with similar results. The Content sect was saved as content.html


Any thoughts on this, or is server php-deficient?

Thanks again...


We need to know exactly what you did. What is the name of the file you uploaded? What is its URL so we can see? What instructions does your host give for enabling php? Etc.

AFAICS, you want to port your Excel[sp?] spreadsheet to a database, and generate the pages with (e.g.) PHP (or possibly something else). This is a straightforward sort of job for a web programmer, but it is not a _simple_ task for someone who isn't. HTH.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 12 2009, 08:17 AM
Post #19


.
********

Group: WDG Moderators
Posts: 7,917
Joined: 10-August 06
Member No.: 7



QUOTE(Baffled in Baltimore @ Jan 11 2009, 10:43 PM) *

In the mean time, I need to move back over to the original idea of using jscript and divs; it would be a big improvement over what's being done now.

Can you provide sample script / html for the purpose at hand?

The article Frederiek linked to has a demo here: http://www.alistapart.com/d/eatcake/final.html

There are a few disadvantages with JS, though. If there's a lot of content the page will take some time to load. If OTOH the content is not that big, why not make all the sections visible on the same page and save yourself the hassle with the hide/show mechanism? Search engines may (at least in theory) consider hidden content as SE manipulation.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Baffled in Baltimore
post Jan 12 2009, 09:10 AM
Post #20


Member
***

Group: Members
Posts: 51
Joined: 9-January 09
From: Baltimore, MD
Member No.: 7,507



This url produced the previous results; it has a php ext.
http://www.wjstewart-associates.com/_body.php

This url with an html ext produces the following results
http://www.wjstewart-associates.com/_body.html

CODE

3 && $_GET['section']=='100'.count($section)-2) { echo $section[(count($section)-2)].'
Previous Next

'; } // items between the first and last: else if(isset($_GET['section']) && $_GET['section']>1001 && $_GET['section']<'100'.count($section)-2) { for($i=2; $i<(count($section)-2); $i++) { if($_GET['section']=='100'.$i) { echo $section[$i].'
Previous Next

'; } } } // first item of two or more: else if(count($section)>3) { echo $section[1].'
Previous Next

'; } // single item: else { echo $section[1].'
Previous Next

'; } ?>


And the external file it seeks
http://www.wjstewart-associates.com/content.html

It would seem the server is not php enabled and is unlikely it will be. I haven't heard from them yet but I feel it will not go well. Although it would be advantagious, server-side data manipulation may not be possible with this host. This is why alternative methods are being sought...

Thanks again for your time
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

5 Pages V  1 2 3 > » 
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th October 2018 - 12:37 PM