আমরা প্রায়ই বিভিন্ন ওয়েবসাইটে Floating effect দেখে থাকি, বিশেষ করে বিভিন্ন সামাজিক মিডিয়া ওয়েবসাইট গুলতে এগুলি বেশি দেখা যায়। বিভিন্ন ওয়েবসাইট বিভিন্ন ধরনের বিজ্ঞাপন দেয়ার জন্য ও Floating effect ব্যবহৃত হয়। আর এ effect গুলি সাধারনত jQuery দিয়েই তৈরি করা হয়। নিম্নে কিভাবে কোন ওয়েবসাইটে floating effect তৈরি করা যায় তার একটি উদারন step by step আলোচনা করা হল :-
সাধারন আলোচনা …
- একটি Floating box তৈরি করুন।
- প্রারম্ভিক Floating box এর অবস্থান ঠিক করুন এবং এটি Body Content এর মধ্যে পাশে রাখুন।
- যখন page এ স্ক্রলিং ব্যবহার করা হবে, তখন স্ক্রল বার এর অবস্থান conditionally check করতে হবে।
- যদি স্ক্রলবারের y position floating box এর Y position এর চেয়ে বড় হয়, সেক্ষেত্রে floating box এর Y position dynamically পরিবর্তন করতে হবে।
- যদি স্ক্রলবারের y position floating box এর Y position এর চেয়ে ছোট হয়, সেক্ষেত্রে floating box টি আবার মূল অবস্থানে ফিরিয়ে আনতে হবে।
1. HTML Layout
একটি সাধারন Layout যার একটি header, content এবং footer রয়েছে। এখানে content এর উপর একটি div “floating-box” নেয়া হয়েছে।
[sourcecode language=”html”]
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="floating-box"></div>
<div id="body">
<h1>content</h1>
<h2>Mashable floating effect example</h2>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
[/sourcecode]
2. Floating box 90×200
এটিই সেই Box যেটি Scrolling এর সাথে সাথে ভাসমান থাকবে। এর যন্য “margin-left:-100px;” adjust করতে হবে।
[sourcecode language=”css”]
#floating-box{
width:90px;
height:200px;
border:1px solid red;
background-color:#BBBBBB;
float:left;
margin-left:-100px;
margin-right:10px;
position:absolute;
z-index:1;
}
[/sourcecode]
3. No conflicts, please
jQuery এর সাথে অন্য library এর conflit না হয় , সেটি নিশ্চিত হতে হবে। Highly recommend to check it.
[sourcecode language=”js”]
//avoid conflict with other script
$j=jQuery.noConflict();
$j(document).ready(function($) {
[/sourcecode]
4. Position, position, position
Browser এর scroll bar position check করার জন্য jQuery scroll() event, bind করতে হবে।
[sourcecode language=”js”]
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css(‘position’) == ‘fixed’;
if($floatingbox.length > 0){
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: ‘fixed’,
left: ‘50%’,
top: 20,
marginLeft: -500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: ‘relative’,
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
[/sourcecode]
Scroll bar এর y position যদি floating box এর y position থেকে বড় হয় , তবে floating box এর y position পরিবর্তন করে “margin-left: -500” দিতে হবে। অথবা ইচ্ছামত বসানো যেতে পারে।
[sourcecode language=”js”]
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: ‘fixed’,
left: ‘50%’,
top: 20,
marginLeft: -500
});
}
[/sourcecode]
If scroll bar y position < floating box y position then restore to the original position.
[sourcecode language=”js”]
if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: ‘relative’,
left: 0,
top: 0,
marginLeft: originalX
});
}
[/sourcecode]
Try it yourself(Full Code)
[sourcecode language=”js”]
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#floating-box{
width:90px;
height:200px;
border:1px solid red;
background-color:#BBBBBB;
float:left;
margin-left:-100px;
margin-right:10px;
position:absolute;
z-index:1;
}
#page{
width:800px;
margin:0 auto;
}
#header{
border:1px solid blue;
height:100px;
margin:8px;
}
#body{
border:1px solid blue;
height:2400px;
margin:8px;
}
#footer{
border:1px solid blue;
height:100px;
margin:8px;
}
h1,h2{
padding:16px;
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="floating-box">
</div>
<div id="body">
<h1>content</h1>
<h2>ভাসমান ইফেক্ট এর উদাহরন</h2>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
<script type="text/javascript">
//avoid conflict with other script
$j=jQuery.noConflict();
$j(document).ready(function($) {
//this is the floating content
var $floatingbox = $(‘#floating-box’);
if($(‘#body’).length > 0){
var bodyY = parseInt($(‘#body’).offset().top) – 20;
var originalX = $floatingbox.css(‘margin-left’);
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css(‘position’) == ‘fixed’;
if($floatingbox.length > 0){
$floatingbox.html("srollY : " + scrollY + ", bodyY : "
+ bodyY + ", isfixed : " + isfixed);
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: ‘fixed’,
left: ‘50%’,
top: 20,
marginLeft: -500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: ‘relative’,
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
}
});
</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 এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন
Excellent…………
আমার অনেক দিনের ইচ্ছা jquery নিয়ে কাজ করার । আসা করি অনেক সহায়ক হবে পোস্ট । শুভেচ্ছা ও সুভ-কামনা রইল ।
ধনবাদ –
Thanks for this effective post.
আমাদের সাথে এতগুলো চমৎকার বিষয় নিয়ে আলোচনা করার জন্য টিউটোরিয়ালবিডিকে জানাই অশেষ ধন্যবাদ।
খুব সহায়ক পোষ্ট। উপকার পাচ্ছি। শেয়ার করার জন্য ধন্যবাদ।