Absolute position table with padding

Today, I have a task of widening the tables to match 100% browser width to view more contents while keeping other elements stay the as they were.

pjimage

The problem is, I have so many tables to do (about 20 pages including that kind of table). I am too lazy to edit all of those pages. It really takes time and potential to introduce bugs.

So, I choose javascript and CSS to help me out.

Firstly, those tables have the class named “table_wide”.

We will use the CSS absolute position’s power of ignorance. We can make the table to be absolute with 100% percent width. But the problem is, it also ignores padding or margin. So our table will be stuck to the left and right edges.

Well, challenge accepted.

Absolute position ignores everything but it has top, right, bottom and left instead. However, top, right, bottom and left are not adapted to its width. So we cannot use padding properly.

We will use what we have to acquire what we want.


$(".table_wide").each(function(){
var paddingInPx = 10;
var windowWidthInPx = $(window).width();

// Calculate the width of table.
var thisWidthInPercent = 100 - (100/windowWidthInPx*2*paddingInPx);

// Create an empty div to fill up the space the absolute table occupied in the past.
$(this).after('<div style="height: ' + this.offsetHeight + 'px;"></div>');
$(this).wrap('<div style="position: absolute; width: ' + thisWidthInPercent + '%; left: ' + paddingInPx + 'px"></div>');
});

.table_wide {
    display: block;
    overflow: auto;
}

Well done! Challenge accomplished.

Jsfiddle: https://jsfiddle.net/ducfilan/p961moLd/

Advertisements

How to debug/inspect your mobile web page on a real mobile device (with or without real device)

When developing web apps for with mobile support, we usually use Device toolbar (Ctrl + Shift + M) on Google Chrome Developer Tools. But, the problem is that sometimes our layout or javascript code work on Device toolbar but not a real device and there is no dev tool on mobile browsers.

Luckily, Chrome Developer Tools provides us a really useful tool to debug our web page on a real android device on our desktop totally like what we do on desktop web pages.

Installation and interacting with Remote debugging are described here.

In case you don’t have an Android device in hand. You could use an Emulator. It works perfectly with me.

I use Genymotion, it’s really fast and stable.

You can use any mobile browser and be able to debug your web pages on that browser.

You can install browsers to the Genymotion Emulator by drag and drop your .apk file to the emulator screen.

Or you can install Google Play Store and get them downloaded just like a normal device.

The processes are described here.

Goodluck!

An example of how Excel can boost your coding productivity

During my working time in software companies, there are ton of cases which the support of Excel helps alot.
Today for an example.

I have to add rules to validate many fields with the similar name like below:

  • open1post
  • open1person
  • open2corp
  • open2post
  • open2person
  • open3corp
  • …and so on…

I need to create some code lines like below:

  • $val->add(‘open1corp’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open1post’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open1person’, $multi_lang_items[‘lbl’][23])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2corp’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2post’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open2person’, $multi_lang_items[‘lbl’][24])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • $val->add(‘open3corp’, $multi_lang_items[‘lbl’][25])
    ->add_rule(‘match_pattern’, ‘/^[0-9]*$/’);
  • …and so on…

So, in excel:

  1. First column, I store a list of fields, name it “Form control name”.
  2. Because, a label is provided to 3 fields, for example: “open1corp”, “open1post”, “open1person” use the same lbl 23.

So that, we have to calculate the same number for each open[x][post_fix]. In order to achieve that, I used the magic of mod like below formula.

Note that, 19 is the row number of the first open[x][post_fix] item.

=CONCATENATE("$val->add('",[@[Form control name]],"', $multi_lang_items['lbl'][",ROW()-MOD(ROW()-1,3)+4-2*(FLOOR.MATH((ROW()-19)/3)),"])
 ->add_rule('match_pattern', '/^[0-9]*$/');")

And the result we get:
Excel productivity
That’s it, now we can copy those code to our IDE.