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

ওয়েব ডিজাইন – অডিয়েন্সই শেষ কথা

আজকাল ওয়ার্ল্ড ওয়াইড ওয়েবের ভুবনে নিজের জন্য একটি ঠিকানা খোঁজার জন্য অনেকেই ব্যতিব্যস্ত হয়ে পড়েন। ওয়েব প্রেজেন্স বা নিজের একটি ওয়েব সাইট থাকাটা এখন বিলাসীতার গণ্ডী পেরিয়ে অতি প্রয়োজনীয় একটি ব্যাপারে রূপান্তরিত হয়েছে। এ কারণেই ওয়েব সাইটের নকশা করাটা এখন আর হেলাফেলা করে করলে চলে না। প্রয়োজন হয় সতর্ক পরিকল্পনা এবং অনেক ভাবনা চিন্তার। ওয়েব…

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

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

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

অন্ এবং ওয়ান ইভেন্ট হ্যান্ডলার (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() এ…

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery তে .toggle() নামে একটি animation method আছে যা element এর visibility কে পরপর প্রদর্শন করে। যেখানে কতগুলি animation প্রদর্শন করবে তা নির্ভর করে .toggle() methode এর এক set argument এর উপর। .toggle() methode টি click event এর সাথে bind করা, তাই এর সাথে .click() দেয়ার প্রয়োজন হয়না। যেমন :- Event handler যে ভাবে div…

মাউস্-আউট এবং মাউস্-লিভ ইভেন্ট এর মধ্যে পার্থক্য (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 Mouseover() And Mouseenter() event) : জে-কোয়েরী -(পর্ব-৩২)

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

মাউস্-মূভ ইভেন্ট (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…

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

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

কিভাবে 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 করতে…