Monday, January 26, 2015

How to clear cache memory in Ubuntu

Since my Ubuntu 14.04 was storing a lot of cache in memory (as far as I remember it was 1.5 GB, or maybe more than that), I was looking for a solution. For those computers having a limited memory below 4 GB and used heavily, caching a lot may cause trouble. Though it becomes more faster, but for me it made my computer ran slowly.

I was looking for a permanent solution. Then I made a script which will make a soft link indicating itself and will drop cache. No need to write "sudo sync; sudo echo 3 > /proc/sys/vm/drop_caches" every time in terminal, which I found complex to memorize.

Below script will download an script, save it in '/usr/local/share/' directory and then execute it. Actually the downloaded script will make a soft link in '/usr/local/bin/' directory to make it more easier and interactive. It can be deployed in any machine which supports BASH such as UNIX or Linux. Additionally the machine must be connected to the internet as it downloads original script from github.

Copy and paste it into terminal


Original source code is available in my github account:
https://github.com/Nabid/Shell_Scripts/tree/master/Drop_Cache

Tested in Ubuntu 14.14 Trusty Tahr.



The scripts in this post and in the github link given above, can be used, modified or changed for only educational purposes. The author is not responsible for any kind of damage or data loss.

Friday, January 23, 2015

Creating responsive multiple <div> of same height

Sometimes we need to apply two or multiple <div> as they all contain same height, beside we want them responsive i.e their height will remain same if the window size changes. An example has been shown in the given image below, how they mismatch of their height when the inner contents are of different depth.

Different height of two <div>

We can easily solve this problem using javaScript. But for I am going to use jQuery (a javaScript library). If you are not familiar with jQuery, be sure you get yourself familiar with it. jQuery is very easy to learn and fun to use.[jQuery - w3schools]

First, we need to download jQuery file from here and add this into our html file [how to].

Next, we will give our <div> tags unique id. In our case, I will use "div_a" and "div_b" for left div and right div respectively.

Now, we will add a small script inside <head> tag. We need to consider two jQuery events. $(document).ready() for when the page loading is completed and $(window).resize() for whenever window size is changed. We will then take another function which take two div's height, check which one is largest and adjust other one's height. Ta da! We have done this!!

Both <div> has same height

Source code:
<!Doctype HTML>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        /*works when page loading complete, this is important
          because you want your divs' match height from the beginning.*/
        $(document).ready(function(){
            //alert("ready");
            changeDivHeight();
        });
        /*whenever browser window size changes, this function is being called
          and it fixed div height.*/
        $(window).resize(function(){
            //alert("resize");
            changeDivHeight();
        });
        /*here we place our logic
          we take each sizes, compares which one is largest and then
          set other's height.*/
        function changeDivHeight() {
            // .innerHeight() returns height of an element
            var a = $("#div_a").innerHeight();
            var b = $("#div_b").innerHeight();
            //alert(a + " " + b);
            // .height() sets height of an element
            // we can pass an integer value, which will be converted into px
            // otherwise we can pass a string, mentioning the unit such as px or in or cm or dp
            if( a > b ) {
                $("#div_b").height( a );
            } else {
                $("#div_a").height( b );
            }
        }
    </script>
</head>
<body width="75%" align="center">
    <div id="div_a" style="border: 1px solid red; float: left; width: 30%;">
        <p>hello div A hello div A hello div A hello div A hello div A hello div A.<br>div A has large height. Will div B be able to achieve same height??</p>
    </div>
    <div id="div_b" style="border: 1px solid green; float: left; width: 30%">
        <p>hello div B<p/>
    </div>
</body>
</html>

Or you can use Bootstrap library to solve this problem.

Thanks - Jajabor, 2014