In this post we will going to explain the CSS margin property  margin: 0 0 10px; The margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. CSS margin short hand code can be a bit confusing at first. margin: 0 0 10px;  Top margin = 0 Right/Left margin = 0 Bottom margin = 10px or pixels margin: 30px;   //All four margins are 30px margin: 10px 40px;  //Top & Bottom margin = 10px, left & right = 40 margin: 10px 20px 30px; // top=10, left/right=20, bottom=30 margin: 10px 20px 10px 20px;  // Top=10, Right=20, Bottom=10, Left=10  

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

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.

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...

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         ...

10. The Semantic Header and Footer Gone are the days of: view plain copy to clipboard print ? < div   id = "header" >        ...   </ div >       < div   id = "footer" >        ...   </ div >    Divs, by nature, have no semantic structure — even after an id is applied. Now, with HTML5, we have access to the <header> and <footer> elements. The mark-up above can now be replaced with: view plain copy to clipboard print ? < header >        ...   </ header >       < footer >        ...   </ footer >    It’s fully appropriate to have multiple header s and footer s in your projects. Try not to confuse these elements with the “header” and “footer” of your website. They simp...

9. Local Storage Thanks to local storage (not officially HTML5, but grouped in for convenience’s sake), we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed. “localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.” - QuirksBlog While obviously not supported across all browsers, we can expect this method to work, most notably, in Internet Explorer 8, Safari 4, and Firefox 3.5. Note that, to compensate for older browsers that won’t recognize local storage, you should first test to determine whether window.localStorage exists. via http://www.findmebyip.com/litmus/

8. Placeholders Before, we had to utilize a bit of JavaScript to create placeholders for textboxes. Sure, you can initially set the value attribute how you see fit, but, as soon as the user deletes that text and clicks away, the input will be left blank again. The placeholder attribute remedies this. < input   name = "email"   type = "email"   placeholder = "doug@givethesepeopleair.com"   />    Again, support is shady at best across browsers, however, this will continue to improve with every new release. Besides, if the browser, like Firefox and Opera, don’t currently support the placeholder attribute, no harm done.

7. Email Inputs If we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. That’s right; built-in form validation will soon be here! We can’t 100% rely on this just yet, for obvious reasons. In older browsers that do not understand this “email” type, they’ll simply fall back to a regular textbox. <!DOCTYPE html >       < html   lang = "en" >    < head >         < meta   charset = "utf-8" >         < title > untitled </ title >    </ head >    < body >         < form   action = ""   method = "get" >             < label   for = "email" > Email: </ label >        ...

6. Make your Content Editable The new browsers have a nifty new attribute that can be applied to elements, called contenteditable . As the name implies, this allows the user to edit any of the text contained within the element, including its children. There are a variety of uses for something like this, including an app as simple as a to-do list, which also takes advantage of local storage. <!DOCTYPE html >       < html   lang = "en" >    < head >         < meta   charset = "utf-8" >         < title > untitled </ title >    </ head >    < body >         < h2 >  To-Do List  </ h2 >          < ul   contenteditable = "true" >             < li...

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...

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...

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 ...

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...

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...