Hazırladığım bir web portalını kullananlar arasında görme güçlüğü çeken bir kardeşimiz vardı. Sistem tamamlanıp teslim edildikten sonra kardeşimizin yazıların küçüklüğünden dolayı sistemi kullanamadığını öğrendik ve Yazıları Büyültme çözümü olarak bir kodblogu hazırladık.
Akla ilk gelen şey neden tarayıcıların büyütme özelliğini kullanmadınız sorusu olacaktır. Bazı sistemlerde o özellik kullanılamıyor. Örneğin webview bir mobil uygulama ve ya webbrowser içeren bir masaüstü uygulamasında kullanılmaz. Kullanılsa dahi yapılacak büyütme tüm sayfayı aynı yüzdesel oranda büyütecektir. Bizim istediğimiz hem diğer kullanıcıların etkilenmemesi hemde büyüme işlemi sırasında sayfa düzeninin bozmadan sadece istediğimiz elementleri yani direk yazı içeren kısımları büyütmek.
Layout page’in kullanılmayan bir bölgesine + ve – şeklinde iki buton oluşturup tıklanması durumunda aşağıdaki javascript kodlarının çalışması yeterlidir. İstenilen elementlere kademe kademe istenildiği kadar büyültme ve küçültme işlemi uygulanabilir.
Örnek fotoğraflarda da görüldüğü üzere büyültme işlemi textbox boyunu değil sadece string içeren değerleri büyültmüştür. Bu da sayfan yapısının bozmadan okunulabilirli artıyor.
JavaScript Kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(document).ready(function () { $('#t_bigger').click(function () { var curr_font_size = $('body,input,text,option').css('font-size'); var new_font_size = parseFloat(curr_font_size) + 5; $('body,input,text,option').animate({ fontSize: new_font_size }, 250); }); $('#t_smaller').click(function () { var curr_font_size = $('body,input,text,option').css('font-size'); var new_font_size = parseFloat(curr_font_size) - 5; $('body, input,text,option').animate({ fontSize: new_font_size }, 250); }); }); </script> |
gerçekten güzel bir uygulama yani google büyüteci bazen işe yaramadığı kesin.Bu yüzden bu kod işe yarar
Kesinlikle öyle 🙂