Web sitesi yaparken kullandığınız template'lerden bağımsız olarak özellikle SPA’da (Single Page Application) ekran yüksekliğini kullanıcın bilgisayarının yüksekliğine göre ayarlamak isteyebilirsiniz. Bu makalede bunun nasıl yapılacağını örnekle açıklamaya çalışacağım. Projelerimde JQuery kullandığım için bunu JQuery kütüphanesini kullanarak yapacağım. Eğer siz JQuery kullanmıyorsanız veya başka kütüphane kullanıyorsanız da bu işlemleri kendi kütüphanenize göre manipüle edebilirsiniz. Yaptığım işlemlerde JQuery kütüphanesini sadece verdiğim ID değerine ulaşmak ve bu değerin boyutunu manipüle etmek için kullanıyorum. İsterseniz fazla laf kalabalığı yapmadan konuyu örnek üzerinden anlatayım. Örnek olması açısından gerekli kodları verdikten sonra açıklamasını yapacağım.<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
#header-area{
border:2px solid coral;
}
</style>
</head>
<body>
<div id="header-area">
<h1>
Information Universe Of Alizade ZADE
</h1>
</div>
<script>
if ($('#header-area')) {
$('#header-area').height($(window).height() - 30);
$('#header-area').resize(function () {
if ($('#header-area')) {
if ($('#header-area').css('width') != (($(window).width()) + 'px'))
$('#header-area').height($(window).height() - 30);
}
});
}
</script>
</body>
</html>Bu kodları direk kullanabilmek için projenizde kullanmıyorsanız JQuery kütüphanesini eklemeniz lazım. Eğer kullanmak istemiyorsanız da yapacağınız tek şey kod bloğu içindeki kodları püre Javascriptte dönüştürmek olacaktır. Kodların çalışabildiğini teste etmek için de header-area id’ne sahip alana border ekledim. Kodu çalıştırırsanız siz de tüm ekrana sığacak şekilde kenarlıkların büyütüldüğünü göreceksiniz.
Konu ile alakalı sorularınız varsa lütfen sormaktan çekinmeyin. En kısa sürede yanıtlamaya çalışacağım...
Yorumlar
Yorum Gönder