Merhaba arkadaşlar,
Twitter’da paylaştım ilgi gördü o yüzden sizleride bu konudan mahrum etmek istemedim.
Responsive psd to css işlemi yaparken tarayıcının genişliği çok önemli oluyor, her seferinde bunu ölçmek için ya measureit eklentisiyada firebug console‘u açıyorum jQuery ile dökümanın genişliğini alıyorum vs vs.
Yukarıdaki yöntemler zaman aldığı için bir kaç satırdan oluşan jquery yazdım, Tarayıcı resize olduğunda sitenin sağ alt köşesine bir span atıp, içine ekran genişliğini yazıyor.
Kodlar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$(window).resize(function (){ if($('.responsiveSpan').length) { $('.responsiveSpan').html($(window).outerWidth()); } else { $('body').append ( $('<span>').css ( { 'background': 'gray', 'display' : 'inline-block', 'font-size' : '25px', 'color' : '#cd1821', 'position' : 'fixed', 'right' : '0', 'bottom' : '0' } ).addClass('responsiveSpan').html($(window).outerWidth()) ); } }); |
Yukarıdaki jquery fonksiyonlarından, append‘ı daha önceden anlatmıştım.
2. yorumda ki hatayı farkettip düzenleme için teşekkürler Ali.
Güncellemeler
10 Mart 2014 10:21 -> position:absolute, position:fixed’e çevrildi.
Html ile birlikte jquery öğrenmeye başladım, güzel bir fonksiyon olmuş teşekkürler 🙂
Burada bariz düzenlenmesi gereken bir nokta var. O da burada mantıken $(document).outerWidth() ‘in kullanılmasının yanlış olmasından kaynaklanmakta. Onun yerine $(window).outerWidth() kullanılması gerekmekte. Denerken html dökümanının genişliği tarayıcı dökümanıyla aynı genişlikte olduğu için bu bug’ı fark edememişsindir abi. Ama $(document).outerWidth() sana ‘in genişliğini verirken, $(window).outerWidth() sana tarayıcının genişliğini verir. 🙂
Bunun haricinde ille de $(document).ready( … ) içerisinde kullanılmak zorunda da değil. Onsuz da direkt $(window) ‘a event ‘ı tanımlayabiliriz/atayabiliriz.
Kısacası; http://codepen.io/alibarin/pen/mkrao
Ama tabii ki her halükarda ellerine sağlık Aycan abi. 🙂
Sevgilerle,
Merhaba, yazının üzerinden zaman geçmiş ama arama yaparken karşıma çıktı. Yaptığım testte, $(window).outerWidth() (Chrome) scrollbar genişliğini dikkate almadığı için tarayıcının o an düştüğü media query lerden farklı bir sonuç veriyor. Bunun için ben de basit bir araç yazmıştım. Burada bahsetmek istiyorum: https://gist.github.com/anova/00373622ae7c1ca7f085
İyi çalışmalar, yazılar için teşekkürler. (Halen dönüp dönüp, jquery ile tıklama ve tıklamama yazısına bakarım, neredeyse her projede lazım oluyor)
Teşekkürler Necat güzel bilgiler için.
O tıklama tıklamama muhabbeti biraz kötü onu geliştirdik ama paylaşmak nasip olmadı 🙁
targetOutClick([‘.profil’,],function(){
$(‘.profil nav’).finish().slideUp(200);
});
function targetOutClick(obje,callback){
$(‘html’).on(‘click’, function(event){
for(var i in obje)
{
if ($(event.target).is(obje[i]) || $(event.target).parents(obje[i]).size() > 0)
{
return;
}
}
callback();
});
}
Bu her nesneyi dilemiyorda gayer kullanışlı .