Vertical Centering of Tableless HTML Using CSS and jQuery

John — Wed, 17 Feb 2010 10:31:35 -0500

I've seen other vertical text centering techniques and used them successfully in certain situations. There seemed to be other situations where I couldn't get the techniques to work. I figured I'd give jQuery a try and see if I could work it out more easily for a group of objects. For my purposes, creating a list of links, I needed to use a fixed height for the <li>.

Final should look something like this:

So you'll need a list. I was making clickable buttons with backgrounds so my HTML/CSS may have more tags than you'll need. I ended up needing some <span> tags inside the <a> tags, such as:

<div class="vertical1">
<ul>
<li><a href="#"><span>Item 1</span></a></li>
<li><a href="#"><span>Item 2 is a little bit longer</span></a></li>
<li><a href="#"><span>Item 3 is ridiculously long. Hopefully it feels more important now that it has used so much space.</span></a></li>
</ul>
</div>

For CSS, use something like the below. I had needed:
.vertical1 ul,
.vertical1 li   {
   margin: 0;
   padding: 0;
   }
.vertical1 li   {
   background: none;
   height: 135px;
   width: 224px;
   position: relative;
   margin-top: 9px;
   }
.vertical1 a   {
   color: #000;
   height: 135px;
   width: 224px;
   display: block;
   background: none orange;
   border: none;
   }
.vertical1 a:hover   {
   background-position: 0 -135px;
   }
.vertical1 span   {
   position: absolute;
   display: block;
   width: 140px;
   margin-left: 15px;
   line-height: 1.1111em;
   font-size: 12px;
   }

You'll need jQuery. Use something like this:
$(".vertical1 li").each(function () {
       li_height = $(this).height();
       span_height = $(this).find("span").height();
       halfway = (li_height/2) - (span_height/2);
       $(this).find("span").css("top", halfway);
    });

Drupal Jquery JCarousel Implementation

John — Sun, 31 Jan 2010 17:59:39 -0500

A recent project put us in need of a carousel. Jcarousel provided the basics for what we needed however we had to add some additional love to get the carousel working the way the client envisioned.

We had to theme the block.tpl file for the carousel, using PHP to achieve our goal. The biggest issue we needed to address was that the carousel would need to start on the same thumbnail (depending on a page's parent) whether it was on a parent or child page. So even though jcarousel provides a way to start the carousel on a particular thumbnail, we needed a dynamic way to do that since the "home" thumbnail changes throughout the site depending on which project you are on. If you land on Parent A or on anyof Parent A's child pages, the carousel needed to start withProject A's thumbnail.

First we needed to control project parents vs. project children. We used 2 content types for this, with a selector on the child type so we could choose which project parent it belonged to. We added a CCK field to project parents allowing them to choose a carousel ordering.

Next we created a view that pulled the parents as a simple HTML list. Each parent also has a huge background photo, so we used imagecache to create a thumbnail from this for the carousel. The view was shown in a block, whose view-view-list--carousel--block.tpl.php file we themed. We loaded the node form the block:

$nodeid = (arg(0) == 'node' && is_numeric(arg(1)))?arg(1):FALSE;
 $node = node_load($nodeid); $nid = $node->nid;

...and depending on the node type there was further code. If it was a child we looked for its parent.

Once we determined the parent (or found out we were already on a parent), we could grab the carousel order from the CCK field of the project we were on so we could tell jcarousel to $start on that item. We also used jquery to provide an active class to the current list item since Drupal wouldn't necessarily do that if were on a child page.

Using the technique above we were able to create a carousel that starts at an appropriate place even if we aren't specifically on that page. As long as we're on any of a project's pages, the carousel starts correctly and we can even style it as such with the addition of an appropriate active class.

You may still be able to see the carousel at QuinnEvans.com in the project section.