Posts

Backend/ Admin page-Table display with added features

I have seen many people used to code themselves for the backend table. As they don't know that there are many plugins for the table for the Backend or Admin page. I also used to program myself but It took lot of time. I have researched to accomplish these things for less and fast time to program. Datatable.js is the best way to use the table display in the Backend / Admin page. This js has features of sorting, pagination and searching Tutorial for the data table. First of all, we need JAVASCRIPT and CSS files.  Download Place this inside <head> tag. <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dataTables.js"></script> Now the javascript code. place this code anywhere inside body. <script>         $(function() {         $('#example').dataTable();         } ); </script> Now just paste the code below <
Post a Comment
Read more...

Facebook Invite Function

The Invite function for the Facebook or Facebook Invitation is easy and simple. Just use following javascript. <script  type="text/javascript">     <!-- for facebook invite-->     var message='/*Message displayed in the top of the invite window*/';   The below function is for Multiple Facebook Friend Invite function MultiFriendSelector() {         FB.ui({method: 'apprequests',             title: ' /*Title of the app*/ ',             message: message,             }, requestCallback);     }   The below function is for Single Facebook Friend Invite function FacebookInviteFriends(id)     {         FB.ui({method: 'apprequests',             title: ' /*Title of the app*/' ,             message: message,             to: id,         }, requestCallback);     } The below function is for callback function when user perform the action  function requestCallback(response) {         if (response.request &am
Post a Comment
Read more...

Sharing with Social media (Facebook, Twitter, tumblr, pinterest) while clicking using javascript

I have researched on Sharing with social media like facebook, twitter, tumblr and pinterest . As I have researched I have found many plugins for this features, but I found many unused social media added in that plugins. So I have made this sharing features researching. For Facebook Sharing , Using Facebook javascript sdk . here is the code: <a title="Share on Facebook" href="javascript:void(0);" onClick="return share();" >Share with Facebook</a> <script  type="text/javascript">                 function share()                 {                     FB.ui({ method: 'feed',                     link: '',//link for facebook user to get back to the site                     picture: "", //picture to share                     name: '', //header title of the article                     caption: "",  //caption for the picture in the article                     description: "
1 comment
Read more...

Line or Graph chart for data in multiple array.

As I have said that I have research for the line graph or chart by many ways. But the easiest and fast processing tutorial is highchart graph. The other way of the multiple array, as I have got that many got problem in this section. I also got that may plugins and programming is slow processing. The best way is to use High chart plugins. One of the example on the graph is as follow. <script type="text/javascript"> $(document).ready(function() { var options = {  colors: ['#058DC7', '#50B432', '#ED561B'], chart: {                renderTo: 'diagram', type: 'spline', zoomType: 'x', spacingRight: 20, backgroundColor: { linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, stops: [ [0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)'] ]   }, plotShadow: true, plotBorderWidth: 1, width:700, height:450 }, title: { style:
Post a Comment
Read more...

Line or Graph chart for data in array.

I have research for the line graph or chart by many ways. But the easiest and fast processing tutorial is highchart graph. We can make any type of the chart using highchart. For more information on Highchart go to the highchart site . One of the example on the graph is as follow. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#container').highcharts({ chart: { zoomType: 'x', spacingRight: 20 }, title: { text: 'USD to EUR exchange rate from 2006 through 2008' }, subtitle: { text: document.ontouchstart === undefined ? 'Click and drag in the plot area to zoom in' : 'Pinch the chart
Post a Comment
Read more...

Google map API with Infobox using associative array

As I said in previous article. This is the code for Google map API with Infobox style using associative array. <script type="text/javascript"> var map; var markers = []; var data = [ {id:"1",name:"Sujan Bhochhibhoya",address:"KATHMANDU, NEPAL"}, {id:"3",name:"David Beckham",address:"LONDON, UNITED KINGDOM"}, {id:"4",name:"KOBE BRYANT",address:"Los Angeles, California, United States"}]; function initialize() { var latlng = new google.maps.LatLng(0, 0); var myOptions = { zoom: 2, minZoom:2, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, }, center: latlng, }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); geocoder = new google.maps.Geocoder(); data.forEach(function(mapData,idx
Post a Comment
Read more...

Google map API

I have seen many queries about the google map problems like, -Display Multiple Markers in Array - Google Maps API -Multiple markers not showing in Google Maps with Javascript API v3? - etc... I have completed the google api with array of the location. I have tried this and is good. here is the code: <script type="text/javascript"> var map; var markers = []; var data = [ {id:"1",name:"Sujan Bhochhibhoya",address:"KATHMANDU, NEPAL"}, {id:"3",name:"David Beckham",address:"LONDON, UNITED KINGDOM"}, {id:"4",name:"KOBE BRYAN",address:"Los Angeles, California, United States"}]; function initialize(){ var latlng = new google.maps.LatLng(0, 0); var myOptions = { zoom: 2, minZoom:2, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, }, center: latlng }; map = new google.maps.Map(document.getElementById("map_canv
Post a Comment
Read more...