জেকুয়েরি offset() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
offset() মেথড ডকুমেন্টের সাপেক্ষে নির্বাচিত এলিমেন্টের জন্য অফসেট স্থানাঙ্ক(cordinates) সেট করে অথবা রিটার্ন করে।
যখন অফসেট রিটার্ন ব্যবহার করা হয়:
এই মেথড প্রথম মিলকৃত অফসেট স্থানাঙ্ক রিটার্ন করে। এটি দুটি প্রোপারটির সাথে একটি অবজেক্ট রিটার্ণ করে;
top এবং left পজিশন পিক্সেলে(px) এ।
যখন অফসেট সেট করতে ব্যবহার করা হয়:
এই মেথড সকল মিলকৃত এলিমেন্টে অফসেট স্থানাঙ্ক রিটার্ন করে।
সিনট্যাক্স ও ব্যাখ্যা
অফসেট স্থানাঙ্ক রিটার্ন:
$(selector).offset()
অফসেট স্থানাঙ্ক সেট:
$(selector).offset({top:value,left:value})
ফাংশন ব্যবহার করে অফসেট স্থানাঙ্ক সেট:
$(selector).offset(function(index,currentoffset))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে offset() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
{top:value,left:value} |
যখন অফসেট সেট করা হয় তখন এটি আবশ্যক। top এবং left স্থানাঙ্ক পিক্সেলে(px) উল্লেখ করে।সম্ভাব্য ভ্যালুগুলো হলো:
|
functionn (index,currentoffset) |
ঐচ্ছিক। একটি ফাংশন উল্লেখ করে যা top and left স্থানাঙ্ক ধারণকারী একটি অবজেক্ট রিটার্ন করে।
|
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").offset();
alert("Top: " + x.top + " Left: " + x.left);
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>p এলিমেন্টের অফসেট স্থানাঙ্ক রিটার্ন করুন</button>
</body>
</html>
ফলাফল
উদাহরণ
অফসেট স্থানাঙ্ক সেট
কিভাবে একটি এলিমেন্টে অফসেট স্থানাঙ্ক সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset({top: 200, left: 200});
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ</p>
<button>p এলিমেন্টের অফসেট কো-অর্ডিনেট সেট করুন</button>
</body>
</html>
ফলাফল
ফাংশন ব্যবহার করে অফসেট স্থানাঙ্ক সেট
ফাংশন ব্যবহার করে একটি এলিমেন্টের অফসেট স্থানাঙ্ক সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset(function(n, c){
newPos = new Object();
newPos.left = c.left + 100;
newPos.top = c.top + 100;
return newPos;
});
});
});
</script>
</head>
<body>
<p style="background-color: green; color: white;">এটি একটি প্যারাগ্রাফ।</p>
<button>p এলিমেন্টের অফসেট স্থানাঙ্ক রিটার্ন করুন</button>
</body>
</html>
ফলাফল
অবজেক্ট ব্যবহার করে একটি এলিমেন্টের জন্য অফসেট স্থানাঙ্ক সেট
কিভাবে অবজেক্ট ব্যবহার করে একটি এলিমেন্টের অফসেট স্থানাঙ্ক সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
newPos = new Object();
newPos.left = "0";
newPos.top = "100";
$("p").offset(newPos);
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>একটি অবজেক্ট ব্যবহার করে p এলিমেন্টের অফসেট কো-অর্ডিনেট সেট করুন।</button>
</body>
</html>
ফলাফল
অন্য একটি এলিমেন্টের অফসেট স্থানাঙ্ক ব্যবহার করে একটি এলিমেন্টের জন্য অফসেট স্থানাঙ্ক সেট
কিভাবে একটি বিদ্যমান এলিমেন্টের অফসেট coords ব্যবহার করে একটি এলিমেন্টের জন্য অফসেট coords সেট করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offset($("span").offset());
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>p এলিমেন্টের অফসেট স্থানাঙ্ক span এলিমেন্টের সমান করার জন্য এখানে ক্লিক করুন</button>
<span style="position:absolute;left:100px;top:150px;">এটি span এলিমেন্ট।</span>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ