|
Posted by Monte Gardner on December 29, 2004, 10:38 am
Please log in for more thread options
I'm trying to create an effect wherein an HTML page contains a large
number of products (up to 125 possibly). Initially, only the first 3
are displayed. When the user clicks on a 'next' or 'previous' button,
the currently displayed products dissappear and the next or previous
set of 3 appear in the same place.
I've got it working in IE 6.0. It's mostly working in Netscape 7.2.
The only
problem in NS 7.2 is that each time you click on the 'previous' or
'next' buttons there is an area of space between the products and the
next/previous link that keeps on getting bigger untill you can't see
the products and the links on the same page.
The javascript code I'm using to hide things is :
function setObjectVisibility(objectID,state)
{
styleObject = dom(objectID,1);
styleObject.display = state;
}
I have a table with a series of rows with ID = "#" where # is the
zeroe-based sequence number of the row.
<tr id = "0"> ...</tr>
<tr id = "1">...</tr>
etc..
The page is located at
http://www.storesonline.com/site/615834/page/448822
The javascript is mostly in an external file at
http://www.storesonline.com/members/615834/uploaded/menu.js
how do I make this work in current versions of Netscape?
|
|
Posted by Harlan Messinger on December 29, 2004, 1:55 pm
Please log in for more thread options
> I'm trying to create an effect wherein an HTML page contains a large
> number of products (up to 125 possibly). Initially, only the first 3
> are displayed. When the user clicks on a 'next' or 'previous' button,
> the currently displayed products dissappear and the next or previous
> set of 3 appear in the same place.
> I've got it working in IE 6.0. It's mostly working in Netscape 7.2.
> The only
> problem in NS 7.2 is that each time you click on the 'previous' or
> 'next' buttons there is an area of space between the products and the
> next/previous link that keeps on getting bigger untill you can't see
> the products and the links on the same page.
The usual reason for displaying only a few items at a time is so that only a
few items need to be *sent* at one time, saving waiting time and network
bandwidth. You're not doing that--you're sending all of the items at once,
making the user wait for ALL the items to download to his page--and then you
only let him see three at a time anyway, and you make him wait for
Javascript to execute before showing him more. If you've already sent the
data anyway, then *display* it all, and let the user use his scroll bar to
browse through them.
Besides, when I look at your page in Firefox, it *does* show me all the
items; it only starts hiding them *after* I click Next.
|
|
Posted by Monte Gardner on December 29, 2004, 11:55 am
Please log in for more thread options My understanding is that if you set the style of a table row to
"display:none"
as that table row is being written out, then any images within that row
will not
be loaded untill the table row is set back to visible again. That's
what I'm doing.
Is my understanding incorrect?
|
|
Posted by Martin Honnen on December 29, 2004, 7:51 pm
Please log in for more thread options
Monte Gardner wrote:
> When the user clicks on a 'next' or 'previous' button,
> the currently displayed products dissappear and the next or previous
> set of 3 appear in the same place.
> I've got it working in IE 6.0. It's mostly working in Netscape 7.2.
> The only
> problem in NS 7.2 is that each time you click on the 'previous' or
> 'next' buttons there is an area of space between the products and the
> next/previous link that keeps on getting bigger untill you can't see
> the products and the links on the same page.
>
> The javascript code I'm using to hide things is :
> function setObjectVisibility(objectID,state)
> {
> styleObject = dom(objectID,1);
> styleObject.display = state;
If you want to have a <tr> element displayed then the correct CSS 2
display value is table-row and not block. Netscape/Mozilla implement CSS
2 and the problem you see is probably caused by your script setting the
display value of a <tr> element to block.
It is a bit difficult to write script for both IE and other browsers, in
particular as you seem to start with display: none set in static CSS.
It is easier to start no static CSS on the <tr> elements and then use
script to set
element.style.display = 'none'
to hide an element and
element.style.display = '';
to show it again.
Of course that means you need to hide some rows initially on page load
but that way your page does also work if script is disabled or not
supported so I suggest you go this way.
--
Martin Honnen
http://JavaScript.FAQTs.com/
|
|
Posted by Monte Gardner on December 29, 2004, 11:54 am
Please log in for more thread options ok, the style.display = ''; seems to have fixed the problem, though I'm
still
a little confused as to what was happening.
I left the static iniital CSS stuff in and it doesn't seem to be
causing a problem. My page works in current versions of IE, Netscape
and Mozilla Firefox now. Thanks for the help folks.
Martin Honnen wrote:
> Monte Gardner wrote:
>
>
> > When the user clicks on a 'next' or 'previous' button,
> > the currently displayed products dissappear and the next or
previous
> > set of 3 appear in the same place.
> > I've got it working in IE 6.0. It's mostly working in Netscape
7.2.
> > The only
> > problem in NS 7.2 is that each time you click on the 'previous' or
> > 'next' buttons there is an area of space between the products and
the
> > next/previous link that keeps on getting bigger untill you can't
see
> > the products and the links on the same page.
> >
> > The javascript code I'm using to hide things is :
> > function setObjectVisibility(objectID,state)
> > {
> > styleObject = dom(objectID,1);
> > styleObject.display = state;
>
> If you want to have a <tr> element displayed then the correct CSS 2
> display value is table-row and not block. Netscape/Mozilla implement
CSS
> 2 and the problem you see is probably caused by your script setting
the
> display value of a <tr> element to block.
> It is a bit difficult to write script for both IE and other browsers,
in
> particular as you seem to start with display: none set in static CSS.
> It is easier to start no static CSS on the <tr> elements and then use
> script to set
> element.style.display = 'none'
> to hide an element and
> element.style.display = '';
> to show it again.
> Of course that means you need to hide some rows initially on page
load
> but that way your page does also work if script is disabled or not
> supported so I suggest you go this way.
>
> --
>
> Martin Honnen
> http://JavaScript.FAQTs.com/
|
|
