Grouping of select box options through javascript

Your select box 

<select>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
<option value="ddd">ddd</option>
<option value="eee">eee</option>
<option value="fff">fff</option>
</select>
<script type="text/javascript">
$(function () {
    var $cont = $('select');
   
    $('select option').each(function () {
        if ($(this).text().indexOf('aaa') === 0 || $(this).text().indexOf('ddd') === 0) {
            $('<optGroup/>').attr('label', $(this).text()).appendTo($cont);
            $(this).remove();
        } else {
            $cont.find('optGroup').last().append($(this));
            $(this).text($(this).text());
        }
    });
    });

</script>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

LinkedIn Login through Javascript

Requirement- Client Id

// Initialize linkedin API
<script type="text/javascript" src="http://platform.linkedin.com/in.js">
 api_key: CLIENT ID
 authorize: true
 scope: r_basicprofile r_emailaddress
 onLoad: onLinkedInLoad
</script>
<script type="text/javascript">
  // After Authentication of Account
 function onLinkedInLoad() {
 IN.Event.on(IN, "auth", getProfileData);
 }

 //After successfully Login 
 function onSuccess(data) {
 console.log(data);
  
 }

 // Error in API call
 function onError(error) {
 console.log(error);
 }

 // Get the needed Data
 function getProfileData() {
 IN.API.Raw("/people/~:(id,email-address,first-name,last-name,formatted-name)").result(onSuccess).error(onError);
 }
// destroy the session of linkedin
function closeSession(){
 IN.User.logout();
 return true;
}
</script>
<script type="in/Login"></script>

For custom Button

<script type="text/javascript">
//Invoke login window
function liAuth(){
 IN.User.authorize(function(){
 callback();
 });
}
</script>
<input type="button" onclick="liAuth()" value="Login"/>
Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

How to disable cut copy paste on webpage using jQuery

Here is the jQuery code to prevent users to cut copy and paste from our website.

1.  disable cut copy and paste on a specific element like a textbox

Step 1 . First we create a div and assign a unique id to this div .

<div id="targetElement">
this is our div content .
</div>

Step 2  We are using jQuery so we need to call jQuery library before our jquery code. in this tutorial we are using google cdn jquery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

 

Step 3. Now paste this code below your jquery library and this jquery code will prevent cut copy and paste from your specific element.

<script type="text/javascript">
$(document).ready(function(){
$('#targetElement').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>

here is the full source code

<div id="textField1">
this is our demo text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#textField1').bind("cut copy paste",function(e) {
e.preventDefault();
});
});
</script>

2. Disable cut copy paste on webpage
We can disable cut copy and paste from our complete webpage by using this jQuery code.

$(document).ready(function () {
//Disable cut copy paste
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
});

3. Disable right click on webpage to prevent cut copy and paste.
We can also disable right click on our webpage to prevent cut copy and paste from our webpage.to disable right click on webpage use this jQuery code.

//Disable mouse right click
$("body").on("contextmenu",function(e){
return false;
});

4. Disable cut copy paste using html
Yes, We can also use html and modify body tag to prevent cut copy and paste.

<body oncopy="return false" oncut="return false" onpaste="return false">

To disable mouse right click with html use modify you body tag like this.

<body onContextMenu="return false">

Thank You.

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

How to add the page loader in angularJS??

To add the page loader , we need to determine the http request sent by us has been responded or not.

For this simple query we need to evaluate just the value of following expression.

$http.pendingRequests.length.

Following directive can be used anywhere to install loader the page on loading:-

Example:-

angular.module('myApp.loading',[])

   .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

In View Page :-

Where spinner is the class you want to add as animation or loading image.

More about
Http Request

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone
 

Full screen div at any screen and resolution

Add this in your javascript file and call this file after jquery file

function fullsize() 
{
	var new_height = window.innerHeight; // get new height of window
	var fullsize = new_height; 
	fullsize = parseInt(fullsize) + 'px'; // concatenate string get output in px format  
	jQuery("div").css('height',fullsize); // changing height of div
}
jQuery(document).ready(function()
{
	fullsize();
	jQuery(window).bind('resize', fullsize); // event is call at screen change ( resolution changes )
});

Note: you can replace ‘jQuery’ with ‘$’ if there is any issue due to ‘jQuery’ Keyword.

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone