are on facebook
Share on
Share on pinterest_share
e Sharing Service
Now a days in most all shopping website like flipkart or any other,you can see that product or data is loading in to website when you scroll mouse.
You want to know how its possible with PHP,well here is the simple example that how you can add infinite load content into your webpage,
Take a look at simple code and you can also download code,
How it works
I’ve created a little plugin that allows us to accomplish our goal. Simply put the plugin checks if the user is at the bottom of the container you specify and loads more content accordingly. Then this data is sent to an ajax file which processes what posts to show.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// Check the user is at the bottom of the element
if
(
$
(
window
)
.
scrollTop
(
)
+
$
(
window
)
.
height
(
)
>
$
this
.
height
(
)
&&
!
busy
)
{
// Now we are working,so busy is true
busy
=
true
;
// Tell the user we're loading posts
$
this
.
find
(
'.loading-bar'
)
.
html
(
'Loading Posts'
)
;
// Run the function to fetch the data inside a delay
// This is useful if you have content in a footer you
// want the user to see.
setTimeout
(
function
(
)
{
// This is the Ajax function
getData
(
)
;
}
,
$
settings
.
delay
)
;
@H_ 403_294@
}
|
The key line here is
|
|
if
(
$
(
window
)
.
scrollTop
(
)
+
$
(
window
)
.
height
(
)
>
$
this
.
height
(
)
&&
!
busy
)
|
This is basically saying,if the user scroll position is greater than the height of the element targeted,then more elements should be loaded.
What is Ajax?
Ajax is how we send data to files when an event happens in javascript. For example,when we scroll we want to send some data to another file to figure out what to do. That file is usually a PHP file which willprocessthe data sent,and then you can do something like grab information from a database. So how do we do this with jQuery? Since we’re posting data,we use the$.postfunction. It looks a little like this:
$
.
post
(
'file.PHP'
,
{
information:
'to be sent'
,
to
:
'file'
}
,
function
(
data
)
{
}
}
)
;
|
So in the above example we end the information (thats the bit inside the first set of curly brackets) to the file,file.PHP. When the information is sent it will return some information in the form of a data variable,and we can then use that data to return information to the user via Javascript.
The ajax file is going to have to be customized to fit your needs. All you have to do is grab some information from the MysqL database of your choice with some PHP. I have created a very basic ajax.PHP file that grabs information from a wordpress MysqL database and displays the content with the title and link. It looks a little like this,but it will be included with the download files in the download link above.
