How best to highlight an an item...

[dorayme]

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


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

What on earth are you talking about. Get with the program, as my
daughter would say. Read the thread. This is a different thread
to the other one. Which thread is that? I knew you would wonder.
Hint: look them both up and compare them side by side.

 

[rf]

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

**** off.

 

[BootNic]

[snip]

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?

[snip]

There is usually more then one way to go about it all. However I need more
information, as I only have access to what is rendered by php, I would
really need to see the php source to give a reasonable suggestion.

Specifically I need to know how the list of links and table are generated,
in order to assign the class to them. In my example the table and link is
checked during the assembly and if a match is found a class is added. If
the links and table are not assembled by php then a search and replace
could be used to assign a class to them.

The redirection part of my example could be added to the top of the page
and do its thing independent of the part that assigns the class to the
desired elements.

If your example is php, then you could add just a bit of code to the page
to display the php source such as I have in my example.

What I use to display the php source follows:
<?php
$this_page = file_get_contents($_SERVER["SCRIPT_FILENAME"]);
echo '<div style="margin-top:2em;"><table summary="" style="border:solid
1px #008000;">
<caption style="margin:auto;text-align:left;border:solid 1px #008000;
padding:0.3em;">PHP SOURCE</caption>
<tbody>
<tr>
<td style="color:#4169E1; background-color:#FFFFE0;"><pre>'.
htmlentities($this_page).
'</pre></td>
</tr>
</tbody>
</table></div>';
?>

Take the precaution to ensure that you do not expose any user name or
password that may be in the php file.

 

[mbstevens]

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.

But if anyone
knows the way to go without blinding me with science... please,
do spill the beans. <g>

Sorry, doreme, to be a couple of days getting around to doing this,
but I was doing other things.

Here, try:
http://www.mbstevens.com/test/js_table_hlt.html?A
http://www.mbstevens.com/test/js_table_hlt.html?B

It is (yucch) JavaScript, but should degrade gracefully.
Works fine in Opera and Firefox, but I have not opened
my laptop to test it in IE yet. If it doesn't work,
some small modification probably will.

 

[dorayme]

dorayme <[email protected]>

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?

[snip]

There is usually more then one way to go about it all. However I need more
information, as I only have access to what is rendered by php, I would
really need to see the php source to give a reasonable suggestion.

I write out the page in HTML, there is no relevant php in my
page.[1] In the model at the above address, what you see in the
View Source is exactly what is in my html text file. All the id's
are put in by typing directly. Nothing is generated.[2]

The file internalLinking.html sits on a server and the dummy pic
"red.gif" referred to in the html is in a folder under it. Low
tech extreme.

Basically, if you give me the very first step or two I might
cotton on. Starting with I am staring at my own file called
internalLinking.html in my text editor and I am looking at your
webpage in a browser.

_______________
[1] I have some php includes for footers, etc but this is not
relevant.

[2] I used some GREP to grab the info from the <td> under the
<th> called Code and make up an id in the <tr>s... but this is
just my construction in my text editor before uploading the file.

 

[dorayme]

Sorry, doreme, to be a couple of days getting around to doing this,
but I was doing other things.

Here, try:
http://www.mbstevens.com/test/js_table_hlt.html?A
http://www.mbstevens.com/test/js_table_hlt.html?B

It is (yucch) JavaScript, but should degrade gracefully.
Works fine in Opera and Firefox, but I have not opened
my laptop to test it in IE yet. If it doesn't work,
some small modification probably will.

Thanks mb. I am testing it right now. Looks interesting and
simple and I got it working on my own file but there are some
issues with various browsers. Will report back.

 

[mbstevens]

Thanks mb. I am testing it right now. Looks interesting and
simple and I got it working on my own file but there are some
issues with various browsers. Will report back.

I did a version with #named_links, too. The problem was
that after looking at the first, most browsers had to use the
reload button to see the next link's highlights, because the browser
thought that it was looking at the same link. There is probably
a way around that, too, but I have not investigated it at any
length.

 

[BootNic]

[snip]

I write out the page in HTML, there is no relevant php in my
page.[1] In the model at the above address, what you see in the
View Source is exactly what is in my html text file. All the id's
are put in by typing directly. Nothing is generated.[2]

The file internalLinking.html sits on a server and the dummy pic
"red.gif" referred to in the html is in a folder under it. Low
tech extreme.

Basically, if you give me the very first step or two I might
cotton on. Starting with I am staring at my own file called
internalLinking.html in my text editor and I am looking at your
webpage in a browser.

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

[snip]

 

[dorayme]

Thanks mb. I am testing it right now. Looks interesting and
simple and I got it working on my own file but there are some
issues with various browsers. Will report back.

I did a version with #named_links, too. The problem was
that after looking at the first, most browsers had to use the
reload button to see the next link's highlights, because the browser
thought that it was looking at the same link. There is probably
a way around that, too, but I have not investigated it at any
length.[/QUOTE]

Yes that was something that I noticed. I am starting to wonder if
any technique that I am likely to comprehend and implement will
be worth it. Just for now, I have kept the internal links, styled
the whole to my satisfaction, and the punters will be armed with
the base address and the item number that they need to download
for.

The ultimate good degradability: don't put in anything that needs
to degrade.

I had some fun with your script and even changed a few things to
make a whole row have a nice backgound colour, good in some
browsers. Tried some padding to make the row cells huger but
with zero success.

[I know, I am feeling defeatest! The weather is so lousy here!
This afternoon I will replace my power booster on my Ford XY.
There is a technique to do it without having to remove the master
cylinder that I want to try. You unbolt it and yank the latter
out of the way, dragging the pipes along - easier said than done.
The booster then takes a few mins to replace. Otherwise there is
the well known miserable job of removing the master and having to
bleed and worst of all: stripping threads on the three unions to
the cylinder, one is underneath and simply cannot be seen! I wish
there was a _lively_ ng on these old buses, there isn't it seems!
So pardon me making this reference to this matter. Poor alt.html,
it is not fair what you all have to put up with.]

 

[mbstevens]

I did a version with #named_links, too. The problem was
that after looking at the first, most browsers had to use the
reload button to see the next link's highlights, because the browser
thought that it was looking at the same link. There is probably
a way around that, too, but I have not investigated it at any
length.

Yes that was something that I noticed. I am starting to wonder if
any technique that I am likely to comprehend and implement will
be worth it. Just for now, I have kept the internal links, styled
the whole to my satisfaction, and the punters will be armed with
the base address and the item number that they need to download
for. [/QUOTE]

Yes, I tested internal named links with an id matching the name
and used the same JS file. The first time a punter is sent to that
link you will get the highlighting. Subsequent visits to the page
will require them to do a reload to see it, though. You can put in
a 'show highlights' button to do that wtih JS's document.reload()
function, but that is not ideal of course.

The ultimate good degradability: don't put in anything that needs
to degrade.

I had some fun with your script and even changed a few things to
make a whole row have a nice backgound colour, good in some
browsers. Tried some padding to make the row cells huger but
with zero success.

[I know, I am feeling defeatest! The weather is so lousy here!
This afternoon I will replace my power booster on my Ford XY.
There is a technique to do it without having to remove the master
cylinder that I want to try. You unbolt it and yank the latter
out of the way, dragging the pipes along - easier said than done.
The booster then takes a few mins to replace. Otherwise there is
the well known miserable job of removing the master and having to
bleed and worst of all: stripping threads on the three unions to
the cylinder, one is underneath and simply cannot be seen! I wish
there was a _lively_ ng on these old buses, there isn't it seems!
So pardon me making this reference to this matter. Poor alt.html,
it is not fair what you all have to put up with.]

Recently did a new radiator for my old civic. Some fun. Had to
smith a new mount for the after-factory radiator.

 

[dorayme]

[snip]

Basically, if you give me the very first step or two I might
cotton on. Starting with I am staring at my own file called
internalLinking.html in my text editor and I am looking at your
webpage in a browser.

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

I returned to the issue this morning and achieved one success:
previously copying your code into my text editor resulted in
millions of errors. Finally nailed it down to spaces that were
not being translated right on this Mac machine.

What I did was select all the page at your kindly provided web
page above in the browser window and paste into my editor. I am
not sure whether I am supposed to change anything? If so, sorry,
it is just not obvious to me. Running the file (I called it
bootnic2.html) through my home server by simply typing the url to
it ending in .../enclosingFolder/bootnic2.html, two things happen
at once:

(1) The url changes to end with
..../enclosingFolder/?id=bootnic2.html

(2) The page goes from what it was (blank) to a directory window
showing all the files in the folder 'enclosingFolder' including
the one called bootnic2.html

Clicking bootnic2.html keeps me same place (albeit a little of
flashing in the url bar as it negotiates the link, like throwing
a ball up in the air a foot or two and it coming back into the
hand).

When I put it on an external server, a standard Unix one, it
shows a parse error: Parse error: syntax error, unexpected T_IF
on line 1.

Methinks it is a bit hard without me understanding more about the
nuts and bolts of php programming.

 

[BootNic]

[snip]

I returned to the issue this morning and achieved one success:
previously copying your code into my text editor resulted in
millions of errors. Finally nailed it down to spaces that were
not being translated right on this Mac machine.

What I did was select all the page at your kindly provided web
page above in the browser window and paste into my editor. I am
not sure whether I am supposed to change anything? If so, sorry,
it is just not obvious to me. Running the file (I called it
bootnic2.html) through my home server by simply typing the url to
it ending in .../enclosingFolder/bootnic2.html, two things happen
at once:

(1) The url changes to end with
.../enclosingFolder/?id=bootnic2.html

(2) The page goes from what it was (blank) to a directory window
showing all the files in the folder 'enclosingFolder' including
the one called bootnic2.html

Clicking bootnic2.html keeps me same place (albeit a little of
flashing in the url bar as it negotiates the link, like throwing
a ball up in the air a foot or two and it coming back into the
hand).

When I put it on an external server, a standard Unix one, it
shows a parse error: Parse error: syntax error, unexpected T_IF
on line 1.

Methinks it is a bit hard without me understanding more about the
nuts and bolts of php programming.

Humm, well I don't know, but perhaps the shortcut I took in making the
original kind os screwed it up.

However there is now a different version of it up that copies fine for
me.

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

There is also a text version and a live version. Give it a go and see
what happens.

http://bootnic.atwebpages.com/dorayme.txt.php
http://bootnic.atwebpages.com/doraymeLiveExample.php

 

[dorayme]

Humm, well I don't know, but perhaps the shortcut I took in making the
original kind os screwed it up.

However there is now a different version of it up that copies fine for
me.

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

There is also a text version and a live version. Give it a go and see
what happens.

http://bootnic.atwebpages.com/dorayme.txt.php
http://bootnic.atwebpages.com/doraymeLiveExample.php

Good morning, gorgeous sunny day in Sydney seems to be starting.
I ran the last url and was _incensed_ to see it working so well
on your server It is like a shiny toy that I am trying to grab
but which seems always out of my reach! <g>

There is something I need to do which I have not done. What?

The position remains basically unchanged from last time. Thanks
for the text version but this only avoided a problem that I had
solved anyway. In other words, if I use your text version to make
my file destined for my home server or an external server, I get
no problems of translation at all, the html all validates fine,
no errors show up in my text editor (I have a function that
checks it for valid html according to the doctype). But this is a
stage I reached before via replacing lots of unwanted characters
by normal spaces on this Mac.

The file I made from the text version is at

<http://netweaver.com.au/testFolder/internalLinking/bootnicFromTex
tVersion.html>

and is now doing essentially the same thing on both my off line
server and the server above. Namely: when you type the above into
a browser url bar, it changes to

<http://netweaver.com.au/testFolder/internalLinking/?id=bootnicFro
mTextVersion.html>

and shows a directory listing. I have left the directory listing
to this folder open for you to see. I know, you cannot see the
file but it is simply the text version copied and then saved as
..html.

 

[BootNic]

http://bootnic.atwebpages.com/dorayme.php [snip]
http://bootnic.atwebpages.com/dorayme.txt.php
http://bootnic.atwebpages.com/doraymeLiveExample.php

[snip]
The file I made from the text version is at

<http://netweaver.com.au/testFolder/internalLinking/bootnicFromTex
tVersion.html>

and is now doing essentially the same thing on both my off line
server and the server above. Namely: when you type the above into
a browser url bar, it changes to

<http://netweaver.com.au/testFolder/internalLinking/?id=bootnicFro
mTextVersion.html>

and shows a directory listing. I have left the directory listing
to this folder open for you to see. I know, you cannot see the
file but it is simply the text version copied and then saved as
.html.

Appear to have something to do with the redirect part of the php.

Rather then trying to trouble shoot it, I just rewrote it. With any luck
this version may work for you. This version I had a few attempts to get
it to work online and local, with the online server being the difficult
one. Online and local servers are completely different, different OS,
different apache versions, different php versions, so again with a little
luck it may work.

url's are the same, content changed.

 

[BootNic]

(e-mail address removed): [snip]
Appear to have something to do with the redirect part of the php.

Rather then trying to trouble shoot it, I just rewrote it. With any
luck this version may work for you. This version I had a few attempts
to get it to work online and local, with the online server being the
difficult one. Online and local servers are completely different,
different OS, different apache versions, different php versions, so
again with a little luck it may work.

url's are the same, content changed.

Ah well, I had a bit of a problem with the silly thing. Fixed now so if
you got to it before this post you may want to try it again.

 

[dorayme]

http://bootnic.atwebpages.com/dorayme.php [snip]
http://bootnic.atwebpages.com/dorayme.txt.php
http://bootnic.atwebpages.com/doraymeLiveExample.php

[snip]
The file I made from the text version is at

<http://netweaver.com.au/testFolder/internalLinking/bootnicFromTex
tVersion.html>

and is now doing essentially the same thing on both my off line
server and the server above. Namely: when you type the above into
a browser url bar, it changes to:

<http://netweaver.com.au/testFolder/internalLinking/?id=bootnicFro
mTextVersion.html>

and shows a directory listing. I have left the directory listing
to this folder open for you to see. I know, you cannot see the
file but it is simply the text version copied and then saved as
.html.

Appear to have something to do with the redirect part of the php.

Rather then trying to trouble shoot it, I just rewrote it. With any luck
this version may work for you. This version I had a few attempts to get
it to work online and local, with the online server being the difficult
one. Online and local servers are completely different, different OS,
different apache versions, different php versions, so again with a little
luck it may work.

url's are the same, content changed.

Now we are cooking with gas. Well done BootNic! Online and local
server behaving identically (as was the case, btw, _just_ prior
to your latest edit. But this time with a success in both).

I am delighted just to see it working on my servers. It works on
my quick tests just now to highlight the given item from the
navigation on the page. That's great, of course.

If I wanted to give a more specific address to someone, suppose
they need to download a particular zipped package, I can append
#RA_TK1 (for example) to the url after the html. This gets the
said item onto the page (at least in compliant browsers) but no
highlighting occurs. If one then scrolls up to top and clicks the
menu item concerned, highlighting does occur (ie. that part still
works good).

Is there anything that can be done to enable highlighting to
occur from simply entering a specific /...html#RA_TK1 into the
url bar?

Whether yes or no, this is very interesting to me and I now look
to using it, especially in pages where people are not likely to
be coming to a particular item from outside. I have a few of
these and they are perfectly apt for your code.

The particular facility I have made that prompted all this is a
bit special in that people will not be coming to browse but
_always_ coming for a specific item. What I have already, does
the job. But I have been considering dispensing with the big
table altogether and instead, having a page for each item with an
included menu for all the other items/pages (The latter for
convenience of the main client and myself and anyone who needs to
print more than one item). I understand that one can generate
such pages on the fly depending on the link sought. In other
words, just one page really and some php that would blossom into
any one of a 100 or more pages. Either 100 pages or one, this may
be the way I will go on this particular little project. It is
very easy for me to make 100 near identical pages with an
included menu to all. All low tech. But it is simply interesting
to learn cleverer ways.

 

[dorayme]

Ah well, I had a bit of a problem with the silly thing. Fixed now so if
you got to it before this post you may want to try it again.

Well, I am not sure I was having any problem, just finished
acknowledging a success. But I am assuming the business of
specific addresses is not the glitch you referred to. Anyway, I
will update anyway.

btw, my iCab browser reports:

CSS Error (11/24): Invalid property value ³rgb².
CSS Error (11/25): Unknown CSS property ³².

I have not looked into this yet, sure to be nothing much.

 

[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>

You could probably check into the $_SERVER superglobal in PHP. Create
your id and css based on the query string.

Norm

 

[BootNic]

[snip]

If I wanted to give a more specific address to someone, suppose
they need to download a particular zipped package, I can append
#RA_TK1 (for example) to the url after the html. This gets the
said item onto the page (at least in compliant browsers) but no
highlighting occurs. If one then scrolls up to top and clicks the
menu item concerned, highlighting does occur (ie. that part still
works good).

Is there anything that can be done to enable highlighting to
occur from simply entering a specific /...html#RA_TK1 into the
url bar?

Replace # with /

This one will go to #FU_TK1 but not highlighted:
http://bootnic.atwebpages.com/doraymeLiveExample.php#FU_TK1

This one will go to #FU_TK1 and highlighted:
url] http://bootnic.atwebpages.com/doraymeLiveExample.php/FU_TK1 [/url]

[snip]

 

[dorayme]

[snip]

If I wanted to give a more specific address to someone, suppose
they need to download a particular zipped package, I can append
#RA_TK1 (for example) to the url after the html. This gets the
said item onto the page (at least in compliant browsers) but no
highlighting occurs. If one then scrolls up to top and clicks the
menu item concerned, highlighting does occur (ie. that part still
works good).

Is there anything that can be done to enable highlighting to
occur from simply entering a specific /...html#RA_TK1 into the
url bar?

Replace # with /

This one will go to #FU_TK1 but not highlighted:
http://bootnic.atwebpages.com/doraymeLiveExample.php#FU_TK1

This one will go to #FU_TK1 and highlighted:
url] http://bootnic.atwebpages.com/doraymeLiveExample.php/FU_TK1 [/url]

I think you or someone mentioned about this / instead of the #
earlier on and I missed the significance then. But with greater
success comes greater focus.

That does it in the modern browsers I tested on my Mac. So now
your code works for the two main purposes I had in mind. You must
know I am well pleased with this. Thanks a lot for this. I am
sure it will be of benefit to others too. Yet another bootnic.php
child script hits the net. <g>