রিসাইজ ইভেন্ট (Resize Event) : জে-কোয়েরী -(পর্ব-৩৭)

resize() ফাংশন ব্রাউজারের আকার পরিবর্তিত সনাক্ত করে এবং resize() ইভেন্টটি তখনই স্বচল হয় , যখন ব্রাউজারের আকার পরিবর্তিত হয়। এই ইভেন্টটি শুধু মাত্র $(window) এর সাথে bind করা হয়। ধরুন আমরা এমন একটি website তৈরি করতে চাচ্ছি যেটি যেকোন window এর সাথে adjust হয়ে যাবে; এক্ষেত্রে আমরা resize() ইভেন্টটি ব্যবহার করতে পারি। এছাড়াও যে সকল website percentage অনুযায়ী design করা হয়, সে সব website এর ক্ষেত্রে, অনেক সময় এমন হয় যে ব্রাউজারের আকার নির্দিষ্ট একটি আকারের চেয়ে ছোট হলে website এর design এলো মেলো হয়ে যায় , এ ক্ষেত্রে resize() ইভেন্টটি ব্যবহার করে ব্রাউজারের আকার নির্দিষ্ট একটি আকারের চেয়ে ছোট হওয়া থেকে বিরত রাখা যায়।

Example : নিচের উদাহরন টিতে $(window).width() এবং $(window).height() দ্বারা ব্রাউজারের actual width এবং height নির্নিয় করা হয়েছে।

[sourcecode language=”js”]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#browserInfo{
padding:8px;
border:1px solid blue;
width:300px;
}
</style>

</head>
<body>
<h1>jQuery resize() example</h1>

<h4>Try resize this browser</h4>

<div id="browserInfo">
</div>

<script type="text/javascript">

$(‘#browserInfo’).text(‘Browser (Width : ‘
+ $(window).width() + ‘ , Height :’ + $(window).height() + ‘ )’);

$(window).resize(function () {
$(‘#browserInfo’).text(‘Browser (Width : ‘ + $(window).width()
+ ‘ , Height :’ + $(window).height() + ‘ )’);
});

</script>
</body>
</html>
[/sourcecode]

Try Demo

………………………………………………………………………………
আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবী আমাদের প্রত্যেকেরই স্বপ্ন । আসুন আমাদের মেধা পরিশ্রম কে বিজ্ঞান সম্মতভাবে ব্যবহার করে, আমাদের স্বপ্ন পূরণে অংশ গ্রহণ করি। আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল। “HAVE A GOOD PROGRAMMING”

জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ

1 thought on “রিসাইজ ইভেন্ট (Resize Event) : জে-কোয়েরী -(পর্ব-৩৭)”

Leave a Comment