How to use Position Property in CSS
Posted inCSS

How to use Position Property in CSS

The position property in CSS defines how an element is positioned in the document. Here are the primary values: static: The default position. Elements are placed in the normal document flow. relative: Elements are positioned relative to their normal position. You can use top, right, bottom, and left properties to adjust their positions. absolute: Elements are positioned relative to the nearest positioned ancestor (an element whose position is not static). If there isn't one, it's relative to the initial containing block. fixed: Elements are positioned relative to the browser window and stay in the same spot even when the page is scrolled. sticky: Elements toggle between relative and fixed, depending on the scroll position. Here are some examples showcasing each position property Static Position Lorem Ipsum is simply dummy text of the printing…
How to use jquery ui Calendar
Posted inCalendar Jquery Jquery UI Datepicker

How to use jquery ui Calendar

The jQuery UI Datepicker is a versatile and customizable calendar widget. Here's a basic rundown on how to use it: Steps to Use jQuery UI Datepicker Include jQuery and jQuery UI Libraries: You need to include both jQuery and jQuery UI libraries in your HTML file. You can do this by adding the following CDN links in your <head> section: <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></head> Create an Input Field: Add an input field in your HTML where the datepicker will be attached. <body> <input type="text" id="datepicker"></body> Initialize the Datepicker: Use jQuery to initialize the datepicker on the input field. Add the following script at the end of your HTML or in a separate JavaScript file: <script>…
Featured Video Play Icon
Posted inCSS

How to use Ellipsis in CSS

Ellipsis in CSS is super handy for truncating text that overflows its container. You use the text-overflow property. Let's break it down: Steps to Use Ellipsis Set white-space to nowrap: This prevents the text from wrapping to the next line. Set overflow to hidden: Ensures any overflowing text is clipped. Use text-overflow: ellipsis: This adds the ellipsis (...) to indicate text truncation. Set a fixed width: To ensure the container limits the text. Example This text is really long and…