How best to highlight an an item...

[dorayme]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style.

Can't think of any normal html/css way of doing this. Not
particularly keen on a js way ...though I might consider it as it
is sort of an extra bit of help and not fundamentally bad if
anyone has it turned off.

Anyone know of a php way perhaps? Do I have to go to alt.php. or
alt.js.

Can't I please just stay here? I like it here in spite of my bad
treatment.

I am reminded of that php stuff that I have used to stick in an
id="current" on some list items depending on the html file being
accessed. Perhaps it will all be clear by morning. But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

 

[rf]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style.

Can't think of any normal html/css way of doing this. Not
particularly keen on a js way ...though I might consider it as it
is sort of an extra bit of help and not fundamentally bad if
anyone has it turned off.

Anyone know of a php way perhaps? Do I have to go to alt.php. or
alt.js.

Can't I please just stay here? I like it here in spite of my bad
treatment.

I am reminded of that php stuff that I have used to stick in an
id="current" on some list items depending on the html file being
accessed. Perhaps it will all be clear by morning. But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

I do something similar in a CMS. There is a table of, say, pages. One of
those pages will be the current one being actioned (deleted, renamed, edited
or whatever).

// $arr is an array of rows from the database.
// $current is the index into this array of the page being actioned.
for ($i = 0;$i < count($arr);$i++)
{
echo '<tr';
if ($i == $current)
{
echo " class='current'";
}
// optional if you want rows coloured alternatively. Easier to read.
else if ($i % 2)
{
echo "class='odd'";
}
echo ">\r\n";
// echo a <td> for each field in the row
echo "</tr>\r\n";
}

Flavour 'current' and 'odd' to taste, probably using background colour.

 

[Andy Dingley]

Can't think of any normal html/css way of doing this. Not
particularly keen on a js way

No reliable :hover outside of <a>, so you're stuck with either JS or
both. Both works fine. It's hardly a crucial feature, so a graceful JS
degradation shoudl be OK too.

Use standard JS rollover code to flip the class on the row. You should
be easily able to integrate this with your CSS rules for the :hover
selector too. Make sure that the JS doesn't wipe out any previous
class settings though, such as an even/odd indicator for a striped
table.

Anyone know of a php way perhaps?

Nope. It's an asynchronous client-side event, you're going to have to
cope with it client-side.

 

[mbstevens]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style.

You might modify one of these demos of meyers
to make an arrow appear at the
beginning (and/or end) of each row as it is hovered:

http://meyerweb.com/eric/css/edge/popups/demo.html
http://meyerweb.com/eric/css/edge/menus/demo.html

 

[dorayme]

You might modify one of these demos of meyers
to make an arrow appear at the
beginning (and/or end) of each row as it is hovered:

http://meyerweb.com/eric/css/edge/popups/demo.html
http://meyerweb.com/eric/css/edge/menus/demo.html

Hi mb, hovering effects are nothing I want here.

It is like this: a company clerk somewhere in the world will be
looking at some url in some paperwork where he needs to go to
download something. The thing he needs will be in a row of a
table on a web page that I produce. He can easily scroll the
table and find it (all rational alpha numerical order), but it
would be nice if it jumped out at him in case he has had a heavy
night. The css is the easy bit. The harder bit is getting the
style to apply to the bit he wants when he clicks the url.

Sure, the url will have a #... tacked on and this gets the item
on the browser window. Very helpful. But the clerk has had a
_very_ heavy night and a bit more help for him would be nice.

I think rf has a route, I do not have a data base though. But I
will keep his code (thanks rf, if I have understood you?) for
future or mull over it a while.

There are many other ways I can work things but it would be nice
to get or make some script I could stick on the page in the head
to cause row 473 at url#473 to stand out. AD says it cannot be
done server-side. JS will do, I guess, for this. So now to think
about or find a js script to do the job. If anyone knows a
specific url to any js that would help, I would appreciate it.

About the actual styling I favour more than just background
colour, I rather fancy a lot more padding, that would grab the
clerk's attention.

 

[BootNic]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style. [snip]
I am reminded of that php stuff that I have used to stick in an
id="current" on some list items depending on the html file being
accessed. Perhaps it will all be clear by morning. But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

http://bootnic.atwebpages.com/DataRowSelectExample.php

 

[dorayme]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style. [snip]
I am reminded of that php stuff that I have used to stick in an
id="current" on some list items depending on the html file being
accessed. Perhaps it will all be clear by morning. But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

http://bootnic.atwebpages.com/DataRowSelectExample.php

This looks very promising to me. I need to study it further.
After breakfast. My quick test just now was:

I clicked on one of your blue links at top. This got me an
address I wanted to see in the url bar. I got

<http://bootnic.atwebpages.com/DataRowSelectExample.php?row=1#j-kl
o70001>

I notice that to get a different row I need to change both the
"row=..." and of course, the end number 7000... in the url bar.
This does the trick of directing a complete outsider to the table
with a particular row highlighted. This might well do me! Thanks
for this. I am almost sure to use it. Will let you know how it
goes.

(Hey BootNic, because the php is not linked and named, how can I
name it in your honour as with a previous bit of js you made a
while back? I will have to sprinkle some comments about in the
html <g>)

 

[BootNic]

This looks very promising to me. I need to study it further.
After breakfast. My quick test just now was:

I clicked on one of your blue links at top. This got me an
address I wanted to see in the url bar. I got

<http://bootnic.atwebpages.com/DataRowSelectExample.php?row=1#j-kl
o70001>

I notice that to get a different row I need to change both the
"row=..." and of course, the end number 7000... in the url bar.
This does the trick of directing a complete outsider to the table
with a particular row highlighted. This might well do me! Thanks
for this. I am almost sure to use it. Will let you know how it
goes.

If you are pulling this out of a data base perhaps the id and row should
be based on the uniqueId, and not the row count as in my very simple
example. Same basic ideal, just matching it to something a bit more
dependable.

(Hey BootNic, because the php is not linked and named, how can I
name it in your honour as with a previous bit of js you made a
while back? I will have to sprinkle some comments about in the
html <g>)

You are giving me more credit then I deserve. This is nothing new at all.
However if you like, I would not object to:

<!--
http://groups.google.com/group/alt.html/browse_thread/thread/3b08e1e59843
a49d
-->

 

[dorayme]

<http://bootnic.atwebpages.com/DataRowSelectExample.php?row=1#j-kl
o70001>

I notice that to get a different row I need to change both the
"row=..." and of course, the end number 7000... in the url bar.
This does the trick of directing a complete outsider to the table
with a particular row highlighted. This might well do me! Thanks
for this. I am almost sure to use it. Will let you know how it
goes.

If you are pulling this out of a data base perhaps the id and row should
be based on the uniqueId, and not the row count as in my very simple
example. Same basic ideal, just matching it to something a bit more
dependable.[/QUOTE]

I left out of my previous message some queries about this matter.
Just thought I would first look at your script more closely.
Ideally, I would like to id each row <tr id="..."> because it
would be nice not to have to ask my client to put text with
row="..." in as part of their code. It is desirable to make the
code for the product exactly the same as this id. I have nothing
to do with my client's database. I just want to make sure that
they have a unique address for each product in my table, there is
one product per row and each row can have an id. This way there
is a simple rule for the client to make a unique url for any
product whatsoever, namely:

Put # followed by the code onto a base url.

Whereas with your scheme, I have to tell them the exact appendage
for each product, or they have to look to see the row it is on
(There are other categorization issues I have left out for
simplicity, the rows will be broken up and there will probably
end up being more than one table).

So, I will have to look at this more closely.

 

[mbstevens]

It is like this: a company clerk somewhere in the world will be
looking at some url in some paperwork where he needs to go to
download something. The thing he needs will be in a row of a
table on a web page that I produce. He can easily scroll the
table and find it (all rational alpha numerical order), but it
would be nice if it jumped out at him in case he has had a heavy
night. The css is the easy bit. The harder bit is getting the
style to apply to the bit he wants when he clicks the url.

OK, I _think_ I see what you're trying to do now.
What server side languages do you have available?

If the visitor has a CGI link like, e.g., "x.com?450,"
then you can change not only the page's content, but
the generated page's CSS given the stuff after the question
mark (in this case, 450).

If you don't have a data base, as you say, that is too bad. But if
the number of possible generated pages is not really huge, you can
easily keep CSS highlighting information in, e.g., a "450.template" file along with
the particular content for that generated page. Then you use the
information in that file as a template for the generated page.

Whether this is practicable depends on how many possible pages there are
and how you calculate the content. Even if you had SQL or such available,
the general practice of storing specialized CSS with specialized content
should work. If the number and size of changes on possible pages is quite
small, you can even store it inside the program itself in an associative
array.

 

[dorayme]

OK, I _think_ I see what you're trying to do now.
What server side languages do you have available?

I have php. Probably cgi ...

 

[Norman Peelman]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style.

Can't think of any normal html/css way of doing this. Not
particularly keen on a js way ...though I might consider it as it
is sort of an extra bit of help and not fundamentally bad if
anyone has it turned off.

Anyone know of a php way perhaps? Do I have to go to alt.php. or
alt.js.

Can't I please just stay here? I like it here in spite of my bad
treatment.

I am reminded of that php stuff that I have used to stick in an
id="current" on some list items depending on the html file being
accessed. Perhaps it will all be clear by morning. But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

I'd say this is best done server-side, that's where the code is
received to begin with. You simply need to output a different css style
for the desired row as you output the rows. Like:

$desired_row = isset($_GET['row']) ? $_GET['row'] : false;
if ($desired_row === false)
{ // do error checking, etc
}

//and then in your output code

for($loop = 0; $loop<=$num_rows; $loop++)
{
....
if ($loop == $desired_row)
{
//output an id, class for this row - define this class in the main
html/css file
// echo the row
....
}

outside of that you need to ask in a PHP group... no need for js, etc.

Norm

 

[BootNic]

I left out of my previous message some queries about this matter.
Just thought I would first look at your script more closely.
Ideally, I would like to id each row <tr id="..."> because it
would be nice not to have to ask my client to put text with
row="..." in as part of their code. It is desirable to make the
code for the product exactly the same as this id. I have nothing
to do with my client's database. I just want to make sure that
they have a unique address for each product in my table, there is
one product per row and each row can have an id. This way there
is a simple rule for the client to make a unique url for any
product whatsoever, namely:

Can be done with id if that is what is desired. The basic ideal remains.

Put # followed by the code onto a base url.

How about using / in place of #?

Whereas with your scheme, I have to tell them the exact appendage
for each product, or they have to look to see the row it is on
(There are other categorization issues I have left out for
simplicity, the rows will be broken up and there will probably
end up being more than one table).

Not an issue Modifications were made see if its a bit more suitable.

[url} http://bootnic.atwebpages.com/DataRowSelectExample.php [/url]

[snip]

 

[El Kabong]

I will be soon making up a page with a table of items. There will
be a fair few rows. All not high, all tabular.

People will be referencing parts of it via links that latch onto
ids that will be placed on the <tr>s. But while this will narrow
things down for folk, they will still see a whole lot of other
stuff depending on the vertical size of their browser window. I
was rather hoping there might be a neat way of also highlighting
the row concerned, not necessarily literally the row, but
something to mark it out as the one to be attended to. Need no
help with the actual css, more with how to let the browser or
server know which row needs the style.

Can't think of any normal html/css way of doing this. Not
particularly keen on a js way ...though I might consider it as it
is sort of an extra bit of help and not fundamentally bad if
anyone has it turned off.

Anyone know of a php way perhaps? Do I have to go to alt.php. or
alt.js.

Can't I please just stay here? I like it here in spite of my bad
treatment.

I am reminded of that php stuff that I have used to stick in an
id="current" on some list items depending on the html file being
accessed. Perhaps it will all be clear by morning. But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

I've never done it but according to "CSS Cookbook" by Christopher Schmitt,
(available at Amazon for $29.69 USD,) you can "use the target pseudo-class
to define the look of the elements when the user clicks on the anchored
link."

(Hope he doesn't mind me quoting him.)

Here's how I think it would work in your example:

..sku th,td:target {
background-color: #FFFF00;
color: #00000
font-weight: 800;
}

And then you would include class="sku" in appropriate cell elements... I
think... maybe.

If it works for you I may try it myself.

El

 

[dorayme]

I've never done it but according to "CSS Cookbook" by Christopher Schmitt,
(available at Amazon for $29.69 USD,) you can "use the target pseudo-class
to define the look of the elements when the user clicks on the anchored
link."

(Hope he doesn't mind me quoting him.)

Here's how I think it would work in your example:

.sku th,td:target {
background-color: #FFFF00;
color: #00000
font-weight: 800;
}

And then you would include class="sku" in appropriate cell elements... I
think... maybe.

If it works for you I may try it myself.

I wonder if we can do this a little differently El? There will be
a side-splitting joke in it for you. My instinct tells me this
will not work.

Go to http://tinyurl.com/24y5hp and copy the source code. Please
try out your suggestion on it. (Don't forget to put a semicolon
after "color: #000". Leave out that font-weight too perhaps) and
test in different browsers.

You are the man, you have the book with the secrets. <g>

 

[dorayme]

with your scheme, I have to tell them the exact appendage
for each product, or they have to look to see the row it is on
(There are other categorization issues I have left out for
simplicity, the rows will be broken up and there will probably
end up being more than one table).

Not an issue Modifications were made see if its a bit more suitable.

[url} http://bootnic.atwebpages.com/DataRowSelectExample.php [/url]

You might have noticed that I am sorting out other basic issues
first but I really would like to apply this sort of php as it
should provide a nice touch. It sure works nice on your example.
Pardon me for some haphazard comments here but I will come back
to this issue later:

Your latest replaces having to add

row=1#j-klo70001

to a base url if one wants a unique address with

id=j-klo70001#j-klo70001

This a bit longer in fact but easier to operate with for my
client, they do not need to refer to rows anymore. They know the
item code (j-klo70001 or whatever) from their end

For internal linking, either of your schemes is fine.

I have to work out how to dovetail it to my code.

In the meantime, my work is accepted and there is now no urgent
need for the client to do other than refer all people to one
simple url (of the page) on which is an internal menu. That is
where your php should be nice for further negotiation of the page.

 

[BootNic]

[snip]

Your latest replaces having to add

row=1#j-klo70001

to a base url if one wants a unique address with

id=j-klo70001#j-klo70001

This a bit longer in fact but easier to operate with for my
client, they do not need to refer to rows anymore. They know the
item code (j-klo70001 or whatever) from their end

Its really much shorter and easier then that, the actual link would be
something like:
http://bootnic.atwebpages.com/DataRowSelectExample.php/j-klo70001
then the php converts and redirects to:
http://bootnic.atwebpages.com/DataRowSelectExample.php?id=j-klo70001#j-kl o70001

[snip]

 

[El Kabong]

I wonder if we can do this a little differently El? There will be
a side-splitting joke in it for you. My instinct tells me this
will not work.

Go to http://tinyurl.com/24y5hp and copy the source code. Please
try out your suggestion on it. (Don't forget to put a semicolon
after "color: #000". Leave out that font-weight too perhaps) and
test in different browsers.

You are the man, you have the book with the secrets. <g>

But, but, I was trying to avoid being terminally embarrassed by letting you
work out the ugliness.

Oh well, I'll read a little more of the book, maybe.

:-|

El

 

[dorayme]

[snip]

Its really much shorter and easier then that, the actual link would be
something like:
http://bootnic.atwebpages.com/DataRowSelectExample.php/j-klo70001
then the php converts and redirects to:
http://bootnic.atwebpages.com/DataRowSelectExample.php?id=j-klo70001#j-kl o70001

I have been a bit shy of saying this, I like your idea and now
that I am well under way to finishing all the basics on the page
I have been working on (a lot of it involved sorting out artwork
and zipping the packages up) I am ready for the "enhancement" of
this highlighting business. But when I came to _actually_ do it,
I am finding it none too easy. I thought it would be easy given
your source code and all. My page is .html for a start. The
server it is going to is set to process any php code, includes
etc on .html pages. So is my home server.

What is the very first thing I need to do to adapt it to my page?
Suppose that <http://tinyurl.com/24y5hp> is a reasonable
simplified model. What are the steps I need to take please?

(Please rf, no smart remarks... it is pretty hard to admit my
fallibility and innocence this publicly. Go ski down some hill...)

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Fri, 24 Aug 2007 08:51:46
GMT dorayme scribed:

Suppose that <http://tinyurl.com/24y5hp> is a reasonable
simplified model. What are the steps I need to take please?

Hey, that source is rendered reasonably decently! Whatever you did there,
stick with it.