Tuesday 26 November 2013

Infinte scrolling in php

Database Structure

First we need to create a database table. Because, we need some large amount of data to make this demo up and run here I am using test simple database's actor_info table. The structureof this table looks like....
CREATE TABLE `actor_info` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(45) NOT NULL,
  `last_name` varchar(45) NOT NULL,
  `film_info` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

DB CONFIGURATION

The config.php file is responsible for database connect. I also include a variable named $limitwith value of 10. It is the number of content you want to show on per page. You can increase or decrease this number as you want.
# db configuration 
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', 'root');
define('DB_NAME', 'dbname');

$limit = 10; #item per page
# db connect
$link = mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('Could not connect to MySQL DB ') . mysql_error();
$db = mysql_select_db(DB_NAME, $link);

PHP and HTML

Take a look at the PHP and HTML code, this PHP code retrieves data from MySQL database with simple pagination.
<?php
include('config.php');
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM actor_info ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
  $next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
  header('HTTP/1.0 404 Not Found');
  echo 'Page not found!';
  exit();
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>jQuery Load While Scroll</title>
</head>
<body>
<div class="wrap">
  <h1><a href="#">Data load while scroll</a></h1>

  <!-- loop row data -->
  <?php while ($row = mysql_fetch_array($query)): ?>
  <div class="item" id="item-<?php echo $row['id']?>">
    <h2>
      <span class="num"><?php echo $row['id']?></span>
      <span class="name"><?php echo $row['first_name'].' '.$row['last_name']?></span>
    </h2>
    <p><?php echo $row['film_info']?></p>
  </div>
  <?php endwhile?>

  <!--page navigation-->
  <?php if (isset($next)): ?>
  <div class="nav">
    <a href='index.php?p=<?php echo $next?>'>Next</a>
  </div>
  <?php endif?>
</div><!--.wrap-->
</body>
</html>

JavaScript part

In the JavaScript section we need to first include jQuery and Infinity Ajax Scroll library. In the second pert we need to call jQuery.ias method and configure it. Take a look on the comments
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ias.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // Infinite Ajax Scroll configuration
    jQuery.ias({
      container : '.wrap', // main container where data goes to append
      item: '.item', // single items
      pagination: '.nav', // page navigation
      next: '.nav a', // next page selector
      loader: '<img src="css/ajax-loader.gif"/>', // loading gif
      triggerPageThreshold: 3 // show load more if scroll more than this
    });
  });
</script>

How to Create RSS Feeds in Twitter

The trick is simple. Twitter offers widgets to help you embed user timelines into your website.  The new workaround simply transforms these Twitter widgets into regular RSS Feeds with the help of a simple Google Script. Here’re the instructions:
  1. From your Twitter homepage, go to Settings -> Widgets (link) and create a new widget. You can create widgets for user timelines, favorites, Twitter list and search results.
  2. Once the new widget is published, make a note of the widget ID which you can find in the the URL of the widget.
  3. Click here to make a copy of the Google Script and choose Run -> Twitter_RSS to initialize and authorize the script. You’ve to do this only once.
  4. Go to Publish -> Deploy as Web App and click the “Save New Version” button. Set Anyone, including Anonymous under Who has access to the app and hit Deploy.
Google Script will now create a unique URL for your RSS web app that will look something likehttps://script.google.com/macros/s/ABCD/exec. Just append the Twitter Widget ID (created in Step 2) to this URL and your RSS feed for Twitter is ready.
For instance, if the Twitter widget ID is 123456, your RSS Feed URL would be:
https://script.google.com/macros/s/ABCD/exec?123456 
Should you wish to create another RSS Feed for Twitter, just add another widget and use that new widget’s ID with your Google Script URL. [Video Tutorial ]
You can subscribe to the Twitter RSS feed inside Feedly or use it as for an IFTTT recipe. However, FeedBurner is unable to parse RSS feeds generated through Google Scripts.

Convert your Emails to PDF through Email

Google Chrome has a built-in PDF writer so you can easily convert any email message into a PDF file within the browser itself but if you are reading your emails on a mobile phone or a tablet, you would need some sort of a PDF conversion app.
Convert Email to PDF
Alternatively, you can forward the original email message to pdfconvert@pdfconvert.meand the service will send a PDF version of the message back to you in a second or two. I tried converting a plain text email message as well as one with HTML tags and the conversion was almost perfect in both instances.
If there are any Word, Excel or Powerpoint attachments inside the mail, you can forward the files to attachconvert@pdfconvert.me and they’ll come back to you in PDF format. Zamzar is another helpful service that let you convert files by email but the advantage with PDFConvert.me is that it sends you the converted PDF file by email itself, you don’t have to visit their website to download the PDF.
You may also use the service to retrieve web pages as PDFs. Just send the web address (URL) of the page in the body of the email message to webconvert@pdfconvert.me and the service will send you the full page in PDF format. This feature can be used for viewing pages that otherwise aren’t accessible due to internet filters.
The site’s privacy policy says that they store your email message on their server only during the conversion process.

How to insert google map in our website or Embed map in your website

If you want to insert google map in your website first choose go to the url "https://maps.google.co.in/" and Search your place . Here I am using Shop Aunty and Result we get this :
















Now , Go to Link Button in left side of the map and click here as show in figure
















and you will get the HTML Code  :

















Just Copy and Paste this iframe code in your website and save this file in .htm or .html extension for example map.htm or map.html and double click on it and you will see that you want .


How to create easy pagination with jQuery or JAVASCRIPT


Step 1 : Here are our main HTML file:


<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="js/imtech_pager.js"></script>

<div class="example">
    <h3><a href="#">Paragraph pagination sample</a></h3>
    <div id="content">
        <div class="z">Sergey LUKYANENKO - The Boy and the Darkness - Chapter 1. The Sun Kitten.</div>
        <div class="z">Everything happened because I got ill.</div>
        <div class="z">It was already two in the afternoon, and I was lying in bed flicking through "Peter Pan" - I must have read it a hundred times over. I had long since pulled off the bandage my mother had tied around my neck in the morning, and thrown it into a corner. I simply can't understand - how can cotton wool soaked in vodka possibly help a cough? I don't argue with my mum, of course, but after she leaves I look after myself in my own way - namely, lie in bed with a book and wait for my germs to get tired of such a boring method of passing time. It usually helps - perhaps not at once, but after a day or three. A good thing, really, that the street outside looked quite miserable - the sun poking out for brief moments, only to make room for a patchy, nasty drizzle. Though, the sun never actually peeked into the room - our house is so unfortunately placed that it is in the shadows of the new nine-floor high-rises on every side. "The only use for such a flat is to grow mushrooms", - dad used to say, back when he still lived with us.</div>
        <div class="z">I put my book down on the floor next to the bed, and lay on my back. Perhaps, had I shut my eyes now, nothing would have happened. But there I was, lying staring at the ceiling and listening to the ticking of the clock in the hallway.</div>
        <div class="z">And a speck of sunlight jumped into the room through the glass. Small - the size of my hand - but surprisingly bright. As though the window was open, with bright summer sun outside. Someone was probably playing with a mirror on the balcony of the house across the street.</div>
        <div class="z">The rabbit floated across the ceiling, climbed down a wall, made a vase on the dressing-table glint, and stopped, shaking slightly, on my headrest.</div>
        <div class="z">- Don't go, - I said for some reason, knowing that in a moment the mirror would shift and the rabbit would leave my room forever. - Stay...</div>
        <div class="z">And that's when it all started.</div>
        <div class="z">The sun rabbit tore free of the bed and floated in the air. I didn't even realise at first that such things don't happen. It was only when the flat spot hanging in the air started puffing out to form a fuzzy orange ball that I understood - a miracle had happened.</div>
        <div class="z">Four paws stretched from orange glowing fur, followed by a tail and a head. Green cat eyes blinked and gazed at me steadily. And overall, in fact, the rabbit looked more like a kitten than anything else. Except he was hanging in the air, glowing, and seemed light as the fairy fluff that floats away if one blows gently.</div>
        <div class="z">- Hello, - purred the kitten. - Thank you for the invitation.</div>
        <div class="z">I closed my eyes for a second, but when I opened them again, the kitten hadn't disappeared. In fact, he'd flown closer.</div>
        <div class="z">- I don't believe in fairy tales, - I told myself. - I'm grown up now.</div>
        <div class="z">- Well, compared to the girl who was holding the True Mirror, you are quite grown up, - declared the kitten, unperturbed, and lowered himself onto the blanket. I glanced over - to see if there would be smoke - but everything seemed all right. I could feel warmth with my chest, but not strong. And the kitten tilted his head and added: - But one can't really call you adult, either. How old are you? Ten, maybe?</div>
        <div class="z">- Fourteen, - I replied, finding myself calming down at such a mundane question. - Who're you?</div>
        <div class="z">- A sun rabbit, - replied the kitten, examining himself curiously. - What an appearance.. do I look like one?</div>
        <div class="z">- <b>Like</b> what?</div>
        <div class="z">- Like a <p style="font-weight:bold;color:red;">sun</p> rabbit.</div>
        <div class="z">- More like a kitten.</div>
        <div class="z">- Hardly better, - stated the Kitten sadly and stretched out. And I didn't think of anything better than repeating:</div>
        <div class="z">- Who're you?</div>
        <div class="z">- But we have already arrived at a consensus! - said the Kitten with sudden hurt. - A sun rabbit, or more precisely - a kitten, because I look far more like one! What is there not to understand?</div>
        <div class="z">I found myself tongue-tied. Well, naturally, a small green animal that eats stones would simply be - a small green stone-eater. Simple. And a sun rabbit is a sun kitten, because he looks nothing like a rabbit.</div>
        <div class="z">- So you mean - any rabbit can come to life if one just calls it? - I asked cautiously. For some reason it seemed to me the Kitten would be hurt at the question again. But he just shook his head proudly:</div>
        <div class="z">- As if! Any! Only True Light, reflected in a True Mirror, can come to life.</div>
    </div>
    <div id="pagingControls"></div>
</div>

<script type="text/javascript">
var pager = new Imtech.Pager();
$(document).ready(function() {
    pager.paragraphsPerPage = 5; // set amount elements per page
    pager.pagingContainer = $('#content'); // set of main container
    pager.paragraphs = $('div.z', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});
</script>

Step 2 :Here are used CSS file. Just few styles for our demo:


css/styles.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}

#content p{text-indent:20px;text-align:justify;}
#pagingControls ul{display:inline;padding-left:0.5em}
#pagingControls li{display:inline;padding:0 0.5em}


Step 3 : JS

Here are two JS files:

js/jquery.min.js(This Getting Online)

Both – just jQuery library. Available in package.

js/imtech_pager.js (updated due few corrections)

var Imtech = {};
Imtech.Pager = function() {
    this.paragraphsPerPage = 3;
    this.currentPage = 1;
    this.pagingControlsContainer = '#pagingControls';
    this.pagingContainerPath = '#content';

    this.numPages = function() {
        var numPages = 0;
        if (this.paragraphs != null && this.paragraphsPerPage != null) {
            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
        }

        return numPages;
    };

    this.showPage = function(page) {
        this.currentPage = page;
        var html = '';

        this.paragraphs.slice((page-1) * this.paragraphsPerPage,
            ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
            html += '<div>' + $(this).html() + '</div>';
        });

        $(this.pagingContainerPath).html(html);

        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
    }

    var renderControls = function(container, currentPage, numPages) {
        var pagingControls = 'Page: <ul>';
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
            } else {
                pagingControls += '<li>' + i + '</li>';
            }
        }

        pagingControls += '</ul>';

        $(container).html(pagingControls);
    }
}

Live Demo