Front-end developers and the art of illusion

Or how can a simple Fixed Headers table teach us the differences between front-end and back-end development


Back-end developers got is easy – one environment, one or two basic languages (and that’s if you even count SQL as a language), and what you code – is what you get.
Hey, that’s all a coder wants. That is, off course, unless he’s insane enough to want to use three main languages, endless amount of environments to consider, and those pesky designers who can’t even write a simple “hello world” function, unless they paint the words in their photoshops.

Yap, front-end devs got the short end of the stick, as far as those Java coders, C# sniffers, compiler happy straightliners think.

But I’ve noticed another big difference between front-end and back-end dev styles –
In back-end, you write what you MEAN the program to do, and it does just that.
In front-end, sometimes you need to hack your way around just to do a simple task. Let’s say front-end development requires cunning and manipulations while back-end is as straight programming as it gets.


The case of “The Fixed Header Table”

This is a recent sample for the cunning of front-end development I’ve came across
Basically, with CSS we can make a table header fixed with a single property: position:fixed and that’s it.
Just use THEAD and TBODY, give the THEAD a position:fixed style, and you’re ready to go.
That is, off course, unless you have horizontal scrolling as well. In that case, just using Fixed Positioning will break over you overflow and things will get very ugly very fast.

To overcome that, I had to make a good old front-end illusion, using some CSS and a small directive.

The structure i made was:

container DIV – with width
– header container DIV – with a hidden overflow
– – TABLE to keep the headers inside that div

– body container DIV with overflow:scroll
– – TABLE to keep the data – inside that div

Then one small directive – to horizontally scroll the header DIV (with the headers TABLE) – when the body div is scrolled horizontally.
Simple, clean illusion, and a quick sample of Why back-end developers hates front-end.


COIDH – Code Or It Didn’t Happen

The directive gets one attribute – a Jquery selector to scroll horizontally when it’s element scrolls.
I’m sure there will be more uses to this simple – “scroll matching” directive.

#NOTE: it’s using Jquery’s scrollLeft() function, so you need to use full Jquery.

angular.module('YOURAPP').directive("fixOnScroll", function () {
    return function(scope, element, attrs) {
        var fixedDiv = attrs.fixedDiv;
        element.bind("scroll", function() {
                var leftPos = element.scrollLeft();

and it’s usage in the HTML side:

Full working sample

#NOTE: the table cells have a slight aligning problem you need to fix with some CSS on your own design.
#NOTE: TD’s style Width property wasn’t working well, so I use min-width along and it fixes it.

[codepen_embed height=”381″ theme_id=”0″ slug_hash=”yAxdG” default_tab=”result”]See the Pen yAxdG by ziv pugatch (@zivpug) on CodePen.[/codepen_embed]

Cheers and happy coding

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *