Bootstrap 4 Accordion

Below codes are used to implementing Accordion tab using Bootstrap 4.1 version.


<html>
<head>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="accordion" id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
	<a class="collapsed card-link" data-toggle="collapse" href="#collapseOne">
		Tab #1
	</a>
    </div>

    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
		Tab 1 Content
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
	<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
		Tab #2 
	</a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
		Tab 2 Content
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
	<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
		Tab #3
	</a>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#accordion">
      <div class="card-body">
			Tab 3 Content
      </div>
    </div>
  </div>
</div>
</div>
	<!-- Script section -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Continue Reading

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

How to make Iframe and other embedded content behave responsively?

It’s easy to make an iframe’s width dimension to 100% of its container, but sizing it’s height is tricky — especially if the content of the iframe changes height depending on page width within the iframe.


<div class="responsive-container responsive-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

To achieve responsive iframe we can use following CSS codes.

The key idea is to specify the parent container’s position to be relative. This allows to absolutely position the iframe within it, which is needed to make it responsive.


responsive-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
/* 16x9 Aspect Ratio */
.responsive-container-16x9 {
  padding-bottom: 56.25%;
}
/* 4x3 Aspect Ratio */
.responsive-container-4x3 {
  padding-bottom: 75%;
}
.responsive-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

Iframe should now proportionally resize based on the browser size.

Other Techniques:

Use of Pym.js:

Pym.js embeds and resizes an iframe responsively (width and height) within its parent container. It also bypasses the usual cross-domain issues.

Fix using Jquery:


var $iframes = $( "iframe" );
// Find and save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width and height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});
// Resize the iframes when the window is resized
$( window ).resize( function () {
  $iframes.each( function() {
    // Get the parent container's width
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// Resize to fix all iframes on page load.
}).resize();
Continue Reading

How do we use variables and mixins in SASS?

Variables are used to store the properties and we can reuse those properties multiple times throughout the project.

Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. So this approach will reduce the number of lines rapidly.

PFB codes for Sample use of variables


// Color codes
$DarkGrey2: #323232;
$Greyblue: #708090;

// Spacing
$spacingXS: 1rem; //10px
$spacingS: 2rem; //20px

// Typography
$roboto-light: Roboto Light;
$roboto-bold: Roboto Bold;

// Image Path
$imgURL: '../../images/app';

PFB codes for sample use of mixin


// Create mixins for position
@mixin position($position, $top: null, $right: null, $bottom: null, $left: null) {
  position: $position;
  bottom: $bottom;
  left: $left;
  top: $top;
  right: $right;
}

// create mixins for font style
@mixin font-style($fontFamily, $fontSize) {
    font-family: $fontFamily;
    font-size: $fontSize;
}

// integrating mixin into particular class
.wrapper{
   @inlcude position(relative, 10px, 20px);
   @include font-style(Roboto Regular, 16px);
}
Continue Reading

How to apply styling to placeholder text?

Formatting placeholder text using CSS

We should use browser prefix CSS for achieving cross browser compatibility.

CSS


/* placeholder css */
::-webkit-input-placeholder {  
  color: #BBBDBF; /* chrome, safari */
}
::-moz-placeholder { /* Firefox 19+ */
  color: #BBBDBF;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #BBBDBF;
}
:-moz-placeholder { /* Firefox 18- */
  color: #BBBDBF;
}

Demo

See the Pen Apply styling to input placeholder text by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

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

Simple responsive menu using CSS

Simple responsive menu using pure CSS

HTML


<nav class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Projects</a></li>
        <li class="active"><a href="#">Contact Us</a></li>
      </ul>
    </nav>

CSS


.nav {
	margin: 20px 0;
	width: 40%;
	float: right;
	text-align: right;
}
.nav ul {
	margin: 0;
	padding: 0;
}
.nav li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	*display:inline; /* ie7 */
}
.nav li a {
	padding: 3px 12px;
	text-decoration: none;
	color: #333;
	line-height: 100%;
}
.nav a:hover,
.nav .active a:hover {
	color: #999;
}
.nav .active a {
	color: #00ff00;
	border-radius: 5px;
}
@media screen and (max-width: 768px) {
	#hdcontainer {
		width: 90%;
	}
	.nav {
		width: 73%;
		position: relative;
		min-height: 40px;
		margin: 15px 0;
	}
	.nav ul {
		width: 235px;
		padding: 5px 0;
		position: absolute;
		top: 0;
		left: 0;
		border: solid 1px #aaa;
		background: #E2E2E2 url('../images/icon-menu.png') no-repeat 185px 12px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		behavior: url(js/PIE.htc);
		box-shadow: 0 1px 2px #898989;
		-moz-box-shadow: 0 1px 2px #898989;
		-webkit-box-shadow: 0 1px 2px #898989;
		filter: progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=70), progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=140);
		behavior: url(js/PIE.htc);
		z-index: 6000;
	}
	.nav li {
		display: none; /* hide all items */
		margin: 0;
	}
	.nav .active {
		display: block; /* show only current item */
	}
	 .nav a {
		display: block;
		padding: 5px 5px 32px;
		text-align: left;
		color: #EC3002;
	}
	.nav a:hover {
		color: #000000;
	}
	.nav .active a {
		background: none;
		color: #000000;
	}
	/* on nav hover */
	.nav ul:hover {
		background-image: none;
	}
	.nav ul:hover li {
		display: block;
		margin: 0 0 5px;
		color: #000000;
	}
	.nav ul:hover .active {
		background: url('../images/icon-check.png') no-repeat 10px 7px;
	}
}

Download Source code

Responsive Menu

Continue Reading

Load JSON data to Table using Jquery

Load JSON data to table using Jquery

Demo

See the Pen bLjwzy by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Note
For demo purpose I am using external api from www.mocky.io

JSON


//service.json
{
    "Cities": ["LUSAKA", "HARARE"],
    "Countries": ["ZAMBIA", "ZIMBABWE"]
}

Script


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>WCF Client</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <table id="location" border='1'>
        <tr>
            <th>Countries</th>
            <th>Cities</th>
        </tr>
    </table>
    <script>
        var service = 'service.json';

        $(document).ready(function() {

            jQuery.support.cors = true;

            $.ajax({
                type: "GET",
                // url: service + '/service/',
                url: service,
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                success: function(data) {

                    var trHTML = '';

                    $.each(data.Countries, function(i, item) {

                        trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
                    });

                    $('#location').append(trHTML);

                },

                error: function(msg) {

                    alert(msg.responseText);
                }
            });
        })
    </script>
</body>
</html>

Note

If you are working in local environment, please use some local server (XAMPP, WAMP, Apache) to run this code. Because of JSON local access it is not working directly without server.

Continue Reading
1 2 3 6