Technical Notes

Posts

JQGrid Custom Validation - How to Check If Email ID Already Exists in jqGrid

How to Check If Email ID Already Exists in jqGrid Validating whether an email ID already exists is a common requirement in web development. In this guide, we'll show you how to implement this validation in a jqGrid using a custom function. Step 1: Define the Grid Column First, define the column for the email ID in your jqGrid. Add the custom validation rule and specify the custom function: colModel: [ { name: 'emailId', index: 'emailId', width: 200, editable: true, sorttype: 'int', editrules: { email: true, required: true, custom: true, custom_func: checkvalid } } ] Step 2: Implement the Custom Validation Function Next, implement the checkvalid function to check if the email ID already ex...

Create a Dynamic Image Carousel with jQuery and jCarousel

Create a Dynamic Image Carousel with jQuery and jCarousel An image carousel is a great way to showcase multiple images in a small space. In this guide, we'll walk you through creating a dynamic image carousel using jQuery and jCarousel. Step 1: Set Up Your HTML First, create a new HTML file and set up the basic structure: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Carousel</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src=...

Creating Tabs with jQuery: A Step-by-Step Guide

How to Create Interactive Tabs with jQuery Tabs are a fantastic way to organize content on your website, making it more user-friendly and engaging. In this guide, we’ll walk you through creating tabs using jQuery, with clear steps and explanations. Step 1: Set Up Your HTML Structure Create a new HTML file and use the following code to set up the basic structure for your tabs: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tabs</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script/jquery.tabs.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#div-1').tabs(); }); <...

jQuery Drop-Down Menu Example

jQuery Drop-Down Menu Example Have you ever created the drop-down menu using jQuery? No, let's create a simple drop-down menu using jQuery: Step 1: Create the HTML File Create a new file named suckerfish.html and add the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn how to create a simple drop-down menu using jQuery. This guide includes a concise code example and clear explanations."> <meta name="keywords" content="jQuery, drop-down menu, JavaScript, web development"> <title>jQuery Drop-Down Menu Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js...

How to Create a Toggle Effect for a Div with jQuery

jQuery Toggle Effect Example This guide demonstrates how to use jQuery to create a simple toggle effect. The example includes a button to show or hide a div and a link inside the div to close it. Code Example Here’s a straightforward example of how to use jQuery for toggling a div: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Learn how to create a simple toggle effect with jQuery. This guide includes a concise code example and clear explanations."> <meta name="keywords" content="jQuery, toggle, JavaScript, web development"> <title>jQuery Toggle Effect Example</title> <script src="https://co...

jQuery Sliding Effects: slideDown, slideToggle, and slideUp

jQuery Sliding Effects: slideDown, slideToggle, and slideUp jQuery provides several methods for creating sliding effects on your web elements. These methods include .slideDown() , .slideToggle() , and .slideUp() . Each of these methods allows you to animate elements with a sliding effect, enhancing the user experience on your website. .slideDown() The .slideDown() method displays the matched elements with a sliding effect. It is used to reveal hidden content with a smooth animation. Example: $('#clickme').click(function() { $('#imageNew').slideDown('slow', function() { // Animation complete. }); }); .slideToggle() The .slideToggle() method is used to either display or hide the matched element with a sliding effect. It toggles the visibility of the element, showing it if it is...

How to Add Horizontal Scrollbar and Checkboxes in jqGrid

Adding Horizontal Scrollbar and Checkboxes in jqGrid jqGrid is a powerful jQuery plugin for creating interactive tables. This guide will show you how to add a horizontal scrollbar and enable checkboxes for row selection in jqGrid. Adding a Horizontal Scrollbar To enable horizontal scrolling in jqGrid, you need to: Set a Fixed Width: Define a fixed width for the grid container. Disable Automatic Resizing: Use shrinkToFit: false to prevent automatic column resizing. Enabling Checkboxes for Multi-Selection To add checkboxes for row selection, follow these steps: Include a Checkbox Column: Use formatter: 'checkbox' in the column model. Enable Multi-Select: Set multiselect: true to allow multiple row selections. ...