StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I just came up with this solution <a href="http://jsfiddle.net/LNw3G" rel="nofollow">http://jsfiddle.net/LNw3G</a>. It's a <em>mix</em> between the use of <code>table</code> and <code>div</code> elements.</p> <p>I also added an image <em>sprite</em>, positioning through class names <em>left</em>, <em>center</em>, <em>right</em>, <em>top</em> and <em>bottom</em> (so you don't have to edit all the image positions in your css), and javascript for parsing specific calls depending on the anchor <code>class</code>.</p> <p>This is an example of the HTML for a single cell. <code>cell-wrap cell1</code> contains the elements and positions the background image sprite, the table vertically aligns the text, and <code>cell</code> contains the controlled positioned images wrapped into <code>image</code> divs.</p> <pre><code><div class="cell-wrap cell1"> <table class="content"> <tr> <td>Connection is not correct</td> </tr> </table> <div class="cell hidden"> <div class="image left top"> <a href="#linkA" class="linkA"><img src="http://goo.gl/wNDMe"></a> </div> <div class="image right top"> <a href="#linkB" class="linkB"><img src="http://goo.gl/wNDMe"></a> </div> <div class="image left bottom"> <a href="#linkC" class="linkC"><img src="http://goo.gl/wNDMe"></a> </div> </div> </div> </code></pre> <p>This is the significant javascript code, which filters anchors containing class names with <code>link</code> to the desired specific functions:</p> <pre><code>$(function() { $(".cell a").click(function(e) { if ($(this).attr("class").match(/link(.)(\\s[\\b]*)?/)) { var param = $(this).attr("class").replace(/(.*\s)*link(.).*$/, "$2"); doThings(param); } }); }); function doThings(param) { switch (param) { case 'A': //specific 'A' functions break; case 'B': //specific 'B' functions break; default: //default functions break; } </code></pre> <p>It has been tested IE7+, FF, Chrome, Safari and Opera.</p> <p>Ps: There is a workaround for <strong>IE6</strong> you can use for this example, consisting in adding an specific <em>hover.htc</em> file and the css line <code>body { behavior: url(hover.htc); }</code> (<a href="http://www.devinrolsen.com/fix-css-pseudo-hover" rel="nofollow">more detailed here</a>) to simulate hover effect on <em>non-anchor</em> elements.</p> <p>Ps: Be careful with the <code><!DOCTYPE</code> declaration. If you leave empty spaces, maybe something like this <code><! DOCTYPE</code>, IE7 may treat it as non valid jumping into quirks mode (while testing, it drove me nuts!).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload