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

[Baffled in Baltimore]

For clarification;

By mouseover menu, I am referring to one that shows only when mouse is hovered over an image. The menu would have your Prev-Next-Gallery-Category, etc

[Christian J]

also heading each section with the links or using a mouseover menu. If I use a mouseover menu, I could give each called image a null link (#) to make the mouseover active but how would I get this to work for prev-next?

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?

The mouseover effect might seem too much, but it would eliminate the need for seperate sets of links for each section(DIV)

You could always generate the links and IDs with JS.

What is significance of the pound sign (#) in the links?

It's used to identify a location on the same page (an element defined by ID or NAME). See http://htmlhelp.com/faq/html/links.html#named-anchor or the first example at http://en.wikipedia.org/wiki/Fragment_identifier

I know that all by itself it acts as a do-nothing go no-where link.

Often it's used like that in links meant to be used only with javascript :

CODE

<a href="#" onclick="foo();">JS-dependent link</a>

but that makes browsers without JS show a non-functional link. If the link is only to be used with JS it's better to generate the link with JS as well.

[Baffled in Baltimore]

Hello again Christian, J; and thanks

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]

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.

[Baffled in Baltimore]

Hello again Christian, J
This script looks a bit unique; If the script can be run as an external .js, (this is probably preferred) what method would work best to call it? a <script>src=,,,</script> inside the <HEAD> tags of the product pages containing the gallery divs?

The divd sections you mentioned wouldn't have to be serialized (section01, section02, etc) would they?

Thanks again

This post has been edited by Baffled in Baltimore: Jan 14 2009, 05:40 PM

[Christian J]

If the script can be run as an external .js, (this is probably preferred) what method would work best to call it? a <script>src=,,,</script> inside the <HEAD> tags of the product pages containing the gallery divs?

For an external file, use

CODE

<script type="text/javascript" src="external.js"></script>

You don't have to put it in the <head> section, but if you want to you must add this around the original script:

CODE

window.onload=function()
{

     // original script goes in here

}

The divd sections you mentioned wouldn't have to be serialized (section01, section02, etc) would they?

No the script does that automatically. The DIVs do need the CLASS "section", though (actually you could get rid of the classes too, but then you couldn't use DIVs for anything but product sections).

[Baffled in Baltimore]

Hello Christian, J
OK; thanks. I'll hard-code Excel accordingly

It's been a real challenge these past few weeks with my vision fading in & out; now my mouse is acting up. If I weren't slightly superstitious, I'd ask "WHAT's NEXT!" but I dare not...

I'll get something together and post it later for critique

Thanks again for your time and assistance

[Baffled in Baltimore]

Hi ALL...

I realize this is off-topic; during a recent dr visit, I was thinking of replacing the iframe scheme on my site by using divs for targeting multiple html. It is realized that many browsers don't render iframes and is the reason I would like to go with something more browser-friendly.

Below is something similar to what I am using and would like to replace;

CODE

<a href="java script:" onclick= "
frame1.location='page1.html';
frame2.location='page2.html' ">
Link</a>
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>

As can be seen, it is a simple Javascript "onclick" event.
I used this scheme for a Portfolio Website I put together for one of my classes in College a few years ago so it was used here.

Any assist with this is appreciated; and THANKS

This post has been edited by Baffled in Baltimore: Jan 16 2009, 05:57 PM

[Darin McGrew]

I would use a server-side content management system, so the links can use real URLs that can be bookmarked, linked to by other sites, indexed by search engines, etc.

[Baffled in Baltimore]

Hello Darin; and thanks

Unfortunately, my server does not support PHP or other languages that require server side access.

[Baffled in Baltimore]

Hello Darin; and thanks

Unfortunately, my server does not support PHP or other languages that require server side access.

PS:
The sample code is strictly generic; actual url's would be used of course

This post has been edited by Baffled in Baltimore: Jan 16 2009, 06:41 PM

[Christian J]

I was thinking of replacing the iframe scheme on my site by using divs for targeting multiple html.

Using DIVs how?

It is realized that many browsers don't render iframes and is the reason I would like to go with something more browser-friendly.

Almost all browsers support iframes today. They still cause problems, though: http://htmlhelp.com/faq/html/frames.html#frame-problems

Below is something similar to what I am using and would like to replace;

CODE

<a href="java script:" onclick= "
frame1.location='page1.html';
frame2.location='page2.html' ">
Link</a>
<iframe id="frame1"></iframe>
<iframe id="frame2"></iframe>

To make a single link change two framed pages without JS, you must load a new parent page with new iframe SRC values.

[Baffled in Baltimore]

I may know-enough about web-design to squeak by, but not enough to make it right...

Using DIVs how?

More accurately, what I am looking for is a way of calling one, two or three external pages depending what is selected from the site navigation or navigation in the sidebar and targeting these pages (or some of their content) into named divs. One page that is ALWAYS targeted is the "content" div (now an iframe named 'content')

An iframe was adopted for the "Main Content" because I don't know how to target DIVs the way an iframe can be targeted.

The objective is to "Click a Link" to call pages, targeting the
"Main Content"
"Sidebar content"
"Header" content"

All defined for style and layout using a CSS file; which is irrelevant because ONLY style and layout are pre-defined, not content..

Almost all browsers support iframes today. They still cause problems, though:

Yes they do; The operative word is "Almost" But what scheme supports them ALL? None that I'd imagine. Some are still using dinosaur browsers.

To make a single link change two framed pages without JS, you must load a new parent page with new iframe SRC values.

All this will do is make more pages. Why do this if the style sheet in use and some smart coding can be used. I am trying to get rid of the iframes, not create more pages using them.

The point is targeting a few named divs with alternate content when a link is used elsewhere on the same page. The Header section will be especially necessary for the Catalog pages as there are many uniquely-named sections. Targeting the Header with a given pages title would be a plus.

I realize that using JS for this has its risks, but they should be minimal and controllable.

Thanks in advance.

[Darin McGrew]

But what scheme supports them ALL?

Server-side mechanisms don't rely on browser capabilities. But you have indicated that you don't have access to server-side mechanisms.

[Baffled in Baltimore]

Server-side mechanisms don't rely on browser capabilities. But you have indicated that you don't have access to server-side mechanisms.

Thank you
The question was rhetorical
I do not have server-side access with my server.

[Frederiek]

Go see Coda-Slider demo.
It uses a coda-slider javascript, in conjunction with JQuery.
All content is within the page itself.

[Christian J]

An iframe was adopted for the "Main Content" because I don't know how to target DIVs the way an iframe can be targeted.

Javascript seems to be the only option here...

The objective is to "Click a Link" to call pages, targeting the
"Main Content"
"Sidebar content"
"Header" content"

Will the Sidebar and Header always be the same, or will their content change depending on which JS-link that was clicked? (Main Content will of course change.)

* If Sidebar and Header never change, you might make a single page and only change its Main Content with JS.

* If Sidebar and Header change in just a few predictable ways, you could make separate pages for each combination.

* If Sidebar and Header change in a multitude of ways, you may have to create them with JS.

Almost all browsers support iframes today. They still cause problems, though:

Yes they do; The operative word is "Almost" But what scheme supports them ALL? None that I'd imagine. Some are still using dinosaur browsers.

My guess is the ones without iframe support are roughly as many (or the same browsers) as the ones without JS support. Which of the two methods that has the least usability problems may vary from case to case.

I realize that using JS for this has its risks, but they should be minimal and controllable.

One basic fallback is to provide a HTML link to the index page on all other pages. The index page must then contain an HTML menu, header etc, and when you make updates you must change both this page and the JS file.

[Baffled in Baltimore]

Javascript seems to be the only option here...

Without server-side functionality, this was a given.

Will the Sidebar and Header always be the same, or will their content change depending on which JS-link that was clicked? (Main Content will of course change.)

Content - Always
Header - Mostly
Sidebar - 2 or 3 for Catalog Navigation (in build).

Probably the best analogy I can think of is a book. A service manual for sectionalized test equipment; say an oscilloscope main-frame, its vertical amplifier section and its time-base generator section. Each section has its own index, topics, sub-topics, chapter headings, etc. the Main Index identifies the others and vice versa.

My guess is the ones without iframe support are roughly as many (or the same browsers) as the ones without JS support. Which of the two methods that has the least usability problems may vary from case to case.

It isn't only browser compatibility; it is primary factor, but planning ahead too. I am currently using HTML TRANSITIONAL 4.01 DTD. At some point, I would like to publish under XHTML STRICT DTD. I know that under this standard, rendering is more uniform due to its strict coding requirements. Iframes don't do well here so they have to go. (or have I miss-read the requirements?) Just softening the blow when I go to W3Cs' Validation site.
The change-over may, or may not happen; depends on functionality of site when modified.

One basic fallback is to provide a HTML link to the index page on all other pages. The index page must then contain an HTML menu, header etc, and when you make updates you must change both this page and the JS file.

This too is a given and to keep page-count to minimum. There are enough support files to target as it is. (mostly html and some js for other functions.)

This post has been edited by Baffled in Baltimore: Jan 18 2009, 11:42 AM

[Baffled in Baltimore]

All content is within the page itself.

Nice!
Not exactly what I had in mind but Nice!

Thanks:)

[Christian J]

At some point, I would like to publish under XHTML STRICT DTD. I know that under this standard, rendering is more uniform due to its strict coding requirements. Iframes don't do well here so they have to go. (or have I miss-read the requirements?)

XHTML 1.0/Transitional allows iframes, XHTML 1.0/Strict doesn't (neither does HTML 4.01/Strict). But I don't recommend using XHTML in the first place, since it brings no benefits and just complicates things for the author. Use valid HTML 4.01 instead (Strict if possible).

In the future perhaps HTML5 will be used rather than XHTML: http://www.w3.org/TR/html5/