hunklessons: json

Showing posts with label json. Show all posts

Wednesday, November 11, 2015

Android JSON parser and populating in a listview

In this post we are going to learn how to how to make a Android JSON Parser and populating the results in a ListView, This Post has been Created by HackerKernel Take a minute to visit their website they have a lot of tutorials on Web and Android Development. In this post we will be fetching json data from a remote server using Android JSON parser and displaying its results in a listView Download Get From Github

Friday, May 16, 2014

Google like instant search with ajax, JSON & php PDO

Hello Guyz in this post i am going to teach your how to create a google like instant seach with ajax JSON and php PDO. The idea of creating a google like instant search was came from my Gym trainer Aamir bhai Who said me that "Google Search is the best", that word blink at my mind and i decided to create a google like search. I have used php PDO for this post because it was a request from a reader of my blog to start teaching new subjects of php like OOP and PDO so i started with PDO

Live Demo Download Script

Image Rotator with jQuery & JSON

In this post i am going to create a image rotator with jQuery and JSON for this i am using a logic less template libraries Mustache.js which get the data from the external JSON file and a jQuery plugin cycle.js which rotate the data

Image Rotator with jQuery and JSON

Download Script

View Demo

html

html is very simple in html we have a main div a rotaor div in this div all the data from the json file will be feeded. we have 2 a tag which acts like next and previous button

<div id="main">
 <a href="#" id="prev_btn" class="btn">&laquo;</a>
        <a href="#" id="next_btn" class="btn">&raquo;</a>
 <div id="rotaor">
 </div>
</div>

JavaScript

javascript has very less code in simple word we are getting the data from the json file via jQuery and formatting the data with mustache.js and creating the rotator with cycle.js plugin

<!--formating the data fetched from the json file with mustache.js start-->
 <!--mustache.js template code-->
 <script type="text/template" id="mustacheTemplate">
 {{#hunklessons}}
  <div id="info">
  <h3>{{name}}</h3>
  <img src="{{photo}}" style="height:100px;" alt="image of {{name}}">
  </div>
 {{/hunklessons}}
 </script>
 <!--formating the data fetched from the json file with mustache.js end-->
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $.getJSON('hunklessons.json', function(data){//get the data from json file
   var temp = $('#mustacheTemplate').html(); //target the mustache.js template code
   var html = Mustache.to_html(temp, data);//using mustache.js to_html function to match template from the json data
   $('#rotaor').html(html);//put the data to the rotaor div

   $('#rotaor').cycle({ //using cycle.js plugin
    fx: 'fade',
    pause: 1,
    next: '#nxt_btn',
    prev: '#prev_btn',
    speed: 500,
    timeout: 1000
   });
  });
 });
 </script>

json

{"hunklessons":[
 {
  "name":"husain saify",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 },
 {
  "name":"hunk lessons",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigZ8Dc5YPz139SECKcfjInGQJRj_hfp1rgwKJYlRzkms6E8K8hMKamhYkBAX7bOH25PJq1b71nLnN8XR9IvN4L7Nob-LKAmEKP789o5rXK-PshLR4PynBOCslR_LeCfoEIE3YuxOWYgwOT/s1600/hunlessonslogo.png"
 },
 {
  "name":"Embed Youtube Videos With JavaScript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_j54IvA7Aq33ki6M3434urcid27n0ClRiqmBMM8vMYCDN5ridXXSD0G9a7XjN8Fat-aK_9zinWWH2kkjoWRAK-ZzVW8apBEPXFyIJZnIXaOtW2Oab9Aj1eyI10c_LUX8IUju6axtlNzYC/s1600/embed-yt-videos.png"
 },
 {
  "name":"Drag and Drop Game With html5 & javascript",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI4aVbre0Eb3XiyTw-OgU4zpKCZn3biRSMOwpEENgAUjNQDtKXEO7u6SAWvZrowC7dLaiVNFp_2RgETn8lcU2Hrk3q7B0lYOL3xc6Uql4xVLofm2Rm6RcqtWxFVIkmRVzLu10rMEtivdM/s1600/dragndropgame.png"
 },
 {
  "name":"Css3 Progress Bar",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi2C5B0K11byBRwxtZf16Pyvoib-Iuurh65LTBZniZNlli-4hqB7Zom8xMNZJtV7XoKCUqZGv5E9LdQst61c-5C7r_zRks1CimgyUEg6xn8aJR2BXK4KhEjw_xI4hhZV5FCZ7dwp9UlnRD/s1600/cssprogressbar.png"
 },
 {
  "name":"jQuery Username Availability check",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4STXWSx7wncxFrAvo6C5kzbqP3L0NBWjE1HdDVcKdNMem9aBeBiKtxCiyIqtHraMMoapeInyVRcNGBajUoa_Y86j82oGyyCyHqSZsOxS_JTYYDbWE6P4ppenZhUSivnbdhf9zhT-JmwJ/s1600/username+available.png"
 },
 {
  "name":"Select And Upload Multiple Images With jQuery & Ajax",
  "photo":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31ZFckzzjR2X33q0m5HhqCQr8jWYO8dfDdVBq-ZdhYnYxlM-4f_WElDsSB3ow_obcsS7soAuAkcQMzrC5UG9qUFzEe7F-tGZPY9pXRxtg5i5B2CbJGF3agXsu8uE3P_Q_zUY9Wcz1zWz0/s1600/selectanduploadmultipleimaes.png"
 },
 {
  "name":"hunk husain",
  "photo":"http://lh5.googleusercontent.com/-oqoAWmCo7CA/AAAAAAAAAAI/AAAAAAAAAPk/osoYaXlwlxI/s512-c/photo.jpg"
 }
]}

Like Us on Facebook / Add Hunk As Friend

Saturday, February 22, 2014

Live Search with jQuery & JSON

Meanwhile I was amazed with the power of jQuery for handling the JSON files. Then i decided to make a live search with JSON & jQuery so thats why i am here And now stop the BUK BUK and get into the code

Live search

in live demo search for javascript, husain, hunk, youtube, jquery

Download Script

View Demo

html

html is super easy it has 2 divs first one with the id of searcharea and second one with id of update. In search are Their is a input field and in update div we are going to show the result.

<div id="searcharea">
 <h2>Live Search</h2>
 <input type="search" id="search"/>
</div>
<div id="update"></div>