Author: admin

Something Like that:
max height all div

For that you need to create first html code.

HTML

<ul class="download_c">
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500 Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</li>
</ul>

CSS

* {
  box-sizing: border-box;
}
.download_c {
  list-style: none;
  padding: 0;
  width: 100%;
  float: left;
}
.download_c li {
  float: left;
  background: #ccc;
  padding: 10px;
  border: 1px solid #fff;
  width: 25%;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”BdPvzN” default_tab=”html,result” user=”pradeepanvi”]See the Pen normal ul list with bg by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Now add jQuery code

Use jQuery Library.
After that add this JQuery code.

JS

if(window.innerWidth > 767){	
var h3height = 0;
	$('.download_c li').each(function() {
        if(h3height < $(this).outerHeight()){
			h3height = $(this).outerHeight();
		};
    });
	$('.download_c li').height(h3height);
}

[codepen_embed height="265" theme_id="0" slug_hash="yoqQmV" default_tab="html,result" user="pradeepanvi"]See the Pen set max height all div jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

We have other jQuery code as well.

Use jQuery Library.
After that add this JQuery code.

JS

equalheight=function(t){var i,e=0,h=0,r=new Array;jQuery(t).each(function(){if(i=jQuery(this),jQuery(i).height("auto"),topPostion=i.position().top,h!=topPostion){for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e);r.length=0,h=topPostion,e=i.height(),r.push(i)}else r.push(i),e=e<i.height()?i.height():e;for(currentDiv=0;currentDiv<r.length;currentDiv++)r[currentDiv].height(e)})};

equalheight('.download_c li');

[codepen_embed height="265" theme_id="0" slug_hash="gxjyZr" default_tab="html,result" user="pradeepanvi"]See the Pen set max height all div jQuery 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Something Like that:
attr

For that you need to create first html code.

HTML

<ul class="gallery_menu">
  <li data-filter="Home">Home</li>
  <li data-filter="About">About</li>
  <li data-filter="Cont1">Cont1</li>
  <li data-filter="Cont2">Cont2</li>
</ul>
<div class="portfolio-filter">
  <div data-filter="Home">Home</div>
  <div data-filter="About">About</div>
  <div data-filter="Cont1">Cont1</div>
  <div data-filter="Cont2">Cont2</div>
</div>

CSS

.gallery_menu {
  padding: 0;
}
.gallery_menu li {
  display: inline-block;
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px 15px;
  cursor: pointer;
}

.portfolio-filter div {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #f5f5f5;
  display: inline-block;
}
.portfolio-filter div.active {
  background: #ccc;
}

Use jQuery Library.
After that add this JQuery code.

JS

$('.gallery_menu li').click(function(){
	var att_val =  $(this).attr('data-filter');
	 $('.portfolio-filter div').each(function(){
		if(att_val == $(this).attr('data-filter')){
      $('.portfolio-filter div').removeClass('active');
			$(this).addClass('active');
		}
	})
		return false;
	});

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rzrMJr” default_tab=”css,result” user=”pradeepanvi”]See the Pen match attr click jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Something Like that:
insertAfter

First we will see normal html code.
For that you need to create first html code.

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dzjygg” default_tab=”html,result” user=”pradeepanvi”]See the Pen normal ul list by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

1
2
3
4
5

Now with a JS code that will be do 1 after 5.
For that you need to create first html code.

HTML

<ul>
  <li class="last">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Use jQuery Library.

After that add this JQuery code.

JS

$('.last').insertAfter('ul li:last-child');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rzrNQz” default_tab=”html,result” user=”pradeepanvi”]See the Pen last div in jquery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

2
3
4
5
1

Something Like that:
strict mode

Without strict mode
For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var person;
persom = {};
document.getElementById('demo').innerHTML = (persom);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VzBwpx” default_tab=”result” user=”pradeepanvi”]See the Pen without strict mode in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Object]

With strict mode
For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

"use strict"; // for strict mode
var person;
persom = {};
document.getElementById('demo').innerHTML = (persom);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OjwJpq” default_tab=”result” user=”pradeepanvi”]See the Pen strict mode in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

There you can see anything because, because you can see persom is not defined error is showing.

Something Like that:
typeof

For that you need to create first html code.

HTML

<p>Type of a var = <span id="demo1"></span></p>
<p>Type of b var = <span id="demo2"></span></p>
<p>Type of c var = <span id="demo3"></span></p>
<p>Type of d var = <span id="demo4"></span></p>
<p>Type of d var = <span id="demo45"></span></p>
<p>Type of e var = <span id="demo5"></span></p>
<p>Instance of e var = <span id="demo6"></span></p>
<p>Type of z var = <span id="demo7"></span></p>
<p>Type of undefined = <span id="demo8"></span></p>
<p>Type of null = <span id="demo9"></span></p>

After that add this JS code.

JS

var a = 3;
document.getElementById('demo1').innerHTML = (typeof a);

var b = "Hello";
document.getElementById('demo2').innerHTML = (typeof b);

var c = {};
document.getElementById('demo3').innerHTML = (typeof c);

var d = [];
document.getElementById('demo4').innerHTML = (typeof d); // Wired!
document.getElementById('demo45').innerHTML = (Object.prototype.toString.call(d)); // better!

function Person(name){
    this.name = name;
}

var e = new Person('Jane');
document.getElementById('demo5').innerHTML = (typeof e);
document.getElementById('demo6').innerHTML = (e instanceof Person);

var z = function(){};
document.getElementById('demo7').innerHTML = (typeof z);

document.getElementById('demo8').innerHTML = (typeof undefined); // make sense
document.getElementById('demo9').innerHTML = (typeof null); // a bug since, like, forever...

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”JyZWGx” default_tab=”result” user=”pradeepanvi”]See the Pen how to check typeof var in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

Type of a var = number
Type of b var = string
Type of c var = object
Type of d var = object
Type of d var = [object Array]
Type of e var = object
Instance of e var = true
Type of z var = function
Type of undefined = undefined
Type of null = object

Something Like that:
Odds and Ends

For that you need to create first html code.

HTML

<p id="demo1"></p>
<p id="demo2"></p>

After that add this JS code.

JS

var people = [
    {
        //the 'john' object
        firstname: 'john',
        lastname: 'Doe',
        address: [
            '111 Main St.',
            '222 Third St.'
        ]
    },
    {
        //the 'jane' object
        firstname: 'jane',
        lastname: 'Doe',
        address: [
            '333 Main St.',
            '444 Main St.'
        ],
        greet: function(){
            return 'Hello!';
        }
    }
]

document.getElementById('demo1').innerHTML = people;
document.getElementById('demo2').innerHTML = people[1].greet();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”GvGrdb” default_tab=”result” user=”pradeepanvi”]See the Pen Odds and Ends in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Object],[object Object]
Hello!

Something Like that:
Object.create and Pure Prototypal Inheritance

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var person = {
    firstname: 'Default',
    lastname: 'Default',
    greet: function(){
        return 'Hi' + this.firstname;
    }
}

var john = Object.create(person);
john.firstname = 'John';
john.lastname = 'Doe';
document.getElementById('demo').innerHTML = john;

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EvRZWw” default_tab=”result” user=”pradeepanvi”]See the Pen Object.create and Pure Prototypal Inheritance in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Object]

Something Like that:
Built-in Function Constructors

JS

Array.prototype.myCustomFeature = "Cool!";
var arr = ['John', 'Jane', 'Jim'];

for(var prop in arr){
    document.write(prop + ': ' + arr[prop] + '<br>');
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”prKRjj” default_tab=”result” user=”pradeepanvi”]See the Pen Arrays and for..in by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

0: John
1: Jane
2: Jim
myCustomFeature: Cool!

Something Like that:
Built-in Function Constructors

For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var a = new Number(3);
a.toFixed(2);

String.prototype.isLengthGreaterThan = function(limit){
    return this.length > limit;
}

document.getElementById('demo').innerHTML = "John".isLengthGreaterThan(3);

Number.prototype.isPositive = function(){
    return this > 0;
}
var a = new Number(3);
a.isPositive();

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”PKabje” default_tab=”result” user=”pradeepanvi”]See the Pen Built-in Function Constructors in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

true

Now we will check with double equal sign.
For that you need to create first html code.

HTML

<p id="demo"></p>

After that add this JS code.

JS

var a = 3;
var b = new Number(3);
document.getElementById('demo').innerHTML = (a==b);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”Vzdmgy” default_tab=”result” user=”pradeepanvi”]See the Pen Built-in Function Constructors in javascript 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

true

Now with triple equal

JS

var a = 3;
var b = new Number(3);
document.getElementById('demo').innerHTML = (a===b);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OjEbqr” default_tab=”result” user=”pradeepanvi”]See the Pen Built-in Function Constructors in javascript 03 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

false

Strange? For that please check double equal and triple equal page.

Something Like that:
'new' and functions

JS

function Person(firstname, lastname){
    document.write(this + '<br>');
    this.firstname = firstname;
    this.lastname = lastname;
    document.write('This function is invoked.' + '<br>');
}

Person.prototype.getFullName = function(){
    return this.firstname + ' ' + this.lastname;
}

var john = Person('Johan','de');
document.write(john + '<br>');

var jane = Person('Jane','de');
document.write(jane + '<br>');

Person.prototype.getFormalFullName = function(){
    return this.lastname + ', ' + this.firstname;
}

document.write(john.getFormalFullName() + '<br>');

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eEMabg” default_tab=”result” user=”pradeepanvi”]See the Pen ‘new’ and functions in javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Now you can see

[object Window]
This function is invoked.
undefined
[object Window]
This function is invoked.
undefined