jQuery Tips: Develop infinite scrolling

[Originally posted on http://onlyms.net]
This simple below JQuery code can use for infinite scrolling. Just look into it, its extremely simple and easy task. Just follow below codes

Java Script
Include JQuery file as below:

< scri pt sr c="js/ jquery-1.10.2.js">

    < sc ript src="js/jquery-1.10.2.min.js">
and java script code as :


        $ ( func tion () {
            $(win dow) .scr oll(fu nction (ev ent) {
                cons ole.log($(".lo ad-more").off set().top < $(wi ndow).scroll Top() + $(win dow).outer Height()); // You can track if result is true or false
                if ($(". load-more").off set().top < $(win dow).scroll Top() + $(window).outer Height() == true) {
                    //Method to load next page
                }
                else {
                    //Do nothing or do as you want
                }
            });
        });
    < / sc ript

CSS section as below, just used for selector. You can update if you need.

        .load-more {
        }
    </ sty l e

HTML part as below:

< d iv>
    < text area style="wi dth: 50%; hei ght: 110vh;">
    This is to fill full screen, so load more button go to invisible section
< / text area>
    < in put clas s="load-more" val ue="load more" typ e="button" />
</ d iv>

Hello World with SignalR

[Original Post from my blog OnlyMS.Net for better visibility read it from OnlyMS.Net]  

Programming with distributed technology is my passion. Earlier I have worked with Remoting, Socket, Web Service and a bit with WCF. So when I first came to know about SignalR technolog, really I can not wait to start coding on it. Now I can able to write own chat application for AlapMe and really its working fine. Most of all by using SignalR I can use socket of HTML5. I shall write multiple posts on SignalR as tutorial as I did in past with C# Socket programming. I shall publish these posts on this blog and on my socket programming blog as well.

I have started SignalR programming with Visual Studio Express 2013 which is freely downloadable from here. Also you can read full documentation from Microsoft from this link. As my target to share some practical example with ready to use code hence I shall not describe in detail about the technology. You can follow Microsoft documentation website for it. 

To start with SignalR first coding you need to follow steps are below.
Lunch your VS 2013 and create a blank project and add new item of SignalR Hub Class (v2) set its name as you wish, for my case its MyHub.cs. When you will add this class Visual Studio automatically add all related references and jquery classes. To add these things it may take some time may be 2-3 minutes. This new item will come with a sample method 'Hello()', for now just follow these later I shall describe what is these things and why these are. Full code will look like below:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

namespace SignalR_Learning

{

    public class MyHub : Hub

    {

        public void Hello()

        {

            Clients.All.hello();

        }

    }

}

Now go to next step and add next item in project, that is OWIN Startup class. I am giving its default name 'Startup1.cs' for my sample project. Visual Studio will create this file with some pre-added code. We will extend these code as per your needs. Code as below:

 

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

[assembly: OwinStartup(typeof(SignalR_Learning.Startup1))]

namespace SignalR_Learning

{

    public class Startup1

    {

        public void Configuration(IAppBuilder app)

        {

            // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888

        }

    }

}

 In method Configuration I shall add just a line of code 'app.MapSignalR();' so full method will look like:

 

public void Configuration(IAppBuilder app)

{

    // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=316888

    app.MapSignalR();

}

 Now we will move to front end coding and this part will develop with simple HTML page, however you can use ASPX page as well. Now I have added a HTML page with name 'index.html'

  < me ta http-equiv="X-UA-Compatible" content="IE=edge" / >

    < ! --Script references. -->

    < ! --Reference the jQuery library. -->

    < s cript src="Scripts/jquery-1.10.2.js">< / scr ipt>

    < s cript src="Scripts/jquery-1.10.2.min.js">< / scr ipt>   

    < s cript src="Scripts/json2.js"></ scr ipt>

    < ! --Reference the SignalR library.  - - >

    < s cript src="Scripts/jquery.signalR-2.0.0.js">< / scr ipt>

    < s cript src="Scripts/jquery.signalR-2.0.0.min.js">< / scri pt>

    < ! --Reference the autogenerated SignalR hub script. - - >

    "/signalr/hubs">

    < ! --Add script to update the page and send messages.-- >

 < s cript type="text/java scri pt" >

        var chat;

        $(function () {

            // Declare a proxy to reference the hub.

            //chat = $.hubConnection.myhub;

            chat = $.connection.myhub;

            //alert(chat);

            chat.client.hello = function (message) {

                alert(message);

            };

            // Start the connection.

            $.connection.hub.start().done(function () {

                $('#btnhello').click(function () {                   

                    alert(chat);

                });

            });

        });

< / scr ipt> 

 < in put ty pe="button" value="Hello" id="btnhello" / >

 

 Thank you for visiting my blog.

 

Mobile App development with PhoneGap

[Original Post from my blog OnlyMS.Net]

I am now starting to get into mobile app development and to start mobile app development using a suitable tool, I choose PhoneGap. I choose PhoneGap because to develop mobile app using PhoneGap I do not need to learn anything new as I know HTML, JavaScript, CSS and these things are using here to develop any mobile app for iOS, Android, Windows, Blackberry, Bada etc mobile OS.

To start PhoneGap first install node.js from here.
Next go to command line in your windows and type following (link here)

C:\> npm install -g phonegap

It will start installing the software.


Read full learning from here and can read basic stuff from  here.