Looking to set up a simple website for a project that fetches data from a server using AJAX and displays it as depicted in the image? The issue isn't with JavaScript but rather with pure HTML+CSS.
To view this page on jsfiddle, you can click here. Alternatively, you can check out the code provided at the end of this post.
The list is generated using the following html snippet:
<div id="update">
<ul class="searchresults">
<li>
<h2>Caption</h2>
<div>
<img src="" alt="" />
<p>Text</p>
</div>
</li>
</ul>
</div>
The formatting is done via CSS, but the crucial part is as follows:
#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;
}
This setup works well when transitions are kept commented out. Hovering over the item scales its height to "auto", accommodating exactly the content's height. However, if the transitions are uncommented, WebKit browsers like Chrome 30 and Safari 6 exhibit a shaky effect rendering it unusable. For an uncommented version, visit this jsfiddle link: http://jsfiddle.net/bQZ7F/
In Firefox 23 and Opera 12, this transition is disabled causing it to disregard the presence of the CSS portion.
HTML:
(previously mentioned code block for HTML)CSS:
(previously mentioned code block for CSS)