SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make an entire div clickable

    I'm looking for a way to make an entire div clickable on this page: http://tinyurl.com/2ektm28 . Scroll down through the menu categories and you'll see a background change (for now) on the divs. And right now, the link is only on the h2. But I want the whole div to be clickable.

    I found this on CSS-Tricks, but it's not working for me. http://css-tricks.com/snippets/jquer...div-clickable/ What am I missing?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Since wrapping the entire DIV in the anchor is invalid, you're left with some options that all have drawbacks:

    1. Make your markup not as good and convert the DIV to anchor and then use SPANs for everything inside.

    2. Apply an onclick event to the DIV and change your CSS to include this:

    Code css:
    div:hover {
      cursor:pointer
    }

    This means it'll "sort of" look like a link, but the status bar won't show the link address when you hover over it (except for hovering over the h3 anchor).

    3. Absolutely-position a link over the DIV so it covers it entirely. This has the drawback that the text underneath won't be selectable, but is normally a bit difficult with ordinary links anyway.

    4. Make the yellow box be a nice big anchor with a big padding-top, and the H3 also have an anchor (like it is now). Then you absolutely position the H3 so it moves down into the padding-top space. This will also affect your markup somewhat, since you'd be changing a nice <p> for an anchor, or wrapping the contents of the <p> in an anchor. If you're worried about SEO here, then you can do this with javascript after the page has loaded.

    As for that jQuery on css-tricks, you're missing something that they don't mention. That code has to run after the DOM has loaded, so you need to use jQuery's special "DOM loaded" method:

    Code javascript:
    $(function() {
      $(".item").click(function(){
        window.location=$(this).find("h2 a").attr("href");
        return false;
      });
    });

  3. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for an informative answer. I appreciate it! It's working now.


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
  •