CODEWITHSUNDEEP
jquerycssjquery-mobile
Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

Enable list item to clickable area in jQuery Mobile

Description: Following code piece is used in Android/iPhone for Roundabout carousal. Each LI is 100px x 100px in width and height. And link is top of the LI. 

  <div data-role="content" data-theme="aa">
    <ul class="roundabout-holder"> 
         <li class="roundabout-moveable-item">
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
         <li class="roundabout-moveable-item"> 
             <a href="<%= url_for :action => :graph %>"> <%= label_for:link %></a></li> 
    </ul> 
  </div>

CSS

.roundabout-holder {
    list-style: none;
    width: 75%;
    height: 10em;
    margin: 1em auto;
}

.roundabout-moveable-item {
    height: 100px;
    width: 100px;
    border: 1px dotted #999;
    background-color: #f3f3f3;
    font-size: 2em;
    cursor: pointer;
}

Current behavior: In the items, Anchor only behave as link (jump to the given reference)

Expected behavior: When user clicked on LI, it should jump to given reference.

Relative resource from stackoverflow

How do I make the whole area of a list item in my navigation bar, clickable as a link?

Make A List Item Clickable (HTML/CSS)

eventhough solution come to near my issue. i need to find generic solution. Because I cant set padding for all at onece or one by one, because link label may change time to time.

Added and tested asfollows display:inline-block; and padding then issue is sorted, but time to time padding should be change.

Upvotes: 6

Views: 2275

Answers (3)

Zut
Zut

Reputation: 639

One simple way is to do this:

$('li.roundabout-moveable-item').click(function(e) {
    e.preventDefault();
    $(this).find('a').click();
    return false;
});

It will make sure that clicking anywhere in the <li> yields the same result as clicking the contained <a>.

Upvotes: 4

Moe Sweet
Moe Sweet

Reputation: 3721

A. CSS Solution

li.roundabout-moveable-item a{
    display:block;
    width:100px;
    height:100px;
}

B. Jquery Solution

$("li.roundabout-moveable-item").click(function(){
    $('a', $(this)).trigger('click');
});

$("li.roundabout-moveable-item a").click(function(event){
  event.stopPropagation();
  // To prevent li-click being trigged
});

Upvotes: 1

kevinmicke
kevinmicke

Reputation: 5058

I believe you could just use display: block; in the css to style the <a> tag to take up the entire <li>.

Upvotes: 0

Related Questions