AnyStretch.js – Div içeriğini dinamik boyutlandırma

Gün geçtikçe  yep yeni  teknolojiler  ve farklı  ekran boyutları üretiliyor.   Bu  tür aygıtlar  ve  tarayıcılar  için uygun tasarımlar  hazırlamak tasarımcılar  için de  bir hayli  zorlaşıyor.  Yaptığınız  örneği her türlü  ekranda  aynı şekilde  görünebilmesini  sağlayabilmeniz için en iyi  yol  css ayarlamalarda yüzdelik oranlar belirlemek  yada Anystretch  tarzı uygulamalar  kullanmak.

Anystretch  Dan Millar tarafından geliştirilmiş oldukça başarılı bir jQuery uygulamasıdır.  Hazırlamış olduğunuz  tasarımlar Anystretch  sayesinde bütün ekran boyutlarına  ve tarayıcı  boyutlarına göre  esnek bir  özeliğe  sahip oluyor.  Bunun dışında kullanıcılar  tarayıcı boyutunu küçültüp büyütürken de web sayfasındaki  nesneler tarayıcıya  göre  otomatik olarak boyut  değiştiriyor.

Demo  sayfasında Anystretc uygulamasının nasıl çalıştığını  görebilmeniz  için web tarayıcısının boyutunu  değiştirmeniz  gerekir.  Büyütün, küçültün yada genişletin tarayıcıyı. Bu işlemler  sırasında  demo sayfasındaki çerçeve, çerçeve içindeki yazılar ve çerçevedeki arkaplan resimlerinin dinamik bir şekilde  tarayıcıya  göre boyut değiştirdiğini görebileceksiniz. Esnek web sitesi hazırlamak isteyenler  için (ki artık günümüzde  bu şart)  çok  faydalı  ve arşivinizde bulunması gereken bir  örnektir.

• Parametreler

positionX

X eksenini üzerinde boyutlandırma  . (type=String, options=left|center|right, default=center)

positionY

Y eksenini üzerinde boyutlandırma (type=String, options=top|center|bottom, default=center)

speed

Tarayıcıya  göre boyut değiştirme hızını ayarlama  (slow, normal, fast). (type=Integer, default=0)

elPosition

Body tagları dışında kullanılan örnekler için (type=String, default=relative)

Kullanım 

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.anystretch.min.js"></script>

 JavaScript : 

<script type="text/javascript">
  $.anystretch("/path/to/image.jpg", {speed: 150});

  // Perhaps you'd like to change the image on a button click
  $(".button").click(function() {
      $.anystretch("/path/to/next_image.jpg");
  });
</script>