CSS & JQuery: Better Usability

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

HTML:

Header 1
lorum ipsum
time
Header
lorum ipsum
time

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.

Problem courtesy of: cocoa coder

Solution

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/

Solution courtesy of: sandeep

Discussion

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/

Discussion courtesy of: pbaris

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");
        }
    });
});

Discussion courtesy of: Arif


demo

Header 1

lorum ipsum 1
time 1

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; }

Discussion courtesy of: Roko C. Buljan

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

Discussion courtesy of: thecodeparadox

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.

Discussion courtesy of: Jake

This recipe can be found in it’s original form on Stack Over Flow
.

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » CSS & JQuery: Better Usability

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录