CSS kodumuzu yazarken overflow (taşma) özelliğini sık sık kullanıyoruz. Genellikle taşma olduğunda gizlemek için overflow: hidden ya da gizlemek yerine overflow: scroll yazarak kaydırma çubuğu ekliyoruz. Peki gizlemek veya kaydırma çubuğu eklemek yerine başka bir şey yapamaz mıyız, mesela bir elemente yeni bir class eklemek gibi? İşte şimdi size bu sorunun cevabını vereceğim.
Buna neden ihtiyaç duyarsınız bilmiyorum ama ben neden ihtiyaç duyduğumu kısaca açıklayayım: Bir açılır menü olduğunu düşünün. Bu açılır menünün seviyesi diyelim ki 8 olsun ve ilk açılır menü aşağıya doğru açılırken diğerlerinin sağa doğru açıldığını düşünelim.
Demek istediğim:
Peki bu menü açılır menülerin altında daha fazla açılır menü olduğu zaman bizim penceremizden taşacaklar. Bu durumda body elementimize overflow: hidden özelliğini kullanmak pek doğru olmayabilir. Sonuç olarak görünmesi gereken bir şeyi gizlemiş olacağız. Tam da bu durumlar için yazıyorum işte bu yazıyı. jQuery ile bu taşmayı yakalayıp bir class eklemesi yapıp sorunumuzu çözeceğiz. Tabii size başka bir şey için de lazım olmuş olabilir. Nerede kullanmak istiyorsanız orada kullanabilirsiniz.
Taşmayı yakalamadan açılır alt menülerimizin hepsini açtığımız zaman bakalım nasıl görünüyor:
Görüldüğü üzere taşma oldu ve alt tarafa scroll-bar geldi. Bu istemediğimiz bir durumdur. Şimdi bir de kodumuzu yazdıktan sonra nasıl olacak ona bakalım:
İşte şimdi oldu. Artık çok daha iyi görünüyor. Taşma varsa ben bir class eklemesini yazdım ve o yazdığım class ile de CSS tarafında soldan açılmasını sağladım.
Taşmayı yakaladığımız jQuery koduna bakalım:
function add_opens_from_left_classes() {
jQuery(document).find('ul.sub-menu').each(function () {
var ending_right = (jQuery(window).width() - (jQuery(this).offset().left + jQuery(this).outerWidth()));
if (ending_right < 0) {
var x = jQuery(this).addClass('opens-from-left')
} else {
}
})
}
Burada kontrolünü yaptığım bir ending_right değişkenim mevcut. Eğer bu 0’dan küçük oluyorsa taşma var demektir. Bu kodu kendi ihtiyacınıza göre değiştirip kullanabilirsiniz. Ama bir sorununuz daha olabilir.
Bu class’ı eklediğim zamandaki pencere genişliği ile daha sonra ki pencere genişliği aynı olmayabilir. Bu durumda şöyle düşünelim. Önceki pencere genişliğimiz sonra ki pencere genişliğimizden daha dar olsun ve sonucunu görelim:
Bu durumda böyle bir şey ile karşılaşabilirsiniz. İlk taşmaya göre çalışacaktır hep. O yüzden pencere genişliği her değiştiğinde eklediğiniz classları silip yeni pencere genişliğine göre tekrar eklemeniz lazım. İşte kod:
jQuery(window).resize(function () {
delete_opens_from_left_classes()
})
function delete_opens_from_left_classes() {
jQuery(document).find('.opens-from-left').each(function () {
jQuery(this).removeClass('opens-from-left')
})
}
Artık sonucumuz tam da istediğimiz gibi oldu sanırım.