CODEWITHSUNDEEP
javascriptjqueryhtmlcss
cocoa coder
cocoa coder

Reputation: 214

CSS & JQuery: Better Usability

I would like to improve my user experience of the following code:

HTML:

<div class="news-item">
    <div class="main-content">
        <div class="header"> Header 1 </div>
        <div class="content"> lorum ipsum </div>
        <div class="time"> time </div>
    </div>
</div>

<div class="news-item">
    <div class="main-content">
        <div class="header"> Header </div>
        <div class="content"> lorum ipsum </div>
        <div class="time"> time </div>
    </div>
</div>​

JavaScript:

jQuery(document).ready(function() {
    $(".header").click(function () {
      $(this).parent().toggleClass("expand");
    });
});​

CSS:

body {
    background-color: whitesmoke;
}

.header{
    font-size: 20px;
    padding-bottom: 20px;
    cursor:pointer;
}

.main-content {
    margin: 0 0 12px 70px;
    padding: 0;
    background: rgb(251, 251, 251);
    width: 80%;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    position:relative;
    margin-left: 20px;
    margin-top: 20px;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 22px;
    height: 20px;
    overflow: hidden;
}

.expand {
    height: 200px;
}​

Demo: http://jsfiddle.net/9UJ7f/4/

As you may notice, when you click the Header, the box expands or collapses.

However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.

To eradicate "void-clicks", I would like it to be like this:

A. In Collapsed Mode: If you click anywhere on the box (.main-content class), the item will expand

B. In Expanded Mode: If you click only the .Header class, the item contracts again.

What would be the best approach to do this ?

UPDATE:

OK, you were right. The CSS was a bit off. I choose sandeep's solution as it was the most minimalistic but best working solution. But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border). You are awesome, guys. I'll give you all a thumbs up.

Upvotes: 2

Views: 164

Answers (6)

Arif
Arif

Reputation: 1726

small addition to @thecodeparadox answer 

jQuery(document).ready(function() 
   {
    $('.header').click(function(e) {
        e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
        $(this).parent().toggleClass('expand');
    })
    $(".main-content").click(function() {
        if (!$(this).hasClass('expand')) {
            $(this).addClass("expand");
        }
    });
});

Upvotes: 1

Panos Bariamis
Panos Bariamis

Reputation: 4653

Your js is correct. Change you css with

body {
    background-color: whitesmoke;
}

.header{
    font-size: 20px;
    cursor:pointer;
    padding: 22px 22px 20px 22px;
}

.content { padding: 0 22px; }
.time { padding: 0 22px; }

/* thanks to raingroove for the main styling ! */
.main-content {
    margin: 0 0 12px 70px;
    padding: 0;
    background: rgb(251, 251, 251);
    width: 80%;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    position:relative;
    margin-left: 20px;
    margin-top: 20px;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    height: 66px;
    overflow: hidden;
}

.expand {
    height: 200px;
}

see http://jsfiddle.net/9UJ7f/25/

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

jQuery(document).ready(function() {
    $('.header').click(function(e) {
        e.stopPropagation();
        $(this).parent().toggleClass('expand');
    })
    $(".main-content").click(function() {
        if (!$(this).hasClass('expand')) {
            $(this).addClass("expand");
        }
    });
});

Perfect working sample

Upvotes: 2

Jake
Jake

Reputation: 4234

This should work for you:

DEMO

Here's the new javascript:

jQuery(document).ready(function() {
    $(".news-item").click(function () {
        if( !$('.main-content', this).hasClass('expand') )
            $('.main-content', this).toggleClass("expand");
    });

    $('.news-item .main-content.expand .header').live('click',function () {
        $(this).parent().toggleClass("expand");
    });
});​

This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.

Upvotes: 1

sandeep
sandeep

Reputation: 92793

Give padding to heading DIV. Write like this:

    .main-content {
        margin: 0 0 12px 70px;
        padding: 0;
        background: rgb(251, 251, 251);
        width: 80%;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        position:relative;
        margin-left: 20px;
        margin-top: 20px;
        background-color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding-bottom: 22px;
        height: 42px;
        overflow: hidden;
    }
    .header  ~ div{
        margin:22px;
    }

    .header{
        font-size: 20px;
        padding: 22px;
        cursor:pointer;
    }

Check this http://jsfiddle.net/9UJ7f/14/

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206102

demo

<div class="main-content">
    <h2 class="header"> Header 1 </h2>     <!-- you can use h2 -->
    <div class="content"> lorum ipsum 1 </div>
    <div class="time"> time 1</div>
</div>

Just remove the padding from the container (.content) and play with your children elements padding.

.main-content {  
    
    position:relative;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 20px;
    
    width: 80%;
    height: 50px;  
    
    background: rgb(251, 251, 251);
   
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

h2.header, .content, .time{
    padding:3px 22px;
}
h2.header{   
    padding:13px 22px;
    font-size: 20px;    
    cursor:pointer;
}
.time{ padding-bottom:20px; }

Upvotes: 1

Related Questions