Kategori : CSS, HTML, jQuery23 Juli 2018 12:19:58

Centering Element menggunakan CSS dan jQuery Part 2

Melanjutkan post sebelumnya mengenai Centering Element menggunakan CSS dan jQuery, kali ini akan saya bahas untuk centering element menggunakan jQuery.

Centering Element menggunakan jQuery

Pada prinsipnya centering element menggunakan jQuery ini sama dengan centering element menggunakan CSS, namun penggunaan jQuery disini bisa membuat centering element menjadi lebih fleksibel, kita dapat membuat element center ketika suatu tombol di klik misalnya.

Pertama kita buat HTML seperti dibawah ini.

<html>
  <head>
      <title>Test Center jQuery</title>
  </head>
  <body>
    <div id="cent" style="width:128px;height:128px;">
        <img src="img.png" width="128" height="128">
    </div>
  </body>
</html>

Untuk membuat element center, kita tambahkan tombol dan jQuery seperti dibawah ini.

<html>
  <head>
    <title>Test Center jQuery</title>
    <script type="text/javascript" language="javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
        $('#center').click(function(e){
            center();
            e.preventDefault();
        });
    });
    
    function center(){
        var obj = $("#cent");
        //menghitung setengah tinggi layar dan element
        var halfsc = $(window).height()/2;
        var halfh = $(obj).height() / 2;
        //menghitung setengah lebar layar dan element
        var halfscrn = $(window).width()/2;
        var halfobj =$(obj).width() / 2;
        //menghitung margin yang diperlukan untuk center element
        var goRight =  halfscrn - halfobj ;
        var goBottom = halfsc - halfh;
        $(obj).css({marginLeft: goRight }).css({marginTop: goBottom });
    }
    </script>
  </head>
  <body>
    <div id="cent" style="width:128px;height:128px;">
        <img src="img.png" width="128" height="128">
    </div>
    <input type="button" value="center screen" id="center" style="position:absolute;top:0;left:150px;"/>
  </body>
</html>

Ketika code diatas di run pada browser, maka akan menghasilkan tampilan seperti ini.

Ketika kita click tombol center screen, maka akan menghasilkan tampilan seperti ini.

Ketika tombol di klik (lihat fungsi jQuery click) kita memanggil function center yang menghitung setengah lebar dan tinggi layar serta element untuk mengetahui margin yang tepat untuk membuat element tersebut menjadi center screen. Fungsi jQuery height() dapat digunakan untuk menghitung tinggi element, baik itu layar, image atau element lainnya. Setelah itu digunakan fungsi jQuery css() untuk set css dari element sehingga element center screen.

Demo.

Note : tombol diatas saya buat absolute agar tidak mengganggu tampilan center dari element.

Selamat mencoba.

Kategori : CSS, HTML, jQuery23 Juli 2018 12:19:58

Kategori :

Arsip :