‘resize’ etiketi için sonuçlar

CSS3 resize özelliği

Ağustos 10th, 2011 • CSS
Etiketler: , ,

resize özelliği kullanıcıya elementin boyutlarını ayarlama imkanı vermemizi sağlar. Kullanıcı bu elemanın boyutunu istediği gibi değiştirme imkanına kavuşur

Yapısı: resize: <deger>
Aldığı Değerler: both | horizontal | vertical | none | inherit
Başlangıç Değeri: none
Uygulanabilen Elementler: block-level ve replaced elementler, tablo hücreleri ve inline block elementler
Kalıtsallık: yok

both: Her iki yöne boyutlandırmaya izin verir.
horizontal: yatayda boyutlandırmaya izin verir.
vertical: dikeyde boyutlandırmaya izin verir.
none: boyutlandırma seçeneğini kaldırır
inherit: kalıtsal olarak bu değeri üst elementten alır. 

div{
overfloaw:auto; /* bu tanim gerekli */
resize:both;
}

overflow değeri scroll, auto veya hidden değerlerinde etki ederken overflow: visible tanımında ise etki yapmaz.

Bu özellik Chrome ve Safaride textarea alanları için otomatik gelmektedir. Tarayıcı bu eleman için bu değeri otomatik uygulamaktadır. Daha önce ipucu olarak yazdığım gibi bu otomatik tanımı css ile kaldırabiliyoruz.

Bir örnek yapalım

.icerik{
    box-shadow: rgb(136, 136, 136) 5px 5px 5px;
    border-radius: 5px;
    resize: both;
    overflow: auto;
    border: 1px solid #dedede;
    padding:10px;
    width: 300px;
    height: 200px;
}

Sadece bir yöne boyutlandırabiliyoruz

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
}

min-height ve min-width değerleri ile boyutlandırmanın minimum değerlerini belirleyebiliyoruz. Anı şekilde max-height ve max-width değerleri ile de maksimum değerleri belirlenebilir. Bu özelliklerle kullanıcının sayfa görünümünü bozmasını engelleyebiliriz. 

.siir{
    width: 170px;
    height: 200px;
    resize: vertical;
    overflow: hidden;
    position: relative;
    padding: 0 25px;
    border: 1px solid #DDD;
    font-family: georgia, serif;
    max-height: 650px;
    min-height: 200px;
}

Resimler için güzel bir uygulama olabilir.

.vasak{
	width: 200px;
	margin: 0 10px;
	height: 150px;
	resize: both;
	overflow: hidden;
	position: relative;
	padding: 15px;
	border: 1px solid #DDD;
}

.vasak img{
	width:100%;
	height:auto;
}

Tarayıcı Desteği
Google Chrome 5+
Safari 5+
Firefox4+
Opera desteklemiyor
İnternet Explorer desteklemiyor
Mobil Tarayıcılar
Android desteklemiyor
Firefox mobile desteklemiyor
IE Phone desteklemiyor
Opera Mobile desteklemiyor
Safari Mobile desteklemiyor

resize özelliği W3C Basic User Interface Module ile önerilen bir özelliğidir. Tarayıcıların destekleme durumuna göre ileride standartlaşıp standartlaşmayacağı belirlenecek bir özellik olarak görünse de Firefox desteği standartlaşması daha olasıdır.

Kaynaklar

jQuery ipuçları – 3

Temmuz 1st, 2010 • 9 yorum Javascript, jquery
Etiketler: , , , , ,

Jquery ipuçları – 1
Jquery ipuçları – 2

jQuery ipuçlarını yayınlamaya devam ediyorum.

1- Dinamik oluşturulan elementlere live() ile olay atama

Sayfaya dinamik olarak eklenen içeriklerde veya ajax ile doldurduğumuz içeriklerdeki elemanlara bir olay atadığımızda(click, mouseover vd.) çalışmayacaktır. jQuery geliştiricileri bunun için live() fonksiyonunu geliştirmiş.

$('a.acilSusam').live('mouseover', function() {
 // yapilacak islemler
});

2 – Tarayıcı Penceresinin Boyutlarını Değişmesini Yakalamak

Belki ara sıra lazım olacak bir kod ama bazen gerekiyor işte. Pencere boyutu her değiştiğine bazı işlemleri yapmak sistemimizi yorabilir diye setTimeout yardımı ile belli aralıklarla bunu yaptırıyoruz.

function pencereBoyutuDegisti() {
	alert("Değişti");
};

var resizeTimer = null;
$(window).bind('resize', function() {
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(pencereBoyutuDegisti, 100);
});

3 – Element miktarını bulmak

Bir dokümanda seçilen elemandan kaç adet olduğu bulmak için;

	$('element').size();

4 – Bir elemanın index değerini bulmak

index değerini bulmanın farklı bir yolu 

$("ul > li").click(function () {
	var index = $(this).prevAll().length;
});

5- Bir elemanın görünür olup olmadığını yakalamak

if($(".eleman").is(":visible")) {
    alert('Burda');
}

6- Kaç tane alt elemanı(çocuk elemanı) var

<div id="foo">
<div id="bar"></div>
<div id="baz">
<div id="biz">
</div>
<span><span>
</div>

//kac tane alt elemanı oldugunu bulmak icin
$("#foo > div").length

7- jQuery Kopya Kağıdı(Cheat Sheet)

jQuery’nini bir çok özelliği var ve bunları aklımızda tutma imkanımız yok. Bir kopya kağıdı işimize yaraya bilir.

http://www.futurecolors.ru/jquery/

Burada son sürümün kopya kağıdı mevcut. Bende css3 özelliklerini kullanarak biraz renklendirdim. Benim renklendirdiğim(CSS3 içerir, herisi göremez)

8 – Select Elemanı ipuçları

// secili olan ögenin metnini almak
$("#myselect option:selected").text();

// secili olan ögenin degerini almak icin
$("#myselect option:selected").val();

// secili ogenin index degeri
$("#myselect option").index($("#myselect option:selected"));

// indeksi 2 olan ögeyi seçili hale getirmek
$("#myselect option:eq(2)").attr("selected", "selected");

Kaynaklar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.