Thursday, September 25, 2008

YUI Slideshows, CSS Includes, Drop and Drag Javascript

Attempting to develop a portlet that had an RSS slideshow in the middle controlled manually by arrows to each side. Sounds easy enough, but it was an afternoonful of increasing annoyance. First off, here's some useful CSS and Javascript/YUI stuff: * YUI-based Slideshow - can do images, tables, divs * YUI-based Slideshow - image only (images configured in slideshow.js) * CSS Mojo: Adding Visual Polish To Your Pages * Linking Stylesheets to HTML * Javascript Drag and Drop and Drag Events * Vertical Centering in Valid CSS * Mapping presentational HTML to CSS http://phrogz.net/CSS/vertical-align/index.html is a great explanation of why css vertical centering doesn't work as people would expect. In the Vertical Centering in Valid CSS page, I found a way to reliably vertically center divs, so that I could set up spots for my left and right arrows in the portlet, like:
<!-- do this in external css and include via import. just doing it this way because I'm lazy. -->
 <style type="text/css">
  #outer {height: 400px; overflow: hidden; position: relative;}
  #outer[id] {display: table; position: static;}
  
  #middle {position: absolute; top: 50%;} /* for explorer only*/
  #middle[id] {display: table-cell; vertical-align: middle; position: static;}
  
  #inner {position: relative; top: -50%} /* for explorer only */
  /* optional: #inner[id] {position: static;} */
  
  /* just format */
  div.greenBorder {border: 1px solid green; background-color: ivory;}
 </style>

<h1>Vertical Centering in valid CSS - Example</h1>
<div id="outer" class="greenBorder" style="float:left;">
 <div id="middle">
  <div id="inner" class="greenBorder">
   any text<br>
   <b>any height</b><br>
   any content, for example generated from DB<br>
   everything is vertically centered<br>
  </div>
 </div>
</div>
<div> blah </div>
<div id="outer" class="greenBorder" style="float:right;">
 <div id="middle">
  <div id="inner" class="greenBorder">
   any text<br>
   <b>any height</b><br>
   any content, for example generated from DB<br>
   everything is vertically centered<br>
  </div>
 </div>
</div>
<div style="clear:both;">
  
</div>
The last bit was from a co-worker, who reminded me to clear after floating.

No comments: