jquery events – Sibeesh Passion https://mail.sibeeshpassion.com My passion towards life Wed, 11 Jul 2018 16:27:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png jquery events – Sibeesh Passion https://mail.sibeeshpassion.com 32 32 jQuery no-conflict And Using Different Versions Of JQuery https://mail.sibeeshpassion.com/jquery-no-conflict-and-using-different-versions-of-jquery/ https://mail.sibeeshpassion.com/jquery-no-conflict-and-using-different-versions-of-jquery/#disqus_thread Mon, 12 Oct 2015 12:03:11 +0000 http://sibeecst_passion.com/?p=10793 In this post we will see what is jQuery no-conflict and what is the importance of jQuery no-conflict. We will also learn how can we use different versions of JQuery in the same page according to your need. jQuery no-conflict is an option given by the jQuery to over come the conflicts between the different js frameworks or libraries. When we use jQuery no-conflict mode, we are replacing the $ to a new variable and assign to jQuery. Here in this post we will explain this feature in deep and we will also create a demo of using different versions of jQuery together in one page. I hope you will like this.

Download Source Code

Please download the source code here: jQuery noConflict

Introduction

As you all know, some other JavaScript libraries also uses the $ (Which is the default reference of jQuery) as a function or variable name as jQuery has. And in our development life, we are not at all strict to only jQuery, we may use lots of other libraries too. Isn’t it? I use different libraries in my projects to accomplish different tasks. So what will happen when we use those libraries? There will be conflicts between those libraries right since they all use $ as the variable name. The situation is really bad.

So we have only one chocolate and more number of winners, in real life we can just cut the chocolate into the number of winners, right?

Dogs Sharing Food

Dogs Sharing Food

But that won’t be accepted in this case, so we have an another option, this option is introduced by jQuery and it is jQuery no-conflict.

Background

I always use different libraries in my project, thus sometimes I faced these problem in my project. So I thought of sharing with you all who are facing this problem.

Using the code

The first thing you want to do is creating an HTML page.

[html]
<!DOCTYPE html>
<html>
<head>
<title>JQuery noConflict – Sibeesh Passion</title>
</head>
<body>
JQuery noConflict – Sibeesh Passion
</body>
</html>
[/html]

So what is next? Adding reference ? Yes.

[js]
<script src="prototype.js"></script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
[/js]

So we are using prototype lowest version and jquery together, in this case you will face conflict errors, and please be noted that the new version of prototype.js doesn’t have any conflict with jQuery since they updated and given the fix.

So what to do if you found any issues? you just need to give the $ to prototype and assign a new variable to jquery as follows.

[js]
<script>
// Give $ back to prototype.js; create new alias to jQuery.
var $jq = jQuery.noConflict();
</script>
[/js]

And now you can use $jq as the new jQuery reference.

[js]
<script>
$jq(document).ready(function () {
$jq("#btn").on(‘click’, function () {
alert(‘Clicked’);
});
});
</script>
[/js]

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>JQuery noConflict – Sibeesh Passion</title>
<script src="prototype.js"></script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script>
// Give $ to prototype.js
var $jq = jQuery.noConflict();
</script>
<script>
$jq(document).ready(function () {
$jq("#btn").on(‘click’, function () {
alert(‘Clicked’);
});
});
</script>
</head>
<body>
JQuery noConflict – Sibeesh Passion
<br />
<br />
<br />
<input type="button" value="" id=’btn’ />
</body>
</html>
[/html]

Sometimes we may end up in a situation to use different version of jQuery in the same page right?

Situation I faced

I was working in an old project which was handled by a team few years back, at that time I got a minor work to do in that project, to do the task I was in a need to add the latest version of jQuery since the entire project was using the old reference of jQuery. I was in a situation that I should not remove the old references and update with the new one, if I do that there might be some issues with other functionalities right? Since the project was already in live, I didn’t take that risk. So I added the new version and used jQuery noConflict to avoid the reference issues.

Using the code

Here I am going to give you a demo of now to use different version of jQuery in one page.

First of all please add the needed reference to your page.

[js]
<script src="JQuery%20Versions/jquery-1.9.0.min.js"></script>
<script src="JQuery%20Versions/jquery-1.10.1.min.js"></script>
<script src="JQuery%20Versions/jquery-1.11.0.min.js"></script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>
[/js]

Please be noted that we have added jQuery 1.9.0,1.10.1,1.11.0,1.11.1,1.11.3 in our page.

Now we need to add some buttons in the UI, later we will bind the click events of the same buttons.

[html]
<input type="button" value="Use jQuery 1.9.0" id=’btn190′ />
<input type="button" value="Use jQuery 1.10.1" id=’btn1101′ />
<input type="button" value="Use jQuery 1.11.0" id=’btn1110′ />
<input type="button" value="Use jQuery 1.11.1" id=’btn1111′ />
<input type="button" value="Use jQuery 1.11.3" id=’btn1113′ />
[/html]

What is next, so we have added the different jQuery versions. Now we will create different variable names for each versions. Is that fine?

[js]
<script src="JQuery%20Versions/jquery-1.9.0.min.js"></script>
<script>
var jQuery190 = jQuery.noConflict();
window.jQuery = jQuery190;
</script>
<script src="JQuery%20Versions/jquery-1.10.1.min.js"></script>
<script>
var jQuery1101 = jQuery.noConflict();
window.jQuery = jQuery1101;
</script>
<script src="JQuery%20Versions/jquery-1.11.0.min.js"></script>
<script>
var jQuery1110 = jQuery.noConflict();
window.jQuery = jQuery1110;
</script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script>
var jQuery1111 = jQuery.noConflict();
window.jQuery = jQuery1111;
</script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>
<script>
var jQuery1113 = jQuery.noConflict();
window.jQuery = jQuery1113;
</script>
[/js]

So now we have added variable names for all the versions right? The next thing we are going to do is to fire the click events for each versions.

[js]
<script>
jQuery190(document).ready(function ($) {
//The codes for jQuery 1-9-0
$("#btn190").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1101(document).ready(function ($) {
//The codes for jQuery 1-10-1
$("#btn1101").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1110(document).ready(function ($) {
//The codes for jQuery 1-11-0
$("#btn1110").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1111(document).ready(function ($) {
//The codes for jQuery 1-11-1
$("#btn1111").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1113(document).ready(function ($) {
//The codes for jQuery 1-11-3
$("#btn1113").on(‘click’, function () {
alert($.fn.jquery);
})
});
</script>
[/js]

So if you run your page and click the buttons, you can find that the related codes only get fired.

jQuery no-conflict And Using Different Versions Of JQuery

jQuery no-conflict And Using Different Versions Of JQuery

jQuery no-conflict And Using Different Versions Of JQuery

jQuery no-conflict And Using Different Versions Of JQuery

Now what if you comment out the variable declaration for jQuery version 1.11.3?

[js]
//var jQuery1113 = jQuery.noConflict();
//window.jQuery = jQuery1113;
[/js]

You will get an error says Uncaught ReferenceError: jQuery1113 is not defined in browser console.

jQuery no-conflict And Using Different Versions Of JQuery

jQuery no-conflict And Using Different Versions Of JQuery

Complete Code

[html]
<!DOCTYPE html>
<html>
<head>
<title>Use JQuery Different Versions in One Page – Sibeesh Passion</title>

<script src="JQuery%20Versions/jquery-1.9.0.min.js"></script>
<script>
var jQuery190 = jQuery.noConflict();
window.jQuery = jQuery190;
</script>
<script src="JQuery%20Versions/jquery-1.10.1.min.js"></script>
<script>
var jQuery1101 = jQuery.noConflict();
window.jQuery = jQuery1101;
</script>
<script src="JQuery%20Versions/jquery-1.11.0.min.js"></script>
<script>
var jQuery1110 = jQuery.noConflict();
window.jQuery = jQuery1110;
</script>
<script src="JQuery%20Versions/jquery-1.11.1.min.js"></script>
<script>
var jQuery1111 = jQuery.noConflict();
window.jQuery = jQuery1111;
</script>
<script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>
<script>
//var jQuery1113 = jQuery.noConflict();
//window.jQuery = jQuery1113;
</script>
<script>
jQuery190(document).ready(function ($) {
//The codes for jQuery 1-9-0
$("#btn190").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1101(document).ready(function ($) {
//The codes for jQuery 1-10-1
$("#btn1101").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1110(document).ready(function ($) {
//The codes for jQuery 1-11-0
$("#btn1110").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1111(document).ready(function ($) {
//The codes for jQuery 1-11-1
$("#btn1111").on(‘click’, function () {
alert($.fn.jquery);
})
});
jQuery1113(document).ready(function ($) {
//The codes for jQuery 1-11-3
$("#btn1113").on(‘click’, function () {
alert($.fn.jquery);
})
});
</script>
</head>
<body>
Use JQuery Different Versions in One Page
<br />
<br />
<br />
<input type="button" value="Use jQuery 1.9.0" id=’btn190′ />
<input type="button" value="Use jQuery 1.10.1" id=’btn1101′ />
<input type="button" value="Use jQuery 1.11.0" id=’btn1110′ />
<input type="button" value="Use jQuery 1.11.1" id=’btn1111′ />
<input type="button" value="Use jQuery 1.11.3" id=’btn1113′ />
</body>
</html>
[/html]

That’s all.

Conclusion

Did I miss anything that you may think which is needed? Have you ever used different versions of jQuery in same page? Have you ever tried jQuery noConflict? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

]]> https://mail.sibeeshpassion.com/jquery-no-conflict-and-using-different-versions-of-jquery/feed/ 4 Remove a DOM element using JQuery https://mail.sibeeshpassion.com/remove-a-dom-element-using-jquery/ https://mail.sibeeshpassion.com/remove-a-dom-element-using-jquery/#disqus_thread Wed, 01 Jul 2015 10:22:00 +0000 http://sibeecst_passion.com/?p=5981 Introduction

Hi All, How are you today? In this article we will see how we can remove a DOM element using JQuery. I hope you will like it.

Background

I know we all are working in the client side technologies, especially in JQuery. Sometimes we may need to write more client side codes rather than server side codes. In that case, you may need to remove some DOM elements pragmatically. Here I am going to give you a demo of how we can do this requirement.

Using the code

To start with, as you all know we need to load the JQuery reference.

[js]
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
[/js]

Once you load the reference you are ready to go.

Since this is a demo, we will explain with some steps. Sounds good?. So we will do the following tasks.

  • Add the elements to the DOM
  • Delete the DOM elements using .remove(), .get() functions

    • Shall we start then?

    Add the elements to the DOM

    We need to set our UI first right?

    [html]
    <body id="body">
    Remove a DOM element from the UI using JQuery- Sibeesh Passion
    <br/>
    <br/>
    <p id="addMe">Generate 10 Elements</p>
    </body>
    [/html]

    Add CSS
    [css]
    <style>
    p {
    color: red;
    width: 170px;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    }
    #deleteMe {
    color: white;
    width: 170px;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    background-color: blue;
    }
    </style>
    [/css]

    So we have set our UI, and now if you run your page you can see output as follows.

    www.sibeeshpassion.com

    Now we will add the needful scripts.

    [js]
    <script>
    $(document).ready(function() {
    $("#addMe").click(function() {
    var html = ‘<table>’;
    for (var i = 1; i <= 10; i++) {
    html += "<tr><p>My Elements</p></tr>";
    }
    html += ‘</table>’;
    $(‘#body’).append(html).append(‘<div id="deleteMe">Delete 5 Elements</div>’);
    $("#addMe").hide();
    });
    $(document).on(‘click’, ‘#deleteMe’, function() {
    for (var i = 1; i <= 5; i++) {
    $(‘#body’).find(‘p’).get(i).remove();
    }
    $("#addMe").hide();
    $("#deleteMe").hide();
    });

    });
    </script>
    [/js]

    As you can see we are adding elements to the DOM with a loop. Once you run the page you can see the output as follows.

    www.sibeeshpassion.com

    And once you click on “Delete 5 Elements” button, 5 DOM elements will be deleted.

    www.sibeeshpassion.com

    The following code block describes how we can use .remove() function.

    [js]
    $(‘#body’).find(‘p’).get(i).remove();
    [/js]

    Complete Code

    [html]
    <html>

    <head>
    <title>emove a DOM element from the UI usign JQuery- Sibeesh Passion</title>
    <style>
    p {
    color: red;
    width: 170px;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    }
    #deleteMe {
    color: white;
    width: 170px;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    background-color: blue;
    }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>

    <body id="body">
    Remove a DOM element from the UI using JQuery- Sibeesh Passion
    <br/>
    <br/>
    <p id="addMe">Generate 10 Elements</p>
    <script>
    $(document).ready(function() {
    $("#addMe").click(function() {
    var html = ‘<table>’;
    for (var i = 1; i <= 10; i++) {
    html += "<tr><p>My Elements</p></tr>";
    }
    html += ‘</table>’;
    $(‘#body’).append(html).append(‘<div id="deleteMe">Delete 5 Elements</div>’);
    $("#addMe").hide();
    });
    $(document).on(‘click’, ‘#deleteMe’, function() {
    for (var i = 1; i <= 5; i++) {
    $(‘#body’).find(‘p’).get(i).remove();
    }
    $("#addMe").hide();
    $("#deleteMe").hide();
    });

    });
    </script>
    </body>

    </html>
    [/html]

    Conclusion

    I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

    Thanks in advance. Happy coding!

    Kindest Regards
    Sibeesh Venu

    ]]>     https://mail.sibeeshpassion.com/remove-a-dom-element-using-jquery/feed/ 0     Load Data on Scroll Using jQuery https://mail.sibeeshpassion.com/load-data-on-scroll-using-jquery/ https://mail.sibeeshpassion.com/load-data-on-scroll-using-jquery/#disqus_thread Tue, 30 Jun 2015 01:49:09 +0000 https://sibeeshpassion.com/?p=2111 Introduction

    Hi all, how are you today? This article explains how to load data on demand or load data when the user scrolls. Here we will do this in a simple manner, I hope you enjoy it.

    Download Source Code

  • LoadDataOnScroll

    • Background

    A few days ago one of my colleagues asked me how to load data into the UL when we do scroll. I could help him on that time itself. But here I am writing this article for his future reference. In this way we can do this very easily.

    Using the code

    Since we will load the data on a scroll, we need to fire the window events. So I suggest include a jQuery plugin in your page as in the following:
    [js]
    <script src=“jquery-2.1.4.min.js”></script>
    [/js]

    Once you are done, you are ready to go!

    Our next step is load some initial or static data.
    [html]
    <div id=“myScroll”>
    <p>
    Contents will load here!!!.<br />
    </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    </div>
    [/html]

    Now we need some styles, right?

    [css]
    <style>
    #myScroll {
    border: 1px solid #999;
    }
    p {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    }
    .loading {
    color: red;
    }
    .dynamic {
    background-color:#ccc;
    color:#000;
    }
    </style>
    [/css]

    What is next? Shall we run it and see our page now?

    So now we have loaded the static data. Now it is time to fire the scroll event.
    [js]
    $(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() – $(window).height()) {
    appendData();
    }
    });
    [/js]

    In the preceding code, I am calling the scroll event and when the condition $(window).scrollTop() == $(document).height() – $(window).height() is satisfied, I am calling a function. You can see the function below.
    [js]
    function appendData() {
    var html = ”;
    for (i = 0; i < 10; i++) {
    html += ‘<p class=”dynamic”>Dynamic Data : Life treats you in the same way, how you treat your life.Follow your passion, be prepared, do not let anyone limit your dreams. My Passion towards my life !!! – See more at:<a href=”http://sibeeshpassion.com/”>http://sibeeshpassion.com/</a> </p>’;
    }
    $(‘#myScroll’).append(html);
    }
    [/js]

    Here I am populating 10 records dynamically and appending the created data to our main element. Once you are done, you can see the output as in the following.

    Complete Code
    [html]
    <!DOCTYPE html>
    <html>
    <head>
    <title>Load data on demand demo – Sibeesh Passion</title>
    <script src=“jquery-2.1.4.min.js”></script>
    <style>
    #myScroll {
    border: 1px solid #999;
    }
    p {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
    }
    .loading {
    color: red;
    }
    .dynamic {
    background-color:#ccc;
    color:#000;
    }
    </style>
    <script>
    $(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() – $(window).height()) {
    appendData();
    }
    });
    function appendData() {
    var html = ”;
    for (i = 0; i < 10; i++) {
    html += ‘<p class=”dynamic”>Dynamic Data : Life treats you in the same way, how you treat your life.Follow your passion, be prepared, do not let anyone limit your dreams. My Passion towards my life !!! – See more at:<a href=”http://sibeeshpassion.com/”>http://sibeeshpassion.com/</a> </p>’;
    }
    $(‘#myScroll’).append(html);
    }
    </script>
    </head>
    <body>
    <div id=“myScroll”>
    <p>
    Contents will load here!!!.<br />
    </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    <p >Life treats you in the same way, how you treat your life.Follow your passion, be prepared, don’t let anyone limit your dreams. My Passion towards my life !!! – See more at: http://sibeeshpassion.com/ </p>
    </div>
    </body>
    </html>
    [/html]

    Conclusion

    Please download the source code for more details. I hope you liked this article. Now please share your thoughts and suggestions. It matters a lot.

    Kindest Regards
    Sibeesh Venu

    ]]>     https://mail.sibeeshpassion.com/load-data-on-scroll-using-jquery/feed/ 0     How to make an event calls only once in JQuery https://mail.sibeeshpassion.com/how-to-make-an-event-calls-only-once-in-jquery/ https://mail.sibeeshpassion.com/how-to-make-an-event-calls-only-once-in-jquery/#disqus_thread Mon, 22 Jun 2015 07:50:58 +0000 http://sibeecst_passion.com/?p=5341 Today we will learn how we will learn how we can make an event to be fired only once in JQuery. This is a simple demo of JQuery .one() function. You may have gone through this situation in your development life. I hope you will like this.

    Background

    While I was doing some tasks, I wanted to make a click event which is to be fired only once for a user when the user is logged in. I used the JQuery .one function to do the requirement. So I thought of sharing you that.

    Using the code

    AS you all know we can handle so many events in client side by using JQuery. Hereby I am sharing you one of those event which will definitely help you one day in your application.

    To start with load the JQuery reference. I am using Google CDN here.

    [js]
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    [/js]

    Now we will create a ‘p’ tag.

    [html]
    <p>Click Me</p>
    [/html]

    What next? Style that ‘p’ tag?

    [css]
    p {
    color: red;
    width: auto;
    height: 50px;
    margin: 250px;
    border: 1px solid #ccc;
    padding: 25px;
    text-align: center;
    }
    [/css]

    Now it is time to start our JQuery coding. For that we are going to create a document ready event and a click event.

    [js]
    <script>
    $(document).ready(function(){
    $("p").one( "click", function() {
    $(this ).text("You clicked me!. Now you can’t do anything!!!!");
    });
    });
    </script>
    [/js]

    So what does this .one() function does is, it will make sure that element’s click event is fired only once.

    Complete Code

    [html]
    <html>
    <head>
    <title>JQuery one demo – Sibeesh Passion</title>
    <style>
    p {
    color: red;
    width: auto;
    height: 50px;
    margin: 250px;
    border: 1px solid #ccc;
    padding: 25px;
    text-align: center;
    }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>
    <p>Click Me</p>
    <script>
    $(document).ready(function(){
    $("p").one( "click", function() {
    $(this ).text("You clicked me!. Now you can’t do anything!!!!");
    });
    });
    </script>
    </body>
    </html>
    [/html]

    Now we will see the output.

    Output

    Conclusion

    I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

    Thanks in advance. Happy coding!

    Kindest Regards
    Sibeesh Venu

    ]]>     https://mail.sibeeshpassion.com/how-to-make-an-event-calls-only-once-in-jquery/feed/ 0