SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highlight images/text

    Hi all,

    I have work thumbnails on one side (meals), ingredients on the other side, what I would like to do is:

    1) If I hover over a meal, the ingredients used for that dish are highlighted on the left
    2) If I hover over an ingredient, the dishes that used this ingredient are selected

    I am just starting out in jQuery, can anyone give me some pointers.

    Many thanks

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by iamjustoneman View Post
    I am just starting out in jQuery, can anyone give me some pointers.
    1) How do you want the associated images highlighted? How you code it up depends on it.

    2) How are the dishes selected, check boxes, radio buttons or something else?

    3) Why use jquery when you can do it with less code running with just normal javascript? I assume you are aware jquery is just a set javascript functions.

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there Max,

    1) Each image will have a heading (the meal name), when not highlighted, the background of the title will be white, when it is highlighted it will be black.

    2) The dishes are selected via hovering over over the meal name in a list

    3) Sure, I myself and beginning to learn jQuery, I'm more of a designer than developer, so the my few first couple of tutorials are quite promising, it makes sense to me, I guess this little exercise has come a little to soon, if someone can help no doubt I will learn along the way. In short, jQuery was chosen because it looks quite friendly for a non-tecky newbie.

  4. #4
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    In any case you could set up an array something like this

    Code:
    var mealsData = [
           ['meal1','ingr1','ingr2','ingr3','ingr4','ingr5','ingr6'],
           ['meal2','ingr7','ingr2','ingr3','ingr8','ingr9']
    ];
    and then depending on whether a meal or ingredient is hovered on, you loop through the appropriate part of the array to get the info for the images you need to highlight or select on the other side.

  5. #5
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Max,

    Thanks for the help, I'm learning about arrays, thanks for the pointers, don't suppose you would be willing to whip up a very basic demo, cheeky i know, I just can't find any demo's to learn from. I know I just start learning all this from scratch, I just seem to learn more from examples

  6. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by iamjustoneman View Post
    I just can't find any demo's to learn from.
    I find that very hard to believe. Try any of these examples.


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
  •