Author Archives: Umar Farooque Khan

About Umar Farooque Khan

Umar Farooque Khan is Software developer and professional blogger serving Worldwide on freelancer and ODesk platform to show the capability of his skills. He is the founder of pTutorial.com. The main purpose of this site is sharing and exchanging of Knowledge related to the recent technologies.

Select2 Multi Select Select all when select all option

Leave a reply

Here is a example of select2 with added styling and if user choose option all then each and every option should be selected.

Select2 Multi-Selection select all when select all

HTML for select2




<div id="clr_cont" class="contains">
	<small>Select your favorite colors</small>
	<select class="fav_clr form-control" name="states[]" multiple="multiple">
<option value="all">all</option>
<option>orange</option>
<option>yellow</option>
<option>green</option>
<option>blue</option>
<option>pink</option>
<option>purple</option>
	</select>
</div>

JavaScript For Select2

$(document).ready(function() {
    $('.fav_clr').select2({
		placeholder: 'colors',
		width: '100%',
		border: '1px solid #e4e5e7',
    });
});

$('.fav_clr').on("select2:select", function (e) { 
           var data = e.params.data.text;
           if(data=='all'){
            $(".fav_clr > option").prop("selected","selected");
            $(".fav_clr").trigger("change");
           }
      });

CSS For Select2 styling

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border: 1px solid #333 !important;
} 
.select2 .select2-container .select2-container--default .select2-container--focus {
	border: 1px solid #333 !important;
}
.select2-container--default .select2-selection--multiple {
	border: 1px solid #333 !important;
}
.select2-search__field {
	background-color: white !important;
}
.select2-dropdown .select2-dropdown--below {
	border: 1px solid #333 !important;
}
.select2-results {
	background-color: #444;
	height: 100px;
	color: #222;
}
.select2-results__options {
	height: 100px;
}
body {
	background-color: #222;
	padding: 20px;
}
small {
	color: white;
}
.contains {
	background-color: #333;
	width: 500px;
	display: inline-block;
	padding: 20px;
	border-radius: 5px;
}

Check demo here : Select2 Multi Select all option example

How to send push notification to web browser

What is push notification

Web push notifications are clickable rich content messages sent to your device by a website or a web app. Web Push notifications can delivered to your device, mobile or desktop, even when the user is not on your website.

What is push notification

These notifications can only be sent to users who have opted-in to receive these notifications. Web push notifications or browser notifications are supported by Chrome, Firefox, Edge and Safari.

Why Push Notifications

Web Push Notifications allow users to opt-in for timely updates from web apps that aim to re-engage their user base with content that might be interesting, important and well-timed for the users.

Push API

The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content.

Example to get user permission and send push notification


&lt;script&gt;// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Welcome to ptutorial', {
      icon: 'http://www.ptutorial.com/icon/umar.ico',
      body: "New post created",
    });

    notification.onclick = function () {
      window.open("http://blogs.ptutorial.com");      
    };

  }

}&lt;/script&gt;

Conclusion

You can use the above script to send push notification to web browser. You can also use this script with firefase or socket.io to send real time notification.

How to detect browser tab is active JavaScript

Simple script to deal with most of the modern browser like Firefox, Google chrome etc.


var vis = (function(){
var stateKey, eventKey, keys = {
hidden: "visibilitychange",
webkitHidden: "webkitvisibilitychange",
mozHidden: "mozvisibilitychange",
msHidden: "msvisibilitychange"
};
for (stateKey in keys) {
if (stateKey in document) {
eventKey = keys[stateKey];
break;
}
}
return function(c) {
if (c) document.addEventListener(eventKey, c);
return !document[stateKey];
}
})();

how to call the function

</pre>
vis(function(){
 document.title = vis() ? 'Active' : 'Not Active';
 });
<pre>

You can check the title to verify that given script is working or not. The title of the page changes accordingly.

Tab browsing

Conclusion

You can use this to to stop video when user looses the focus. You can also use this script to calculate the number second that user spend in your website.