jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন (Floating effect example with JQuery) : জে-কোয়েরী -(পর্ব-৩৬)

আমরা প্রায়ই বিভিন্ন ওয়েবসাইটে Floating effect দেখে থাকি, বিশেষ করে বিভিন্ন সামাজিক মিডিয়া ওয়েবসাইট গুলতে এগুলি বেশি দেখা যায়। বিভিন্ন ওয়েবসাইট বিভিন্ন ধরনের বিজ্ঞাপন দেয়ার জন্য ও Floating effect ব্যবহৃত হয়। আর এ effect গুলি সাধারনত jQuery দিয়েই তৈরি করা হয়। নিম্নে কিভাবে কোন ওয়েবসাইটে floating effect তৈরি করা যায় তার একটি উদারন step by step আলোচনা করা হল :-

সাধারন আলোচনা ...

  1. একটি Floating box তৈরি করুন।
  2. প্রারম্ভিক Floating box এর অবস্থান ঠিক করুন এবং এটি Body Content এর মধ্যে পাশে রাখুন।
  3. যখন page এ স্ক্রলিং ব্যবহার করা হবে, তখন স্ক্রল বার এর অবস্থান conditionally check করতে হবে।
  4. যদি স্ক্রলবারের y position floating box এর Y position এর চেয়ে বড় হয়, সেক্ষেত্রে floating box এর Y position dynamically পরিবর্তন করতে হবে।
  5. যদি স্ক্রলবারের 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”

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

5 thoughts on “jquery এর সাহায্যে ভাসমান ইফেক্ট এর উদাহরন (Floating effect example with JQuery) : জে-কোয়েরী -(পর্ব-৩৬)”

  1. ডেভিড চিরান

    আমার অনেক দিনের ইচ্ছা jquery নিয়ে কাজ করার । আসা করি অনেক সহায়ক হবে পোস্ট । শুভেচ্ছা ও সুভ-কামনা রইল ।

    ধনবাদ –

  2. আমাদের সাথে এতগুলো চমৎকার বিষয় নিয়ে আলোচনা করার জন্য টিউটোরিয়ালবিডিকে জানাই অশেষ ধন্যবাদ।

Leave a Comment