arif.suparlan.com » Design http://arif.suparlan.com Just another WordPress weblog Wed, 01 Sep 2010 21:28:31 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Resize gambar proporsional & posisi tengah dengan CSS & Javascript (Update) http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript#comments Wed, 18 Aug 2010 15:16:46 +0000 Arif http://arif.suparlan.com/?p=259 Saya hampir gila mencoba me-resize dan memposisikan tengah beberapa gambar di dalam div yang mempunyai property overflow: hidden. Terlalu berlebihan ya? hehehe… Tapi memang sulit. Ukuran gambar tersebut berbeda-beda, portrait atau landscape, yang jelas dia lebih besar dari ukuran div itu. Saya belum bisa ngakalinnya bermodalkan CSS saja.

Meskipun mentok dengan CSS, saya akhirnya ngakalin dengan bantuan Javascript. Dengan memanfaatkan Javascript saya bisa untuk merubah ukuran dan posisi gambar secara dinamis. Bisa lebih dari itu sih, tapi untuk pemula seperti saya ini bisa sangat membantu melayout halaman.

Dulu saya pernah buat script untuk Resize & crop gambar dengan Codeigniter. Nah script ini memakai hitung-hitungan yang sama. Kalau Codeigniter kalkulasinya oleh PHP di sisi server, yang ini di sisi client/browser. Cara ini bisa dipermudah dengan menggunakan framework Javascript. Saya belum coba, tapi kalau ada cara yang lebih mudah lagi, mohon dipost di sini. Makasih.

Di bawah berikut kira-kira contoh scriptnya. Kedua gambar yang berukuran besar dengan orientasi yang berbeda, portrait dan landscape ini saya letakkan sebagai icon dalam div dengan property overflow hidden. Prosesnya mudah, tetapi agak panjang, yaitu membandingkan rasio dua ukuran untuk menentukan orientasi kemudian me-resize dan menghitung posisi tengah. Ini contohnya: Demo.

<html>
<head>
 <title>Resize proporsional & posisi center dengan Javascript</title>
<style type="text/css">
.test {
 border:1px solid;
 margin-top:100px;
 margin-left:250px;
 width:150px;
 height:150px;
 overflow: hidden;
 float: left;
}

.test img {
}

</style>

<script type="text/javascript">
 window.onload = function() {
 var $images = document.getElementsByTagName('img');
 $x=150;
 $y=150;

 for($i=0; $i<$images.length; $i++)
 {
 $new_size = resize_min($images[$i].width, $images[$i].height, $x, $y);

 $images[$i].style.width = $new_size[0];
 $images[$i].style.height = $new_size[1];
 $images[$i].style.marginLeft = -(($new_size[0]-$x)*.25) + "px";
 $images[$i].style.marginTop = -(($new_size[1]-$y)*.25) + "px";
 }

 function resize_min($x0, $y0, $x1, $y1) {
 $xs=$x0/$x1;
 $ys=$y0/$y1;

 if ($ys>$xs){
 $x2 = $x1;
 $y2 = $x1 * ($y0/$x0);
 }
 else {
 $x2 = $y1 * ($x0/$y0);
 $y2 = $y1;
 }

 return [$x2, $y2];
 }
 }
</script>

</head>
<body>
<h1>Resize proporsional & posisi center dengan Javascript</h1>

<div>
 <img src="img01.jpg" />
</div>
<div>
 <img src="img02.jpg" />
</div>

</body>
</html>

Update berikut untuk penggunaan dengan jQuery. Ada beberapa tambahan script untuk mengukur dimensi ketika dalam keadaan gambar hidden.

$(document).ready(function() {
 $('img').each(function() {
 var x = 150;
 var y = 150;
 var ratio = x/y;

 if ($(this).height() > 0) {
 var width = $(this).width();
 var height = $(this).height();
 } else {
 var elem_clone = $(this).clone()
 .attr("id", false)
 .css({visibility:"hidden", display:"block", position:"absolute"});
 $("body").append(elem_clone);
 var width = elem_clone.width();
 var height = elem_clone.height();
 elem_clone.remove();    
 }

 $new_size = resize_min(width, height, x, y);

 $(this).css("width", $new_size[0]);
 $(this).css("height", $new_size[1]);
 $(this).css("marginLeft", -(($new_size[0]-x)*.5) + "px");
 $(this).css("marginTop", -(($new_size[1]-y)*.5) + "px");
 });
 });
]]> http://arif.suparlan.com/2010/08/18/resize-proporsional-posisi-center-dengan-css-javascript/feed 0 Check Your Website on Different Browsers http://arif.suparlan.com/2008/10/30/check-your-website-on-different-browsers http://arif.suparlan.com/2008/10/30/check-your-website-on-different-browsers#comments Wed, 29 Oct 2008 19:52:05 +0000 Arif http://arif.suparlan.com/?p=109 Browser compatibility is about how your website is displayed on different web browsers. This is much about user experience testing to ensure users have the same visual experiences and how it functionally behaves and responds the same way across different browsers. It is really frustrating when your website looks fine on one, but ruined on other browsers. And there are a lot of types of browsers and they have different ways of interpreting the codes.

I have my own way for this kind of situation. Check the web’s stats. For example, according to Google Analytics for this website, the most used browsers are Firefox, IE, Opera, Mozilla Compatible, Safari and Chrome. Then I would manually view the web on different browsers. For IE special case, it has many versions, I use Tredosoft which enable to run multiple IE versions on your PC.

browsershots.org

Maybe you don’t want to install anything, or you want to know how it looks not only on different browser, but on different OS’ too. This is very interesting, I found this site when Googling about cross browser compatibility. There are some commercial online services to check browser compatibility, but Browsershots.org is free open-source online service for website compatibility testing. Just enter the URL, select the browser and OS, and it will queue the screenshots. Now maybe you should try it to your website.

]]> http://arif.suparlan.com/2008/10/30/check-your-website-on-different-browsers/feed 0 Keep it Simple, Stupid http://arif.suparlan.com/2007/07/23/keep-it-simple-stupid http://arif.suparlan.com/2007/07/23/keep-it-simple-stupid#comments Mon, 23 Jul 2007 10:36:23 +0000 Arif http://arif.suparlan.com/?p=33 No, this ain’t about PHP’s KISS thing. It’s about my blog’s new theme design. I know it sucks, I don’t care, I got tired with all these theme designs, tired with rearranging CSS, etc. so I’m keeping it simple this time. This KISS thing I’m gonna keep in mind, I mean for everything.

Only one coloumn, header on top, then menu, content, and footer. The menu is slide-able, it contains search form, categories, and links. Thanks to Anas for telling me about these great joomla templates and mootools, well now this is not simple. Heheh…

]]> http://arif.suparlan.com/2007/07/23/keep-it-simple-stupid/feed 0