Fatih Hayrioğlu'nun not defteri » jQuery plugin http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 Jquery İle IFrame Yüksekliğini İçeriğine Göre Otomatik Ayarlamak http://www.fatihhayrioglu.com/jquery-ile-iframe-yuksekligini-icerigine-gore-otomatik-ayarlamak/ http://www.fatihhayrioglu.com/jquery-ile-iframe-yuksekligini-icerigine-gore-otomatik-ayarlamak/#comments Mon, 18 May 2009 08:31:21 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1060 Ben bu işe başladığımdan beri çerçeve(frame) kullanmak hoşa gitmemiştir. Allah’tan ilk çıktığındaki popülaritesini kaybettide rahatladım. Ancak yine bazı yerlerde tek çare olarak framset’i olmasada iframe’i kullanmak zorunda kalıyoruz.

Iframe kullanımında en çok yaşanan sorunlardan biridir içeriğin yüksekliğine göre iframe yüksekliğinin artması veya azalması. Daha önce ben bunu javascript ile yapmıştım. Ancak farklı tarayıcılarda bazı sorunlar yaşamıştım. Şimdide javascript ile bunu halledebiliriz. Ancak son zamanlarda(o kadar da yeni sayılmaz :D) popüler olan javascript kütüphaneleri(benim için bunun adı jQuery) ile bu daha basit.

Burada ufak bir ipucu var. Ben bir çok projelerimde jquery kütüphanesini kullandığım için jQuery autoHeight eklentisini kullandım. Eğer projemde jQuery kütüphanesi yüklü değilse javascript ile yapmak daha mantıklı. Javascript ile yapacaklar için bir link jQuery ile yapmanın bir kaç avantajıdaha var tabii

Ben burada jQuery autoHeight eklentisinin nasıl kullanılacağını anlatacağım.

Sayfamıza ilk olarak jQuery kütüphanesini eklemeliyiz. Bu script dosyasının ilk sırada olması önemli jQuery için.

<script type="text/javascript" src="script/jquery.js"></script>

Iframe otomatik yükseklik vermek için kullandığımız eklenti kodu.

<script type="text/javascript" src="script/jquery.autoheight.js"></script>

Sayfaya eklediğimiz iframe kodunda yapmamız gereken sadece class="autoHeight" eklemek.

<iframe id="listeCercevesi" name="listeCercevesi" class="autoHeight" scrolling="auto" frameborder="0" src="/liste.aspx"></iframe>

Örnek sayfayı görmek için tıklayın. (sonspring.com alınmıştır)

Uyarılar:

  • İlk uyarımız bu metot aynı alan adı üzerindeki sayfa eklemelerinde çalışıyor. İçreriğini farklı siteden aldığımız iframe’ler güvenlik nedeniyle çalışmayacaktır.
  • İkinci uyarım ise içeriği yüklü olan iframe sayfalarında yükleme zaman aldığı için ve scriptimiz sayfa yüklendikten sonra çalıştığı için sayfa yüksekliği ilk açılıştı küçük geliyor ve sonradan gerçek boyutuna geliyor. Ben bunu engellemek için iframe’e ortalama bir yükseklik değeri girdim. Script yüklendiğinde zaten beni girdiğim değeri değiştiriyor.
  • Üçüncü olarak bu yöntem javascript yönteminden daha kullanışlı yapan özelliklerden biri de kullanımının kolay olması ve her iframe e id vermek zorun olmuyor olmamız.

Kaynaklar

]]> http://www.fatihhayrioglu.com/jquery-ile-iframe-yuksekligini-icerigine-gore-otomatik-ayarlamak/feed/ 24 27 Ağustos – 2 Eylül web’den seçme haberler http://www.fatihhayrioglu.com/27-agustos-2-eylul-webden-secme-haberler/ http://www.fatihhayrioglu.com/27-agustos-2-eylul-webden-secme-haberler/#comments Tue, 02 Sep 2008 07:04:32 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=580
  • Javascript ile resim bilgilerini elde etmek. Bağlantı
  • Web uygulamalarını hızlandırmak için çözüm yolları. Bağlantı
  • FireBug 1.2 sürümü yani Firefox 3 içi olanı kararlı sürümü yayınlanmak üzereymiş. Bağlantı
  • 11 WordPress uygulaması ipucu. Bağlantı
  • CSS ile nasıl gölgeli menü yapılır. Bağlantı
  • 10 ünlü CSS geliştiricisinden CSS teknikleri. Bağlantı
  • 40 adet CSS sayfa planlama tekniği bağlantısı. Bağlantı
  • Fireox 3 ile birlikte gelen CSS destekleri. Bağlantı
  • CSS ve javascript ile yapılmış güzel bir garaj kapısı efektli menü örneği. Bağlantı
  • Safari 4 Geliyor (2): 40A12 – macosxpc.com Bağlantı
  • 10 adet jQuery plugini. Bağlantı
  • 30 ücretsiz yüksek kaliteli WordPress teması. Bağlantı
  • Firefox javascript okuma motorunu yeniliyor. Daha hızlı bir Firefox 3.1 kullanacağız. Bağlantı
  • hr kullanımı ve örnekleri. Bağlantı
  • Mutant Web Uygulamalari – azer.r92.org Bağlantı
  • Siteme son zamanlarda çok fazla gereksiz yorum ve geriizleme geliyor. Akismet’i kurdum. İnşallah sorunları gideririz.
    • ]]>     http://www.fatihhayrioglu.com/27-agustos-2-eylul-webden-secme-haberler/feed/ 1