Skip to main content

Posts

Showing posts with the label Web Design

CSS margin property - Clarification margin: 0 0 10px;

In the world of web design, CSS margins are the unsung heroes that dictate the spacing outside an element's border. They provide the crucial white space that prevents your content from looking cramped and unreadable. While seemingly straightforward, the margin shorthand property can sometimes cause confusion, especially when encountering values like margin: 0 0 10px;. Let's break down this specific declaration, explore its practical application with an example, and uncover the numerous advantages of precise margin control. The Margin Shorthand: A Quick Recap Before diving into our specific case, let's remember how the CSS margin shorthand property works. When you provide multiple values, they are assigned in a clockwise fashion, starting from the top:     margin: [top] [right] [bottom] [left]; If fewer than four values are provided, CSS applies specific rules:     Four values: margin: top right bottom left;     Three values: margin: top right/left bottom; (...
Post a Comment
Read more

Split a string and get last match in jQuery and Javascript

Method 1: str = "~test content ~thanks ok ~eabhyas.blogspot.com";    strFine =str.substring(str.lastIndexOf('~')); console.log(strFine ); Output: ~eabhyas.blogspot.com Method 2: str = "~test content ~thanks ok ~eabhyas.blogspot.com";    console.log(str.split('~').pop()); OR str = "~test content ~thanks ok ~eabhyas.blogspot.com";  var parts = str.split("~"); var what_you_want = parts.pop(); Output: eabhyas.blogspot.com Method 3: str = "~test content ~thanks ok ~eabhyas.blogspot.com";    arr = str.split('~'); strFile = arr[arr.length-1]; console.log(strFile ); Output: eabhyas.blogspot.com
Post a Comment
Read more

Beautiful Checkbox CSS - Custom Checkboxes using CSS

Today we are going to share awesome lightweight CSS plugin to beautify the default checkboxes. The beautiful-checkbox.css library allows you to beautify and change styles, sizes, and positions of the native checkbox inputs with pure CSS.
Post a Comment
Read more

Country dropdown list - HTML select/dropdown snippet

Country dropdown list with country name as value: <!-- Country dropdown list by ahandy --!> <select>     <option value="Afghanistan">Afghanistan</option>     <option value="Albania">Albania</option>     <option value="Algeria">Algeria</option>     <option value="American Samoa">American Samoa</option>     <option value="Andorra">Andorra</option>     <option value="Angola">Angola</option>     <option value="Anguilla">Anguilla</option>     <option value="Antartica">Antarctica</option>     <option value="Antigua and Barbuda">Antigua and Barbuda</option>     <option value="Argentina">Argentina</option>     <option value="Armenia">Armenia</option>     <option value="Ar...
Post a Comment
Read more

Highlight the navigation menu for the current page

JavaScript: <script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript">     $(function() {         // this will get the full URL at the address bar         var url = window.location.href;         // passes on every "a" tag         $(".topmenu a").each(function() {             // checks if its the same on the address bar             if (url == (this.href)) {                 $(this).closest("li").addClass("active");                 //for making parent of submenu active         ...
Post a Comment
Read more

HTML5 Features: Master HTML5 Semantic Header and Footer for Better Web Design

The topic " HTML5 Features - The Semantic Header and Footer " highlights the importance of the <header> and <footer> tags introduced in HTML5, which enhance the structure and semantics of web pages. Explanation The <header> and <footer> tags are part of HTML5's semantic elements, designed to clearly define the structure of a webpage. They make the code more readable for developers and improve accessibility for assistive technologies like screen readers. <header>: Represents the introductory content or navigation section of a webpage or a section of it. It's typically used for elements like titles, logos, or navigation menus. <footer>: Represents the footer of a webpage or a section. It's commonly used for copyright information, contact details, or additional navigation links. Example Here’s how you can use the <header> and <footer> <!DOCTYPE html> <html lang="en"> <head> <meta c...
Post a Comment
Read more

HTML5 Features: Boost Web Performance with HTML5 Local Storage Features

The topic " HTML5 Features - Local Storage " focuses on a powerful feature introduced in HTML5 that allows developers to store data locally in the user's browser. This data persists even when the browser is closed and reopened, offering a more secure and efficient alternative to cookies. Explanation The localStorage object provides a way to store key-value pairs in a browser without expiration. It's ideal for saving user preferences, session details, or application data that doesn't require constant server communication. Example Here’s a simple implementation of localStorage : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Local Storage Example</title> <script> function saveData() { const inputData = document.getElementById('data').value; ...
Post a Comment
Read more

HTML5 Features: Boost Form UX with HTML5 Placeholder Attribute

The topic " HTML5 Features - Placeholders " focuses on the placeholder attribute, an intuitive feature introduced in HTML5 to enhance form usability. This attribute allows you to display temporary, descriptive text within form input fields, guiding users on what to enter before they start typing. Explanation The placeholder attribute is perfect for providing hints or examples inside input fields. It's widely used for fields like name, email, search queries, or passwords. Example Here's how to use the placeholder attribute in a simple HTML form: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Placeholder Example</title> </head> <body>     <h1>Contact Us</h1>     <form action="/submit" method="post">       ...
Post a Comment
Read more

HTML5 Features: Boost Your Forms with HTML5 Email Input Features

The topic " HTML5 Features - Email Inputs " highlights a useful addition in HTML5 that simplifies collecting and validating email addresses in forms. The email input type ensures that the user enters a properly formatted email address, improving user experience and reducing errors. Explanation HTML5 introduced the <input type="email"> element specifically for email address entry. This element provides built-in validation to check if the input is in a standard email format (e.g., username@example.com ). Example Here’s a basic implementation of an email input field: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Email Input Example</title> </head> <body> <h1>Subscribe to Our Newsletter</h1> <form action="/subscribe" method="pos...
Post a Comment
Read more

HTML5 Features: How to Make Your Content Editable with Ease

The topic "HTML5 Features - Make Your Content Editable" revolves around one of the unique features introduced in HTML5: the contenteditable attribute. This attribute allows you to make any HTML element directly editable by the user without needing complex JavaScript or backend processing. Explanation The contenteditable attribute is a global attribute, meaning it can be added to most HTML elements, like <div>, <p>, <span>, etc. When this attribute is set to "true", the content inside that element becomes editable directly in the browser. This feature is particularly useful for creating user-friendly web applications like: Online text editors (similar to Google Docs)   In-place editing for blog posts or articles   Quick note-taking sections on websites Example Here's a simple implementation of the contenteditable attribute: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta...
Post a Comment
Read more

HTML5 Features: Using Inline and Block Quotes Effectively for SEO & Accessibility

HTML5 Features: To Quote or Not to Quote HTML5 streamlines the use of quotes in web development by introducing semantic elements like <q> for inline quotes and <blockquote> for block-level quotes. Here’s how they enhance your content: Inline Quotes with <q> The <q> tag is perfect for short quotes within a sentence. It automatically adds quotation marks for better readability. Example: <p>As Albert Einstein said, <q>Imagination is more important than knowledge.</q></p> Block-Level Quotes with <blockquote> For longer quotes or standalone excerpts, the <blockquote> element is ideal. It also supports the cite attribute to link to the source of the quote. Example: <blockquote cite="https://example.com/einstein"> Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world. </blockquote> Why Choose These Elements? Semantic Precision: Clearly define quotes for both us...
Post a Comment
Read more

HTML5 Features: Simplify Your Code with Type-Free Scripts and Links

HTML5 Features: No More Types for Scripts and Links HTML5 has simplified the process of including scripts and stylesheets by eliminating the need to specify certain types in <script> and <link> tags. Here's a closer look at this change: The Change in HTML5 1. Scripts: In previous HTML versions, specifying the type="text/javascript" attribute in <script> tags was mandatory. For example: <script type="text/javascript" src="script.js"></script> In HTML5, the type attribute is optional, as text/javascript is now the default. You can simply write: <script src="script.js"></script> This shortens the code and reduces redundancy. 2. Links: Similarly, for <link> elements used to include stylesheets, the type="text/css" attribute is no longer required. For instance: <link rel="stylesheet" type="text/css" href="styles.css"> In HTML5, you can omit the ty...
1 comment
Read more

HTML5 Features: Redefining Fine Print and Accessibility with <small>

HTML5 Features: The <small> Element Redefined In HTML5, the <small> element has been redefined to improve its semantic meaning and enhance web accessibility. While it was previously used simply for reducing font size, HTML5 gives it a more specific purpose. Here's how it works: The <small> Element in HTML5 The <small> tag now denotes fine print or supplementary information, such as disclaimers, legal notices, or copyright text. This subtle but important shift ensures that content using <small> is semantically accurate and meaningful for both users and search engines. Example Syntax: <p>The information provided is for general purposes only.</p> <small>Disclaimer: Results may vary based on individual circumstances.</small> Key Changes and Benefits Semantic Clarity: The <small> element isn't just about shrinking text anymore—it indicates less prominent or secondary information. Improved Accessibility: Screen readers and ...
Post a Comment
Read more

HTML5 Features: The Figure Element for Media and Captions

HTML5 Features: The Figure Element Explained HTML5 introduced the <figure> element to enhance the semantic structure of web pages. This element is particularly useful for grouping media content like images, charts, illustrations, or code snippets along with their captions. Here's a closer look at its functionality: Consider the following mark-up for an image: <img src="example-image.jpg" alt="Example Description"> <p>An example image with descriptive caption. </p>   There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts. <figure> <img src="example-image.jpg" alt="Example Description"> <figcaption> <p...
Post a Comment
Read more

HTML5 Features: Simplified Doctype for Faster, Modern Web Development

HTML5 Features: New Doctype Simplified HTML5 introduced a game-changing improvement with its simplified Doctype declaration. Let's explore what makes this feature a cornerstone of modern web development: The Evolution of Doctype In earlier versions of HTML, declaring the Doctype was a cumbersome process involving a lengthy string of code that referenced a DTD (Document Type Definition). For example, an XHTML 1.0 Doctype looked like this: html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This complexity often left developers frustrated, especially beginners. HTML5 Simplified Doctype HTML5 revolutionized this by offering a minimalist approach: html: <!DOCTYPE html> Ease of Use: It's short, intuitive, and beginner-friendly. No DTD Required: Unlike older versions, HTML5's Doctype doesn't rely on external document definitions, making it universally compatible. Improved Rende...
Post a Comment
Read more