Simple Jquery Plugin

Friday, 21 August 2015

Get current location javascript

Create only index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;

</script>
</head>
<body>
<div id="map-canvas" style="width:50%;height:300px"></div>
<button onClick="getLocation()">Get Current Location</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");

}

function showPosition(position) {
var center=new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
options={center: center, zoom:8, mapTypeId: google.maps.MapTypeId.ROADMAP};
map= new google.maps.Map(document.getElementById("map-canvas"),options);

marker= new google.maps.Marker({position:center,map:map});
//marker.setMap(map);
}
window.onload=getLocation()
//addMarker();
</script>
</body>
</html>

Thursday, 20 August 2015

Editable jQuery with Total Calculator

Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Editable jQuery with Total Calculation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
<style>
.main_wrapper{
padding:20px;
margin:auto;
background:#ccc;
}
</style>
</head>
<body>
<div class="main_wrapper">
<h2>Inventory Record</h2>
<div class="container">
  <table id="mainTable" class="table table-striped">
    <thead>
      <tr>
        <th>Item Name</th>
        <th>Price</th>
        <th>Tax(Rs.)</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Pen</td>
        <td>100</td>
        <td>2</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Copy</td>
        <td>200</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Switch</td>
        <td>500</td>
        <td>7</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Laptop</td>
        <td>15000</td>
        <td>200</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Mobile</td>
        <td>3330</td>
        <td>123</td>
        <td>1</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th><strong>TOTAL</strong></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      </thead>
      
  </table>
  
</div>
<script>
  $('#mainTable').editableTableWidget().numericInputExample().find('td');
  $('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
  window.prettyPrint && prettyPrint();
</script>
</body>
</html>

Create script.js

/* global $ */
/* this is an example for validation and change events */
$.fn.numericInputExample = function () {
 'use strict';
 var element = $(this),
  footer = element.find('tfoot tr'),
  dataRows = element.find('tbody tr'),
  initialTotal = function () {
   var column, total;
   for (column = 1; column < footer.children().size(); column++) {
    total = 0;
    dataRows.each(function () {
     var row = $(this);
     total += parseFloat(row.children().eq(column).text());
    });
    footer.children().eq(column).text(total);
   };
  };
 element.find('td').on('change', function (evt) {
  var cell = $(this),
   column = cell.index(),
   total = 0;
  if (column === 0) {
   return;
  }
  element.find('tbody tr').each(function () {
   var row = $(this);
   total += parseFloat(row.children().eq(column).text());
  });
  if (column === 1 && total > 5000) {
   $('.alert').show();
   return false; // changes can be rejected
  } else {
   $('.alert').hide();
   footer.children().eq(column).text(total);
  }
 }).on('validate', function (evt, value) {
  var cell = $(this),
   column = cell.index();
  if (column === 0) {
   return !!value && value.trim().length > 0;
  } else {
   return !isNaN(parseFloat(value)) && isFinite(value);
  }
 });
 initialTotal();
 return this;
};
$.fn.editableTableWidget = function (options) {
 'use strict';
 return $(this).each(function () {
  var buildDefaultOptions = function () {
    var opts = $.extend({}, $.fn.editableTableWidget.defaultOptions);
    opts.editor = opts.editor.clone();
    return opts;
   },
   activeOptions = $.extend(buildDefaultOptions(), options),
   ARROW_LEFT = 37, ARROW_UP = 38, ARROW_RIGHT = 39, ARROW_DOWN = 40, ENTER = 13, ESC = 27, TAB = 9,
   element = $(this),
   editor = activeOptions.editor.css('position', 'absolute').hide().appendTo(element.parent()),
   active,
   showEditor = function (select) {
    active = element.find('td:focus');
    if (active.length) {
     editor.val(active.text())
      .removeClass('error')
      .show()
      .offset(active.offset())
      .css(active.css(activeOptions.cloneProperties))
      .width(active.width())
      .height(active.height())
      .focus();
     if (select) {
      editor.select();
     }
    }
   },
   setActiveText = function () {
    var text = editor.val(),
     evt = $.Event('change'),
     originalContent;
    if (active.text() === text || editor.hasClass('error')) {
     return true;
    }
    originalContent = active.html();
    active.text(text).trigger(evt, text);
    if (evt.result === false) {
     active.html(originalContent);
    }
   },
   movement = function (element, keycode) {
    if (keycode === ARROW_RIGHT) {
     return element.next('td');
    } else if (keycode === ARROW_LEFT) {
     return element.prev('td');
    } else if (keycode === ARROW_UP) {
     return element.parent().prev().children().eq(element.index());
    } else if (keycode === ARROW_DOWN) {
     return element.parent().next().children().eq(element.index());
    }
    return [];
   };
  editor.blur(function () {
   setActiveText();
   editor.hide();
  }).keydown(function (e) {
   if (e.which === ENTER) {
    setActiveText();
    editor.hide();
    active.focus();
    e.preventDefault();
    e.stopPropagation();
   } else if (e.which === ESC) {
    editor.val(active.text());
    e.preventDefault();
    e.stopPropagation();
    editor.hide();
    active.focus();
   } else if (e.which === TAB) {
    active.focus();
   } else if (this.selectionEnd - this.selectionStart === this.value.length) {
    var possibleMove = movement(active, e.which);
    if (possibleMove.length > 0) {
     possibleMove.focus();
     e.preventDefault();
     e.stopPropagation();
    }
   }
  })
  .on('input paste', function () {
   var evt = $.Event('validate');
   active.trigger(evt, editor.val());
   if (evt.result === false) {
    editor.addClass('error');
   } else {
    editor.removeClass('error');
   }
  });
  element.on('click keypress dblclick', showEditor)
  .css('cursor', 'pointer')
  .keydown(function (e) {
   var prevent = true,
    possibleMove = movement($(e.target), e.which);
   if (possibleMove.length > 0) {
    possibleMove.focus();
   } else if (e.which === ENTER) {
    showEditor(false);
   } else if (e.which === 17 || e.which === 91 || e.which === 93) {
    showEditor(true);
    prevent = false;
   } else {
    prevent = false;
   }
   if (prevent) {
    e.stopPropagation();
    e.preventDefault();
   }
  });

element.find('td').prop('tabindex', 1);

$(window).on('resize', function () {
   if (editor.is(':visible')) {
    editor.offset(active.offset())
    .width(active.width())
    .height(active.height());
   }
  });
 });

};
$.fn.editableTableWidget.defaultOptions = {
 cloneProperties: ['padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right',
       'text-align', 'font', 'font-size', 'font-family', 'font-weight',
       'border', 'border-top', 'border-bottom', 'border-left', 'border-right'],
 editor: $('<input>')
};

Javascript Upload and Display Image

Create Only index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Upload image and Display</title>
<style>
body {
 background:#333;
}
</style>
</head>
<body>
<script type='text/javascript'>

function main()
{
    var inputFileToLoad = document.createElement("input");
    inputFileToLoad.type = "file";
    inputFileToLoad.id = "inputFileToLoad";
    document.body.appendChild(inputFileToLoad);

var buttonLoadFile = document.createElement("button");
    buttonLoadFile.onclick = loadImageFileAsURL;
    buttonLoadFile.textContent = "Load Selected File";
    document.body.appendChild(buttonLoadFile);
}

function loadImageFileAsURL()
{
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
    {
        var fileToLoad = filesSelected[0];

if (fileToLoad.type.match(".*"))
        {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
            {
                var imageLoaded = document.createElement("img");
    imageLoaded.src = fileLoadedEvent.target.result;
                document.body.appendChild(imageLoaded);
    
            };
            fileReader.readAsDataURL(fileToLoad);
        }
    }
}

main();

</script>
</body>
</html>

Print Specific Div Block

Create Only index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Print Specific Div Block</title>
<script>
function printContent(el){
 var restorepage = document.body.innerHTML;
 var printcontent = document.getElementById(el).innerHTML;
 document.body.innerHTML = printcontent;
 window.print();
 document.body.innerHTML = restorepage;
}
</script>

<style>
body {
 background:#333;
}
.main_wrapper {
 padding:20px;
 margin:auto;
 overflow:auto;
 background:#A2A2A2;
}
.main_container {
 padding:10px;
 background:#ccc;
 margin:auto;
 overflow:auto;
}
h3 {
 text-align:center;
 color:#FFFFFF;
}
</style>
</head>
<body>
<h3>Print Specific Div Block</h3>
<div id="div1" class="main_container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<button onClick="printContent('div1')">Print Block1</button>
<div id="div2" class="main_container">
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
</div>
<button onClick="printContent('div2')">Print Block2</button>
<p id="p1" class="main_container"> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
<button onClick="printContent('p1')">Print Block3</button>
</body>
</html>

Editable Table

Create Only index.html

Just double click on td and you can edit as well as enter to save

click on clone and make copy of the same table

click on print and get print copy of your table/page as pdf

click on reset it will refresh your page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Editable table with jQuery</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
 $("td").dblclick(function () { 
 var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) { if (e.which == 13) { var newContent = $(this).val(); 
$(this).parent().text(newContent); 
$(this).parent().removeClass("cellEditing"); } });
$(this).children().first().blur(function(){ $(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing"); 
});
}); 
});
</script>
<style>
.smallBox {
 float: left;
 margin: 10px;
 padding: 10px;
 width: 79%;
 background:#ddd;
}
.smallBox2 {
 float: right;
 margin: 10px;
 padding: 10px;
 width: 79%;
 background:#ccc;
}
.button_container {
}
body {
 background:#333;
}
.main_wrapper {
 margin:auto;
 padding:20px;
 background:#eee;
 overflow:auto;
}
.table_container {
 padding:10px;
 float:left;
 width:40%;
 margin:10px;
}
.mybutton {
 background: #1b1b1b;
 border: 1px solid #333;
 box-shadow: 1px 1px 1px 1px #000;
 color: #fff;
 cursor: pointer;
 float: left;
 margin: 10px;
 padding: 2px 27px;
 text-align: center;
}
.editableTable {
 border:solid 1px;
 width:100%
}
.editableTable td {
 border:solid 1px;
}
.editableTable .cellEditing {
 padding: 0;
}
.editableTable .cellEditing input[type=text] {
 width:100%;
 border:0;
 background-color:#0099FF;
 color:#fff;
}
</style>
</head>
<body>
<div class="main_wrapper">
  <h3> Editable Table</h3>
  <p>Just double click on td and you can edit as well as enter to save</p>
  <p>click on clone and make copy of the same table</p>
  <p>click on print and get print copy of your table/page as pdf</p>
  <p>click on reset it will refresh your page</p>
  <div class="table_container">
    <div class="button_container">
      <div class="mybutton" id="cloneButton1">Clone</div>
      <div class="mybutton" onClick="myFunction()" id="pr">Print</div>
      <div class="mybutton"  id="reset">Reset</div>
    </div>
    
    <div class="smallBox">
      <table class="editableTable">
        <thead>
          <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Ram Kumar</td>
            <td>ram.ku@gmail.com</td>
            <td>(91) 9999-8888</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Shyam Kumar</td>
            <td>shyam.gk@gmail.com</td>
            <td>(91) 8787-8686</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Mohan Kumar</td>
            <td>mohan.yk@gmail.com</td>
            <td>(91) 3232-3232</td>
          </tr>
        </tbody>
      </table>
    </div>
    
  </div>
  
</div>

<script type="text/javascript">
 
    $("#reset").click(function () {
   location.reload();
    });
 
    $("#cloneButton1").click(function () {
  
   $('.smallBox').clone().insertAfter(".smallBox");
   
    });
 function myFunction() {
    window.print();
}

$("#pr").click(function(){
        $(".button_container").hide();
    });
    
 </script>
</body>
</html>

Tuesday, 14 July 2015

page redirection using javascript

Create index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<p align="center"><strong><font face="Arial"><big>Please wait 5 seconds before being redirected<br>
  To the Main Page</big></font></strong></p>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 100%;
      margin: auto;
  }
  </style>
<script>

//specify redirect url
var redirecturl="scroll.html" // here you can add redirection page.
//specify pause duration before redirection (in seconds)
var pausefor=5

//DONE EDITING

function postaction(){
if (window.timer){
clearInterval(timer)
clearInterval(timer_2)
}
window.location=redirecturl
}
setTimeout("postaction()",pausefor*1000)

</script>
<!--[if IE]>

<!--

// this script was originally authored by william kemper.  I have no homepage.
var switchm=new Array
switchm[0]="ffaa00";
switchm[1]="ffff00";
switchm[2]="00ff00";
switchm[3]="0099ff";
switchm[4]="ff0000";
switchm[5]="ff00ff";
// if you want to add more colors go ahead, all the for limits are based on array length so
// you shouldn't need to change any of the code, just add more colors.

i=0
j=0
function STROBE()
{
if (j>increment.length-1)
 {
 j=0
 i++
  if (i>switchm.length-1)
  {
  i=0
  }
 }
document.all.increment[j].filters.blendTrans.apply()
document.all.increment[j].bgColor=switchm[i]
document.all.increment[j].filters.blendTrans.play()
j++
}
timer=setInterval("STROBE()",20) // change the number to effect the speed of the loadbar.
timer_2=setInterval("REVEAL()",20)
function REVEAL()
 {
 if (document.images[0].complete)
  {
  clearInterval(timer)
  clearInterval(timer_2)
  document.all.loadbar.style.visibility="hidden";
  document.all.content.style.visibility="visible";
  }
 }
// i don't know how to put comments in the css, but change duration to  effect the speed of the fade effect.

//-->
<style>

</style>

<!--[if IE]>

<div id=loadbar 
style=position:absolute;top:expression(document.body.clientHeight/2-100);left:expression(document.body.clientWidth/2-50)>
<table cellspacing=0 cellpadding=0 width=100><tr><td 
colspan=10><b>Loading...</b></td></tr><tr>
<script language="JavaScript">


<div class="main-new-wrapper">
  <div class="container"> <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
      </ol>
      
      <div class="carousel-inner" role="listbox">
        <div class="item active"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="Chania" width="460" height="345">
          <div class="carousel-caption">
            <h3>ADD</h3>
            <p>Advertisement</p>
          </div>
        </div>
        <div class="item"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="Chania" width="460" height="345">
          <div class="carousel-caption">
            <h3>ADD</h3>
            <p>Advertisement</p>
          </div>
        </div>
      </div>
      
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
  </div>
</div>
</body>
</html>

Monday, 13 July 2015

jQuery simple Next-Previous slider

Create index.html

<html>
<head>
<title>jQuery simple Next-Previous slider</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<style>
div {
 width: 50px;
 height: 80px;
 margin: 10px;
 float: left;
 border: 1px black solid;
 padding: 3px;/*overflow:hidden;*/
  }
.next1 {
 background:#0066FF;
 text-align:center;
 padding:10px;
 float:left;
 cursor:pointer;
}
.prev1 {
 background:#0066FF;
 text-align:center;
 padding:10px;
 float:left;
 cursor:pointer;
}
.mynew {
 height:100px;
 width:100px;
 margin:auto;
 background:#ddd;
}
.ref {
 height: 100px;
 margin: 0;
 padding: 0;
 width: 100px;
 display:none;
}
</style>
</head>
<body>
<p>click next to see the image</p>
<p>click prev to see previous image</p>
<span class="next1">Next</span>
<div class="mynew">
  <div id="start" class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/event_1.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/12/jquery-plugins-1024x512.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider1.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/fullwidthlider.com/images/slider3.png" height="100" width="100"></div>
  <div class="ref"><img src="http://curdweb.com/navin/responsive/images/slider2.jpg" height="100" width="100"></div>
  <div id="end" class="ref"><img src="http://curdweb.com/navin/responsive/images/slider4.jpg" height="100" width="100"></div>
</div>
<span class="prev1">Prev</span>
<script>
var divc=$('.mynew');
var count=$('.mynew .ref').length;
var lelechacha=".mynew .ref:eq("+ (count-1) +")";
var $currPrevDiv   =$(lelechacha);

var $currDiv   =$('.mynew .ref:eq(0)');
$currDiv.css( "background", "" );
$currDiv .css( "background", "#333" );

var myFirstDiv=$currDiv;
var myLastDiv=$currPrevDiv;
 $currDiv.removeAttr('hidden');
$( ".next1" ).click(function() {
if(myLastDiv.attr('id')==$currDiv.attr('id')){
return;
}
  $currDiv  = $currDiv .next(); 
  $( ".mynew > div" ).css('display','none');
 
   $currDiv.css('display','block');
  $( "div" ).css( "background", "" );
  $currDiv .css( "background", "#333" );

});
 $( ".prev1" ).click(function() {
if(myFirstDiv.attr('id')==$currDiv.attr('id')){
return;
}
  $currPrevDiv  = $currDiv .prev();
  $( ".mynew > div" ).css('display','none');
 
   $currDiv.css('display','block');
    $currDiv  = $currPrevDiv;
  $( "div" ).css( "background", "" );
  $currPrevDiv .css( "background", "#333" );
 
  });
</script>
</body>
</html>