SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Zealot cherie's Avatar
    Join Date
    Nov 2004
    Location
    Roxbury, NY
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    highlight two items with javascript

    It was suggested that I put this in the javascript forum instead of the CSS forum. so here it is...

    Hi everyone

    I have a site that has 3 columns. Items in column 1 and 3 are related. I would like to be able to have both the item in column 1 and 3 show the hover action when crossing over the single related item in either column 1 or 3.

    Column one contains the name of a musician. Column 3 contains the name of a song. I would like the song and musician to show a specific hover action if I mouse over either the name of the musician or the song. Each musician only has one song.

    I am using text, no images.

    any ideas? or does my explanation not make any sense?

    Cherie
    Cherie
    foamyindustries.com
    Movies We Watch - we watch it and tell you what we think
    chickenflicker.com - everyone needs a chicken a day

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you show us your markup? Hopefully you're using ordered lists (<ol>). With two ordered lists of the same length, doing this with unobtrusive JS is really fairly simple.

    P.S. Actually I didn't say to post this in this forum. I just said it was best done with JavaScript.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Zealot cherie's Avatar
    Join Date
    Nov 2004
    Location
    Roxbury, NY
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the page wasn't set up with <ol>, but I am working with someone new to CSS and forgot to mention that. So I am working on cleaning things up.

    Is there an example somewhere of this? The items I have found are not taking me in the direction I thought I was headed in.
    Cherie
    foamyindustries.com
    Movies We Watch - we watch it and tell you what we think
    chickenflicker.com - everyone needs a chicken a day

  4. #4
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're probably not going to find an example, since it's specific functionality to your site. But, as Kravvitz has said, JS makes it easy. What you need to decide is how you'll map between the two data fields.

  5. #5
    SitePoint Zealot cherie's Avatar
    Join Date
    Nov 2004
    Location
    Roxbury, NY
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you give me an example of what you mean by "map between two data fields"? I really don't use javascript that much.
    Cherie
    foamyindustries.com
    Movies We Watch - we watch it and tell you what we think
    chickenflicker.com - everyone needs a chicken a day

  6. #6
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cherie View Post
    can you give me an example of what you mean by "map between two data fields"? I really don't use javascript that much.
    It's how the artist and song are connected. Ize has done a great example that assumes one song per artist at the same location in a list, e.g. song 1 is mapped to artist 1 and vice versa.

    But, what if you list two or more songs per artist? What if they're in positions that are fairly random? You need to set up a mapping array in JS, and I'd suggest you wrote the HTML in such a way that the mapping could be generated.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ceeb View Post
    But, what if you list two or more songs per artist?
    In the thread in the CSS forum, cherie said that there was just one song per artist.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    In the thread in the CSS forum, cherie said that there was just one song per artist.
    Oops - sorry missed that. As long as the song and artist positions match, that script is fine.

  9. #9
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made an example for you here: http://www.whatstyle.net/bla/remote_hover.htm

    I don't have the time to comment it heavily right now, but study the script and you will figure it out. It's simple, really

  10. #10
    SitePoint Zealot cherie's Avatar
    Join Date
    Nov 2004
    Location
    Roxbury, NY
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ize. Exactly what I needed. And it was simple.

    Much gratitude.
    Cherie
    foamyindustries.com
    Movies We Watch - we watch it and tell you what we think
    chickenflicker.com - everyone needs a chicken a day


Bookmarks

Posting Permissions

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