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”
জে-কোয়েরী ধারাবাহিক টিউটোরিয়ালঃ
- জে-কোয়েরী কি ?
- JavaScript, AJAX এবং jQuery নিয়ে কিছু কথা
- জে-কোয়েরী কোডিং পদ্ধতি
- জে-কোয়েরী সিনট্যাক্স
- জে-কোয়েরী সেল্ফ এ্যাক্সিউটিং ফাংশন
- জে-কোয়েরী অবজেক্ট এ্যাস্কেসর
- জে-কোয়েরী সিলেক্টর সমূহ
- অল সিলেক্টর (All Selector)
- ক্লাস এবং আইডি সিলেক্টর
- ইলিমেন্ট এবং মাল্টিপাল সিলেক্টর
- এট্রিবিউট সিলেক্টর
- প্রিফিস্ক সিলেক্টর
- কন্টেইন্ডস্ সিলেক্টর
- ওয়ার্ড এবং এন্ড সিলেক্টর
- ইকুয়াল এবং নট ইকুয়াল সিলেক্টর
- স্টার্ট ওয়িথ এবং হ্যাজ সিলেক্টর
- মাল্টিপাল এট্রিবিউট সিলেক্টর
- এট্রিবিউট সিলেক্টর গুলি নিয়ে একটি ছোট project
- :হিডেন সিলেক্টর
- :ভিজিবল সিলেক্টর
- jQuery form selectors উদাহরন
- Dynamically add/remove textbox
- জে-কোয়েরী ইভেন্ট সমূহ
- ব্লুয়ার ইভেন্ট
- ফোকাস এবং চেঞ্জ ইভেন্ট
- সাবমিট এবং সিলেক্ট ইভেন্ট
- ফোকাস-ইন এবং ফোকাস-আউট ইভেন্ট
- কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট
- কিভাবে copy, paste এবং cut behavior detect করা যায়?
- ক্লিক এবং ডাবল-ক্লিক ইভেন্ট
- মাউস্-মূভ ইভেন্ট
- মাউস-ওভার এবং মাউস-এন্টার ইভেন্ট এর মধ্যে পার্থক্য
- মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য
- টগল ইভেন্ট(Toggle Event)
- মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট
- jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন
- রিসাইজ ইভেন্ট (Resize Event)
Thanks Boro….Very nice.