জে-কোয়েরী (jQuery)

ওয়েব সাইটে স্ক্রল টু টপ বাটন যুক্ত করার পদ্ধতি

ওয়েব সাইট তথ্য প্রকাশের অন্যতম জনপ্রিয় মাধ্যম। আমরা বিভিন্ন ধরণের ওয়েব সাইটের সাথে পরিচিত। কেন একটি সাইটের একটি পেজ অনেক বেশি কনটেন্ট ধরণ করতে পারে আবার কয়েকটি লাইনও থাকতে পারে। সাধারণত জনপ্রিয় ব্লগ সমূহে দেখা যায় ৩০০-৫০০ শব্দের কোন একটা পোস্টেও কয়েক শত কমেন্ট পরে,এক্ষেত্রে একজন ব্যবহারকারী পেজের শেষ প্রান্তে পৌছানোর পর আবার প্রথমে স্ক্রল […]

ওয়েব সাইটে স্ক্রল টু টপ বাটন যুক্ত করার পদ্ধতি Read More »

অন্ এবং ওয়ান ইভেন্ট হ্যান্ডলার (on & one Event Handler) : জে-কোয়েরী -(পর্ব-৪১)

অন্ ইভেন্ট হ্যান্ডলার (on Event Handler) : jQuery on event handler এর সাহায্যে কোন element এর সাথে এক বা একাধিক event কে attach করা যায়। এ event handler টি jQuery 1.7 এর নতুন সংযোগ। একে সমন্বয়ক event handler ও বলা য়েতে পারে; কারন এর মাধ্যমে পুরাতন event handler যেমন : bind(), live() এবং delegate() এ

অন্ এবং ওয়ান ইভেন্ট হ্যান্ডলার (on & one Event Handler) : জে-কোয়েরী -(পর্ব-৪১) Read More »

বাইন্ড, লাইভ এবং ডেলিগেইট (Bind, Live & Delegate) : জে-কোয়েরী -(পর্ব-৪০)

এসকল jQuery ফাংশন গুলি selector অথবা element এর সাথে events attach করার জন্য ব্যবহৃত হয়। কিন্তু প্রশ্ন হল তাহলে তিনটি একই ফাংশন রাখার প্রয়োজন কি ? আসলে ব্যাপারটা ঠিক তা নয়। তাই এই পোস্টে, আমি এই function তিনটি সম্পর্কে বিস্তারিত আলোচনা করবো। বাইন্ড(bind) : bind() method যেকোন element এর সাথে event কে bind করে। [sourcecode

বাইন্ড, লাইভ এবং ডেলিগেইট (Bind, Live & Delegate) : জে-কোয়েরী -(পর্ব-৪০) Read More »

রেডি ইভেন্ট (Ready Event) : জে-কোয়েরী -(পর্ব-৩৯)

অধিকাংশ ক্ষেত্রে, কোন পেজের DOM hierarchy যখন পরিপূর্নভাবে browser এ সংগঠিত / স্থাপিত হয়, তখনই কেবলমাত্র script execute হতে পারে। যখন DOM manipulate করার জন্য পরিপূর্ন ভাবে প্রস্তুত(ready) হবে, তখন .ready() function টি কাজ শুরু করবে অর্থৎ handler .ready() এর মধে প্রতিস্থাপিত হবে। সুতরাং এটি ছাড়া অন্যান্ন সকল event handler কে attach করা সহ jQuery

রেডি ইভেন্ট (Ready Event) : জে-কোয়েরী -(পর্ব-৩৯) Read More »

লোড এবং আন-লোড ইভেন্ট (Load and Unload Event) : জে-কোয়েরী -(পর্ব-৩৮)

লোড (Load) ইভেন্ট : load() event টি ঘটে, যখন একটি নির্দিষ্ট উপাদান (এবং এর সাব উপাদান) লোড হয়। এই event টি URL-এর সাথে সম্পর্কযুক্ত যে কোনো উপাদান যেমন : images, scripts, frames, iframes, এবং window object ইত্যাদি প্রেরন করতে পারে। যদি image টি Browser এর ক্যাশে থাকে সে ক্ষেত্রে load event trigger নাও হতে পারে

লোড এবং আন-লোড ইভেন্ট (Load and Unload Event) : জে-কোয়েরী -(পর্ব-৩৮) Read More »

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

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

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

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

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

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

মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট (Mousedown, Mouseup & Hover Event) : জে-কোয়েরী -(পর্ব-৩৫)

মাউস-ডাউন(Mousedown) ইভেন্ট : যখন Mouse এর কোন Button (ডান অথবা বাম যেকোন Button হতে পারে) Press করা হয় , তখন Mousedown Event সংগঠিত হয় (Occurs when mouse button is pressed)। মাউস-আপ (Mouseup) ইভেন্ট : যখন Mouse এর কোন Button (ডান অথবা বাম যেকোন Button হতে পারে) Press করে ছেড়ে দেয়া হয় , তখন Mouseup Event

মাউস-ডাউন, মাউস-আপ এবং হোভার ইভেন্ট (Mousedown, Mouseup & Hover Event) : জে-কোয়েরী -(পর্ব-৩৫) Read More »

টগল ইভেন্ট (Toggle Event) : জে-কোয়েরী -(পর্ব-৩৪)

jQuery তে .toggle() নামে একটি animation method আছে যা element এর visibility কে পরপর প্রদর্শন করে। যেখানে কতগুলি animation প্রদর্শন করবে তা নির্ভর করে .toggle() methode এর এক set argument এর উপর। .toggle() methode টি click event এর সাথে bind করা, তাই এর সাথে .click() দেয়ার প্রয়োজন হয়না। যেমন :- [sourcecode language=”html”] <div id="target"> Click

টগল ইভেন্ট (Toggle Event) : জে-কোয়েরী -(পর্ব-৩৪) Read More »

মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseout() And Mouseleave () event) : জে-কোয়েরী -(পর্ব-৩৩)

jQuery তে যখন কোন element এর মধ্যে থেকে mouse pointer চলে যায় ঠিক তখনই Mouseout() এবং Mouseleave() event দুটি সংগঠিত হয়। এদের মধ্যে শুধু পার্থক্য হল child element এর “Event Bubbling” এর ক্ষেত্রে। নিচের দৃশ্যপট দুটি লক্ষ্য করুন : 1) যখন কোন child element থাকবে না – যদি কোন element এর কোন child element না

মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseout() And Mouseleave () event) : জে-কোয়েরী -(পর্ব-৩৩) Read More »

মাউস-ওভার এবং মাউস-এন্টার ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseover() And Mouseenter() event) : জে-কোয়েরী -(পর্ব-৩২)

jQuery তে যখন কোন element এর মধ্যে mouse প্রবেশ করে ঠিক তখনই mouseover() এবং mouseenter() event দুটি সংগঠিত হয়। এদের মধ্যে শুধু পার্থক্য হল child element এর “Event Bubbling” এর ক্ষেত্রে। নিচের দৃশ্যপট দুটি লক্ষ্য করুন : 1) যখন কোন child element থাকবে না – যদি কোন element এর কোন child element না থাকে, সে

মাউস-ওভার এবং মাউস-এন্টার ইভেন্ট এর মধ্যে পার্থক্য (Different Between Mouseover() And Mouseenter() event) : জে-কোয়েরী -(পর্ব-৩২) Read More »

মাউস্-মূভ ইভেন্ট (Mousemove Event) : জে-কোয়েরী -(পর্ব-৩১)

যখন mouse pointer নড়ানো হয়, তখন mouse move event সংগঠি হয় (Occurs when mouse pointer moves)। যখন কোন element এর মধ্যে mouse move করে তখন ঐ element টির area এর মধ্যে প্রতি pixel এ mouse move event সংগঠিত হয়। যখন mouse কোন element কে trigger করে তখন mouse pointer এর track রাখার জন্য event.pageX (position

মাউস্-মূভ ইভেন্ট (Mousemove Event) : জে-কোয়েরী -(পর্ব-৩১) Read More »

ক্লিক এবং ডাবল-ক্লিক ইভেন্ট (Click & dblclick Event) : জে-কোয়েরী -(পর্ব-৩০)

ক্লিক(click) ইভেন্ট : যখন Mouse এর বাম(Left) বাটনে ক্লিক করা হয়, তখন Click Event সংগঠিত হয় (Occurs when a mouse click)। এ ক্ষেত্রে একটি বিষয় মনে রাখতে হবে যে, Mouse এ Click করে ছেড়ে দিতে হবে; ছেড়ে না দেয়া পর্যন্ত Click Event সংগঠিত হবে না। ডাবল-ক্লিক(dblclick) ইভেন্ট : যখন Mouse এ্রর বাম(Left) বাটনে পর পর

ক্লিক এবং ডাবল-ক্লিক ইভেন্ট (Click & dblclick Event) : জে-কোয়েরী -(পর্ব-৩০) Read More »

কিভাবে copy, paste এবং cut behavior detect করা যায়? : জে-কোয়েরী -(পর্ব-২৯)

অনেক সময় application এর মধ্যে copy, paste এবং cut behavior detect করার প্রয়োজন হয়। যদিও এর জন্য অনেক সুন্দর সুন্দর tools রয়েছে যার মাধ্যমে effeciently client side এ অনেক behavior detect করা সম্ভব। নিচে এ সম্পর্কত একটি ছোট program দেয়া হল : copy, pest এবং cut behavior detect করার জন্য অনুরূপ(corresponding) event গুলিকে bind করতে

কিভাবে copy, paste এবং cut behavior detect করা যায়? : জে-কোয়েরী -(পর্ব-২৯) Read More »

কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (Keyup, Keydown & Keypress Event) : জে-কোয়েরী -(পর্ব-২৮)

কী-ডাউন(KeyDown) ইভেন্ট : যখন keyboard এ কোন key press করা হয়, তখন KeyDown Event সংগঠিত হয় (Occurs when key is pressed)। কী-প্রেস(KeyPress) ইভেন্ট : যখন কোন key press করে ছেড়ে দেয়া হয়, তখন KeyPress Event সংগঠিত হয় (Occurs when key is pressed and released)। কী-অপ(KeyUp) ইভেন্ট : যখন কোন key ছেড়ে দেয়া হয়, তখন KeyUp

কী-অপ, কী-ডাউন এবং কী-প্রেস ইভেন্ট (Keyup, Keydown & Keypress Event) : জে-কোয়েরী -(পর্ব-২৮) Read More »

ফোকাস-ইন এবং ফোকাস-আউট ইভেন্ট (Focusin and Focusout Event) : জে-কোয়েরী -(পর্ব-২৭)

যখন কোন element focus পায় (get focus) তখন focusin event সংগঠিত হয়। যখন selected element এর child element focus পায়, তখন focusin() methode কোন function কে call করতে পারে।Syntax : $(selector).focusin(function(){}) focusout event টি focusin event এর ঠিক বিপরীত; যখন কোন element focus হারায় (losses focus) তখন focusout event সংগঠিত হয়। যখন selected element এর

ফোকাস-ইন এবং ফোকাস-আউট ইভেন্ট (Focusin and Focusout Event) : জে-কোয়েরী -(পর্ব-২৭) Read More »

সাবমিট এবং সিলেক্ট ইভেন্ট (Submit & Select Event) : জে-কোয়েরী -(পর্ব-২৬)

সাবমিট ইভেন্ট : php তে form এর data process করার জন্য data কে কোথাও (কোন page এ) submit করার প্রয়োজন হয় (Asp তে submit ছাড়াই data process করা যায়) আর data যখন submit হয় তখনই submit event সংগঠিত হয় (Occurs when form form is submitted)। এটি শুধু মাত্র form element এর সাথে কাজ করে। তবে

সাবমিট এবং সিলেক্ট ইভেন্ট (Submit & Select Event) : জে-কোয়েরী -(পর্ব-২৬) Read More »

ফোকাস এবং চেঞ্জ ইভেন্ট (Focus & Change Event) : জে-কোয়েরী -(পর্ব-২৫)

পূর্বের পর্বে আমরা দেখেছি যে, যখন কোন Element Focus হারায় তখন blur event সংগঠিত হয়। একই ভাবে যখন কোন Element Focus পায় তখন Focus Event সংগঠিত হয় (Fire when an element is on focus or gain focus )। Focus এবং Bluer event কে একটি অপরটির বিপরীত event বলা যেতে পারে। এটি Form element (<input> ,

ফোকাস এবং চেঞ্জ ইভেন্ট (Focus & Change Event) : জে-কোয়েরী -(পর্ব-২৫) Read More »

ব্লুয়ার ইভেন্ট (Blur Event) : জে-কোয়েরী -(পর্ব-২৪)

আমরা যারা বিভিন্ন software এ কাজ করেছি তারা সবাই হয়ত লক্ষ্য করেছি যে tab key press করার সাথে সাথে Focus এক object থেকে অন্য object এ move করে। এক object থেকে Focus যখন অন্য object এ move করে তখন যে event টি সংঘঠিত হয় তাকে blur event বলে। অর্থাৎ যখন কোন element তার focus loss

ব্লুয়ার ইভেন্ট (Blur Event) : জে-কোয়েরী -(পর্ব-২৪) Read More »

জে-কোয়েরী ইভেন্ট সমূহ(jQuery events): জে-কোয়েরী -(পর্ব-২৩)

Event এর বাংলা শাব্দিক অর্থ ঘটনা। programming এ ও এটি একই অর্থে ব্যবহৃত হয়। অপনি যে কাজটি করতে চান, তা কোন ঘটনার সময় করতে চান, সেটি আপনাকে পূর্বে থেকেই ঠিক করতে হবে। ধরুন আপনি কোন button এর উপর mouse নিলে button টির color পরিবর্তন করতে চান, এক্ষেত্রে আপনাকে অবশ্যই hover event এ code লিখতে হবে;

জে-কোয়েরী ইভেন্ট সমূহ(jQuery events): জে-কোয়েরী -(পর্ব-২৩) Read More »