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

Load JSON data to Table using Javascript

  
    <!-- Loading JSON data here -->  
    <div id="showData"></div>
  

  <script>
    //function CreateTableFromJSON() {
    var myBooks = [{
        "Book ID": "101",
        "Book Name": "Fire of Wings",
        "Category": "Biography",
        "Price": "100"
    }, {
        "Book ID": "102",
        "Book Name": "Horrypotter",
        "Category": "Thriller",
        "Price": "1000"
    }, {
        "Book ID": "103",
        "Book Name": "Revolution 2020",
        "Category": "Romance",
        "Price": "150"
    }]

    // EXTRACT VALUE FOR HTML HEADER. 
    // ('Book ID', 'Book Name', 'Category' and 'Price')
    var col = [];
    for (var i = 0; i < myBooks.length; i++) {
        for (var key in myBooks[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");
    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1); // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th"); // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myBooks.length; i++) {
        tr = table.insertRow(-1);
        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    //}
  </script>

Demo

See the Pen Load JSON data to table using Javascript by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

Swiper Jquery Plugin

It is a modern mobile touch slider.

CSS:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />

JS:


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js "></script>

It has lot of components.

  • Swipe slider navigation
  • Swipe pagination
  • Swipe pagination with dynamic bullets
  • Progress pagination
  • Fraction pagination
  • Custom pagination
  • Page Scrollbar
  • Vertical page slider
  • Space between slides
  • Multiple slides per view
  • Scroll container
  • Multiple row slides layout
  • Nested swipers
  • Loop mode carousel
  • Loop mode with multiple slides per group
  • 3D cube effect
  • 3D coverflow effect
  • 3D Flip effect
  • Mousewheel control
  • Autoplay carousel
  • Dynamic slides (append/prepend slide pagination)
  • Thumbs gallery with two-way swipe
  • Parallax (Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.)
  • Responsive breakpoints slider
  • Auto height slider
  • Zoom slider
  • Slideable navigation drawer

Demo: http://idangero.us/swiper/demos/

Continue Reading
1 2 3 6