Show/Hide accordion panels based on select option value.

Show/Hide the accordion tabs based on the user selection of selectbox option.

HTML


<div class="selectbox">  
	<label>Select Fruit:</label>
	<select id="fruit-types">
		<option>--Select Fruit--</option>
		<option value="all">All</option>
		<option value="apple">Apple</option>
		<option value="orange">Orange</option>
		<option value="grapes">Grapes</option>
		<option value="pineapple">Pine apple</option>
		<option value="guava">Guava</option>
	</select>
</div>

Script


	$(document).ready(function() {
	$(".fruit-section .panel-collapse").removeClass("in");
	  $("#fruit-types").change(function() {
		var fruit = $(this).val();
		if (fruit == "all") {
		  $(".panel .panel-collapse").addClass("in");
		  console.log("ALL");
		} else if (fruit == "Apple") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".apple .panel-collapse").addClass("in");
		  console.log("Apple");
		} else if (fruit == "Orange") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".orange .panel-collapse").addClass("in");
		  console.log("Orange");
		} else if (fruit == "Grapes") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".grapes .panel-collapse").addClass("in");
		  console.log("Grapes");
		} else if (fruit == "Pine apple") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".pineapple .panel-collapse").addClass("in");
		  console.log("Pine apple");
		}else if (fruit == "Guava") {
		  $(".panel .panel-collapse").removeClass("in");
		  $(".guava .panel-collapse").addClass("in");
		  console.log("Guava");
		}
	  });
	});

Demo

See the Pen Show/Hide accordion tabs based on selectbox value selection by vinothkumar rajendran (@vinoth102) on CodePen.

Continue Reading

HTTP Status codes

https://httpstatuses.com is an easy to reference database of HTTP Status Codes with their definitions and helpful code references all in one place.

It is useful for Triaging Purpose (API Monitoring & Testing).

Continue Reading

Embed pdf in Iframe is not working in IE and Edge browser.

Direct pdf embed approach is not working fine in IE and Edge browsers due to some browser specific security issues.
So we can use below alternative approach to embed the pdf link in Iframe.


Syntax:
<iframe src="https://docs.google.com/gview?url=your-pdf-link/&embedded=true"></iframe>

Example Code:
<iframe src="https://docs.google.com/gview?url=http://frontendevelopmenttutorial.com/samplePDF.pdf&embedded=true"></iframe>

In the above syntax, just replace the actual PDF link in your-pdf-link position.

This method will work fine.

Continue Reading

What are the best practices of best practices for HTML coding?

Best practices of HTML coding

  • Please use a common HTML5 polyfill or HTML5 Shiv to enable styling and recognition of HTML5 elements in older devices’ browsers
  • Always include a proper doctype to trigger standards mode
  • All markup should be delivered as UTF-8, since it has the best support for internationalization
  • Should follow the proper naming conventions.
  • Close your tags, some tags no need close tag like img and br.
  • Explain which DIV you are closing by proper comments.

IDs vs. Classes

  • An ID is a unique identifier for that particular element; no other element on the page should use the same ID.
  • Classes are not unique. The same class can be used on multiple elements within a page, and a single element can have more than one class, in a space delimited list.Anchors and LinksAll links should point to absolute or relative URLs with user-readable content.

Paragraphs

Avoid using <br>tags to separate paragraphs or lines of text. Use <p> instead with proper opening and closing elements.

Table:

  • Tables should not be used for page layout; only use them when you need to display tabular data.
  • Use <table> rather than other elements when displaying multiple records of data.
  • The <caption> element is the recommended way to describe a table for both sighted and sight-impaired users, though this can also be done less semantically in the normal page text around the table.
  • Use the <thead> and <tbody> elements to denote which row contains column headers so when a user prints the website and the table runs onto another page, browsers can display the <thead> on each page for easier readability.
  • Remember to use the scope attribute on the <th> element to indicate whether the header applies to the row or column.

If you are using “float” attribute for more than one DIV Use “clear: both” at the end of parent div close.


<div id="header">
<div id="sub" class="first left">...</div>
<!-- #sub.first.left -->
</div>
<!-- #header -->
  • Use CSS Reset (reset.css)
  • Never use inline styles – Don’t mix CSS with HTML.
  • Don’t mix JavaScript with HTML.
  • Include external CSS inside the head tag.
  • Consider placing JavaScript at the bottom.
  • Use lowercase in your tags.
  • Use semantic elements to provide additional semantic value to our documents, make use of HTML5 elements such as <header> ,<article> ,<section> and <footer> where appropriate.
  • Keep the syntax organized.

Use conditional comments.

height: 200px; /* normal browsers */
*height: 350px; /* All IEs */
<!–[if lte IE 6]>
<link href=”ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

  • You should only give elements an ID attributes if they are unique.
  • Classes can be applied to multiple elements that share the same style properties.

Label Use

All input fields should be associated with a


<label for="home-address">Home Address</label>
<input id="home-address" type="text" /></label></label>

Use the optimized images.

  • Use Smush tool for image optimization.
  • Save for web” Photoshop command

Cross platform and cross browser check

Test while you writing codes at every stage in various browsers to avoid cross browser issues.
To test on cross platform and cross browsers compatibility, please check the below list of tools.

Reusable Components

Build pages as a library of components, in such a way that blocks of code can be broken up and reused when implemented.

Continue Reading

What are the code standards and best practices for Front End Development?

Coding Standards for Front End Development

Three pillars of front end development:

  • Semantic HyperText Markup Language (HTML) for structure
  • Cascading Style Sheets (CSS) for presentation
  • JavaScript (JS) for behavior and interaction

General Standards

While we are writing code that must reach a desired goal, must be read and understand by others.

Code Consistency.

Usage of the same patterns is critical between team members so as to never cause confusion.

Indentation

  • Please consistently indent, nest, include braces, quotes, and new lines so that code is clear and can be read easily.
  • New code that is added should never deviate from existing formatting conventions or change the indent levels.
  • For all code languages, we recommend the use soft tabs comprised of four spaces per tab. Hitting the Tab key in your text editor should generate four space characters rather than one tab character. This results in our code appearing identical across platforms.
  • If tab stops are favored by a team, simply maintain consistency for a project and it’s deliverable. so developers can make adjustments to their editing environments a single time.

Readability

  • We encourage liberal use of white-space, comments, and descriptive variable names as appropriate for writing easy-to-read code.
  • The ability for another developer to read a code is essential.
  • No need to think about compressed way of code writing while you developing application, we will use automated server side or other build process to optimize files. This includes concatenating files, code minification, gzipping and more.

Areas of critical consistency include:

  • Code formatting
  • Naming conventions
  • File and folder structure
  • Examples or sample code
  • How page components might be broken down or re-used

Points to remember when lookup the UX designs:

  • Templates and types of pages.
  • Which sections of pages (i.e. components) are reused.
  • Type of Frameworks
  • CSS grid systems (LESS, SASS or Custom).
  • Server-Side delivery platforms.

Performance Caveats

In some cases for performance reasons it may be good practice to in-line critical styles in a style block in the document’s head.

This delivers these styles to the browser in the fastest method possible by preventing the need for an additional HTTP request.

CSS Deliverables

Delivered CSS should be concatenated, minified, tested against browser bugs (e.g. MSIE selector count bugs) and extra files should be removed.

File naming conventions should be consistent and language or use-case specific files should be clear and not be easily confused with the global style CSS.

Our CSS should be concerned the below points:

  • Browser Compatibility
  • Media Queries
  • Accessibility and CSS
  • CSS pre-processors usage
  • Internet Explorer or browser-specific bugs
  • Usage of CSS3 transitions, transforms, and more
  • Vendor prefixes
  • Color Management

Best Practices for Front End Development

Click the respective link for the detail view of best practices.

Continue Reading

When scroll down change the header position to be fixed.

When scroll down change the header position properties


 function init() {
    window.addEventListener('scroll', function(e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
        shrinkOn = 100,
        header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller"); // add class name when page scrolls
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

Explanation:
When we scroll down, class smaller will add in header element. So, we can set the position: fixed property to smaller class. Otherwise smaller class will be removed.

Continue Reading

How to do Form Validation using Jquery?

Form validation using Jquery

Include the Jquery library and jquery.validate file.

Include below JS files


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

Script


$(document).ready(function(){
  $(function() {
 $("form[name='register-form']").validate({  
rules: {
         firstname: "required",
		  password: {
			required: true,
			minlength: 6
		  },
         email: {               
             required: true,
             email: true
         },
     },
messages: {
			firstname: "Enter First Name",
			 password: "Enter Passowrd",
			 email: "Enter Valid Email ID"
		},
		 submitHandler: function(form) {
			 form.submit();
		 }
 });

  });
})

Explanation:

Validate method will apply to form. By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.

Output

See the Pen Form validation using Jquery by Vinothkumar (@fedtutorial) on CodePen.0

Continue Reading

How to do Drag and Drop feature using HTML5 API?

Drag and Drop feature implementation

We should use html event attributes like ondragover, ondrop and ondragstart to achieve drag and drop feature.

HTML5:


<div draggable = "false">
<!-- ondragover event: Specifies where the dragged data can be dropped -->
<!-- ondrop event: When the dragged data is dropped, a drop event occurs -->
<div id="div1" 
             style="width: 300px; height: 300px; padding: 10px; border: 1px solid #FF4500;"
             ondragover="allowDrop(event)" 
             ondrop="drop(event)"
             draggable = "false">
</div>
<!--ondragstart = Specify what should happen when the element is dragged -->
<img 
             id="drag1" src="HTML5.jpg" 
             draggable="true" 
             ondragstart="drag(event)" 
    width="204" height="204" />
</div>

Script:


        function drag(event){
         // set the target element
            event.dataTransfer.setData("ControlID", event.target.id); 
        }
        function allowDrop(event){
            //To allow a drop, we must prevent the default handling of the element
            event.preventDefault();
        }
        function drop(event){
            //To allow a drop, we must prevent the default handling of the element
        event.preventDefault();
         // append drag element in to drop area
            var controlId = event.dataTransfer.getData("ControlID");
            event.target.appendChild(document.getElementById(controlId));
        }

Explanation:

  • ondragover event: It specifies when an element is dragged over a drop target.
  • ondrop event: When the dragged data is dropped, a drop event occurs.
  • Ondragstart: It specify what should happen when the element is dragged.
  • event.preventDefault() – Prevent the default behavior of an element.
Continue Reading

How to create Custom select box using CSS?

Custom select box design using CSS

We can develop custom select box design using CSS and Script. Here we will see the CSS based implementation.

HTML


  <div class="select-style">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:


.select-style {
 padding: 0;
 margin: 0;
 border: 1px solid #ccc;
 width: 197px;
 overflow: hidden;
 height: 30px;
 background: url("../images/dropdown.png") no-repeat right center #fff; //Set the image path of dropdown icon design
}
.select-style select {
 padding: 0 3px;
 width: 108% !important;
 border: none;
 box-shadow: none;
 background-color: transparent;
 background-image: none;
}
.select-style select:focus {
 outline: 0;
}

Note: Wrap a Div section with a class name “select-style” on the select field.

Continue Reading

Custom radio button & custom checkbox styling using CSS

Custom radio and custom checkbox design using CSS

We are hiding default form element using CSS. The “for” attribute specifies which form element is bound to the label. So, label will act as an input element. “Id” name of the form element and “for” attribute name should be same.

I have used images for active & inactive mode. Instead of images we can use font-awesome.

HTML:


//Custom radio button
<input id="apple" name="fruits" type="radio" />
<label for="apple">
<img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" /> //Inactive image
<img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" />  //Active image
</label>
//Custom checkbox 
<input id="fruits" name="fruits" type="checkbox" />
<label for="fruits">
<img class="offradio" height="20" src="images/form_box-off.png" width="20" />
<img class="onradio" height="20" src="images/form_box-on.png" width="20" />
</label>

CSS:


input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio{
 display: block;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label .onradio,
input[type="checkbox"] + label .onradio {
display: none;
}
/* Styling the "check" status */
input[type="radio"]:checked + label .onradio,
input[type="checkbox"]:checked + label .onradio {
display: block;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio {
display: none;
}
Continue Reading