views:

1379

answers:

3

Hi

I'm trying to create a news list summary section using <ul> and would like to make the whole <li> clickable. I'd like to use to first link it finds in the <li> as the URL so it remains accessible when JavaScript is not enabled...My HTML is:-

            <h3>Regional news</h3>
            <ul>
                <li class="alt clickable">
                    <h4><a href="/dave.htm">Fusce porta varius eros</a></h4>
                    <h5>22 Feb 2009</h5>
                    <p>Donec bibendum, mauris at vulputate vestibulum, nulla odio eleifend sem, in adipiscing orci neque sit amet ipsum.</p>
                </li>
                <li class="clickable">
                    <h4><a href="/dave.htm">Praesent turpis tellus, sagittis eu, molestie ac, posuere id, quam</a></h4>
                    <h5>18 Feb 2009</h5>
                    <p>Aliquam mollis. Aliquam erat volutpat. Nulla ultricies ullamcorper magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit rhoncus dui.</p>
                </li>
                <li class="alt clickable">
                    <h4><a href="/dave.htm">Vivamus libero est, pulvinar vitae, dignissim ut, mollis non, tellus</a></h4>
                    <h5>24 Feb 2009</h5>
                    <p>Morbi quis felis. Nunc hendrerit nibh porttitor leo. Aenean ut ipsum sit amet est feugiat bibendum. Vivamus adipiscing purus sed ipsum.</p>
                </li>                                     
            </ul>    
            <p class="moreregionalnews"><a href="#">View more regional news</a></p>

So basically when the user hovers over the whole panel, there is a rollover on the whole <li> not just the <h4> tag...but use the URL contained in the <h4> tag as the link...

I hope I explained that sensibly...I think I confused myself there :)

Cheers

Adam

+9  A: 
// when the page is loaded..
$(function() {
    // make the cursor over <li> element to be a pointer instead of default
    $('li.clickable').css('cursor', 'pointer')
    // iterate through all <li> elements with CSS class = "clickable"
    // and bind onclick event to each of them
    .click(function() {
        // when user clicks this <li> element, redirect it to the page
        // to where the fist child <a> element points
        window.location = $('a', this).attr('href');
    });
});

BTW, you can implement the same functionality with HTML/CSS only (without JavaScript). But this is another question.

Koistya Navin
I would add that CSS via jQuery ... if the person doesn't have JavaScript enabled, there should not be a pointer (indicating interactivity)
alex
you didn't need to change it to :first as attr() returns the attribute of the first one already; most concisely $('a', this).attr('href') is what i'd use
Scott Evernden
@Scott, good point.
Koistya Navin
alex makes a good point
cletus
+1 for collaboration :)
Darko Z
A: 

For a less jQuery centric approach.

If you were to wrap the contents of the li within the <a> and display: block on a, you'd get the whole li clickable.

edit - Using headings in the <a> won't validate, but there's no reason not to swap the h tags out for <p> or similar and apply styles to them.

<style type="text/css">
.clickable a
{
     display: block;
}
</style>

<li class="alt clickable">
     <a href="/dave.htm">
     <h4>Fusce porta varius eros</h4>
     <h5>22 Feb 2009</h5>
     <p>Donec bibendum, mauris at vulputate vestibulum, nulla odio eleifend sem, in adipiscing orci neque sit amet ipsum.</p>
     </a>
</li>
TreeUK
You can't embed "h1" etc. elements into "a" elemtn
Koistya Navin
A browser will render it, but it won't validate IIRC.
alex
True it wouldn't validate, but then semantically you might reconsider using multiple headings in a list to show date etc anyway. The technique works to meet the requirements.
TreeUK
A: 

$(li).text.append(""+[Link.n]+"")

adardesign