Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Paris, France
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Highlighting an <a name>

    Hello, I'm new here. My website is written in html (probably an out of date version, but it works).

    On one page I present photographs of club members, each of which contains a hotlink to their own url on the web somewhere. They are all shown in a table (yes, I know tables are nasty, but at least I understand them...) of 9 photos across, unlimited scroll down.

    Another page lists details of past events in which these members featured, with an <a href> to link the name to the person's photo via <a name>. But of course it jumps to the entire line, and the reader has to look at all 9 photos to find the photo he wants.

    Whereas, if there were some nice easy method of getting the photo to glow or be somehow highlighted when jumped to, that would be really cool.

    I realise I may be in for a bit of javascript here, but I can take it. (I hope). I do have another bit in there somewhere, which works.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Don't use <a name> for the anchor point for links - many modern browsers don't support it and the most recent browser to require it was Netscale 4. Modern browser use any tag with an id as the anchor to link to.

    Also don't try to link into a table - you can only link to the top of the table , not to anywhere inside it. If you want to link to positions within a table then you will need to get rid of the table.

    You will need to get the HTML fixed before you can add any effects.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    StefParis (08-15-2013)

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    And modern browsers don’t need JavaScript, CSS 3 has the :target pseudo-class:

    Code:
    <a href="#example">link</a>
    …
    …
    <div id="example">content</div>
    Code:
    div:target {background-color: lime;}
    When the link is clicked the element which is the target of the link is styled.

    felgall, as far as I know you can link wherever you want, even inside a table. At the very least you could use an element with ID inside a table cell to link to, or am I wrong?

  • Users who have thanked VIPStephan for this post:

    StefParis (08-15-2013)

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by VIPStephan View Post
    felgall, as far as I know you can link wherever you want, even inside a table. At the very least you could use an element with ID inside a table cell to link to, or am I wrong?
    When the id is anwhere inside a table most browsers will jump to the top of the table rather than to the spot within the table as a table is considered to be a single HTML element. An id anywhere within a table acts as an anchor point for the table since the top of the element containing the id is the top of the table.

    Where the content of a table should be treated as separate elements the content is not tabular data and so should not be in a table in the first place.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Paris, France
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thanks guys!

    Quote Originally Posted by felgall View Post
    When the id is anwhere inside a table most browsers will jump to the top of the table rather than to the spot within the table as a table is considered to be a single HTML element. An id anywhere within a table acts as an anchor point for the table since the top of the element containing the id is the top of the table.

    Where the content of a table should be treated as separate elements the content is not tabular data and so should not be in a table in the first place.
    In fact the link does jump to the right row of the table, not to the top, but I take your point. I use tables because I failed to get divs to work. Guess I'll have to go back to school

    Thanks for your help.

  • #6
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Paris, France
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    And modern browsers don’t need JavaScript, CSS 3 has the :target pseudo-class:

    Code:
    <a href="#example">link</a>
    …
    …
    <div id="example">content</div>
    Code:
    div:target {background-color: lime;}
    When the link is clicked the element which is the target of the link is styled.

    felgall, as far as I know you can link wherever you want, even inside a table. At the very least you could use an element with ID inside a table cell to link to, or am I wrong?
    Thanks for the suggestion - I hadn't come across CSS before I found this forum. Do you know where I can download a free manual? (That's how I learned html : that and many hours' tearing my hair out!)

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Quote Originally Posted by StefParis View Post
    I hadn't come across CSS before I found this forum.
    That's interesting. All of the positional commands in HTML were declared to be obsolete back in 1997 with CSS being the replacement for them. I am surprised that there are any sites or books around now that teach HTML without covering CSS as well in great detail as it is impossible to create web pages without using both. HTML defines the content and CSS defines how it should look on a particular device or when the viewport is in a particular size range.

    I have a reference to CSS 2.1 at http://www.felgall.com/net5b.htm a partial reference to some of the commands added in CSS 3 at http://www.felgall.com/net5f.htm and a series of CSS tutorials at http://www.felgall.com/net5a.htm that might help you to get started with CSS.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    StefParis (08-16-2013)

  • #8
    New to the CF scene
    Join Date
    Aug 2013
    Location
    Paris, France
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    That's interesting. All of the positional commands in HTML were declared to be obsolete back in 1997 with CSS being the replacement for them. I am surprised that there are any sites or books around now that teach HTML without covering CSS as well in great detail as it is impossible to create web pages without using both. HTML defines the content and CSS defines how it should look on a particular device or when the viewport is in a particular size range.

    I have a reference to CSS 2.1 at http://www.felgall.com/net5b.htm a partial reference to some of the commands added in CSS 3 at http://www.felgall.com/net5f.htm and a series of CSS tutorials at http://www.felgall.com/net5a.htm that might help you to get started with CSS.
    Hi Stephen,

    Thanks for all the information : wow, something to keep me busy in the summer holidays! To be honest, the html manual I worked from to create my website was printed before 1997, so that solves the mystery
    As I don't program for a living, I only add content to my website most of the time, under the "if it ain't broke" logic.

    But you guys (including Stephan here) have been a huge help!
    I've combined your advice, kept my oh-so-easy-to-use table (sorry!) , found out how to use div within a table here : http://css-tricks.com/using-divs-inside-tables/
    and so all I have to do is change <a name> to <div id>, add </div> before </td>, and stick in a definition of the background colour for the target (I changed lime to aqua, which is a little gentler).

    So I'm happy Thanks to you both!
    Best regards,
    Stephanie

    PS
    how interesting that all three of us have (essentially) the same name!

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,606
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Quote Originally Posted by StefParis View Post
    how interesting that all three of us have (essentially) the same name!
    Haha, yeah, that’s awesome!

    Glad you could solve it. If you’re interested in gradually modernizing your code and approach then semantic HTML is the keyword. If you understand that concept, eventually maintaining and updating your website becomes much easier.

  • Users who have thanked VIPStephan for this post:

    StefParis (08-16-2013)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •