0

小さなプロジェクトの場合、AJAX を介してサーバーからデータを取得し、この図のように出力するこの小さな Web サイトが必要です。ただし、問題は JavaScript ではなく、純粋な HTML+CSS です。

ここに画像の説明を入力

これをクリックしてjsfiddle経由でこのページを見るか、この投稿の最後に引用されている引用されたコードを見ることができます: http://jsfiddle.net/RdJUM/

リストは、次の html スニペットで作成されます。

<div id="update">
    <ul class="searchresults">
        <li>
            <h2>Caption</h2>
            <div>
                <img src="" alt="" />
                <p>Text</p>
            </div>
        </li>
    </ul>
</div>

CSS でフォ​​ーマットされていますが、重要な部分は次のとおりです。

#update ul li {
    height: 110px;
    overflow: hidden;
    /* ... */       

    /*
    -webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
    */
}

#update li:hover {
    height: auto;
}

トランジションをコメントアウトしたままにしておく限り、これは問題なく機能します。記事にカーソルを合わせると、高さが「自動」に調整されます。これにより、コンテンツの高さが正確になり、それ以上の高さはありません。ただし、トランジションのコメントを外すと、WebKit (Chrome 30、Safari 6) はまったく使用できない非常に不安定な効果を実行します。便宜上、これはコメントされていないバージョンへの jsfiddle リンクです: http://jsfiddle.net/bQZ7F/

Firefox 23 と Opera 12 では、このトランジションは無効になっているため、CSS 部分が存在しないかのように動作します。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Live Search</title>
    <link rel="stylesheet" href="mystyle.css" />
</head>
<body>
<div id="searcharea">
    <label for="search">live search</label>
    <p>Enter the name or info about a speaker</p>
    <input type="search" name="search" id="search" placeholder="name or info" />
</div>
<div id="update">
    <ul class="searchresults">
        <li>
            <h2>Lorem Ipsum</h2>
            <div>
                <img src="http://placehold.it/80x80" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae. Mauris dolor nunc, ultrices eu leo sed, ornare lacinia quam. Pellentesque convallis massa at massa egestas, vestibulum vulputate dolor dignissim. Nullam sed metus a odio convallis molestie non a nisl. Donec eleifend lacus ut suscipit cursus. Cras viverra urna at arcu lacinia, in viverra neque pharetra. Suspendisse pellentesque tortor sit amet lacus elementum gravida et non risus. In cursus turpis vitae tortor molestie congue. Phasellus laoreet sit amet neque sit amet egestas. Aliquam sagittis ac massa vitae pulvinar. Vivamus bibendum odio sed enim porta pretium. Ut varius lacinia elit ut interdum. In in pretium metus.</p>
            </div>
        </li>
        <li>
            <h2>Lorem Ipsum</h2>
            <div>
                <img src="http://placehold.it/80x80" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante.</p>
            </div>
        </li>
        <li>
            <h2>Lorem Ipsum</h2>
            <div>
                <img src="http://placehold.it/80x80" alt="" />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer semper dui sit amet erat faucibus egestas. Vivamus eget commodo ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ac magna metus. Donec eget auctor lorem. Cras vehicula nulla quis facilisis ultrices. Duis bibendum tellus ut porta suscipit. Pellentesque vitae orci a orci tincidunt posuere at et quam. Aliquam erat volutpat. Etiam dignissim egestas arcu non lacinia. Sed placerat sagittis enim eget bibendum. Suspendisse mollis consequat libero, ut porttitor eros consequat vitae.</p>
            </div>
        </li>
        <li>
            <h2>Caption</h2>
            <div>
                <img src="" alt="" />
                <p>Text</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

CSS:

/* @override 
    http://localhost/~simon/tests/ajax_search/mystyle.css */

body {
    background: #DAD7C7;
}

#searcharea {
    margin: 0 auto;
    text-align: center;
    background: #BF996B;
    padding: 10px;
    width: 30%;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

#searcharea label {
    font: bold 1.3em Arial;
    text-transform: uppercase;
    padding-bottom:  5px;
    color: #A61C1C;
}

#searcharea p {
    margin: 0;
    line-height: 1em;
    padding-bottom: 5px;
}

#searcharea input {
    width: 80%;
    text-align: center;
}

#update {
    font-family: Georgia, "Times New Roman", Times, serif;
    width: 70%;
    margin: 0 auto;
    border-top: 1px dotted #CCC;
}

#update ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#update ul li {
    width: 100%;
    padding: 0 20px 20px;
    background: #EEE;
    height: 110px;
    overflow: hidden;
    border-bottom: 1px dotted #CCC;

    -webkit-animation: myanim 1s;
    -moz-animation: myanim 1s;
    -o-animation: myanim 1s;
    animation: myanim 1s;

    -webkit-transition: height 0.3s ease-out;
    -moz-transition: height 0.3s ease-out;
    -o-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;

}

#update li:hover {
    background: #FFFCE5;
    height: auto;
}

#update ul li div {
    margin: 0;
    padding: 0;
}

#update ul li div p {
    margin: 0;
}

#update h2 {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    padding-bottom: 5px;
    padding-top: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #BF5841;
    border-bottom: 1px dotted #CCC;
    margin-bottom: 10px;
}

#update img {
    float: left;
    width: 80px;
    margin-right: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

@-webkit-keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-moz-keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@-o-keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}

@keyframes myanim {
    0% { opacity: 0.3; }
    100% { opacity: 1.0; }
}
4

1 に答える 1