How to add Datepicker in your Page and in a dynamically added textboxes.

Hi All!

Here's how to make datepicker in your textbox.

First add code below in your header:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Then add datepicker class in your texbox:
<input type="text" class="datepicker">

Then add code below in your script:
<script type="text/javascript">
   $(document).ready(function(){
        $(".datepicker").datepicker();
});

That's it. Datepicker should be showing.

But when adding textboxes dynamically, Here's how.

Make sure you added the headers above.
Create a div for your new textboxes and a button for adding function.
<div id="boxes">
</div>
<button Onclick="AddTextbox()">Add Textbox</button>

Then add code below in your script:

<script type="text/javascript">
$(document).ready(function(){
 
$("#boxes").delegate(".datepicker", "focusin", function () {
    $(this).datepicker();
});
});

function AddTextbox() {
        var txt= document.createElement("input");
         txt.type="text";
         txt.className = "datepicker";
         var div = document.getElementById('boxes');
    div.appendChild(txt);
}
</script>

And if you want to change the date format, add this line after $(this).datepicker();

$(this).datepicker("option", "dateFormat", "dd/mm/yy");

That's it.

Goodluck.

How to Add Tables in a Div Dynamically in Javascript

Hi All!

Here's how to add Tables dynamically in your page. First is to make a DIV for your tables and button for adding tables.

<div id="tables">
</div>

<button onClick="AddTab();">Add Table</button>

Then write below code in your script.

<script type="text/javascript">
function addTab(val) {
var table = document.createElement('table');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = 'Hi';

var div = document.getElementById('tables');
    div.appendChild(table);
</script>

And That's it.

Goodluck.

How to Add Cells of a Table through Javascript

Hi All!

Having problems in adding table cells dynamically?. Here's how.

Create your table and button for adding cells.

<table id="myTable">
           <tr>
          <td><strong>Title</strong></td>
          </tr>
</table>

<button onClick="AddCell()">Add Cell</button>

Then write the code below in your JavaScript script:

 function addCell() {
                var rowCount = document.getElementById('myTable').rows.length;
var table = document.getElementById("myTable");
var row = table.insertRow(rowCount);
                var cell1 = row.insertCell(0);
                 cell1.innerHTML = '<strong>Title</strong>';

}

And that's it.

You can also add class or id of the row by adding:
 row.id = 1
row.className = "class"

Or if your adding textboxes or any other form elements you can write:
cell1.innerHTML = '<input type="text" value="">';
cell1.innerHTML = '<select name="select1"><option value="Hi">Hi</option></select>';

Hope That helps!

Goodluck.

Scroll bar won't show on touch devices

I have this program using tabs jquery with a css overflow:scroll. It shows in PC but not in touch devices such as IPAD.

And what I just did is to add the css code below:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
And it works.

Hope this helps!

Draggable for PC and Touch devices

Creating draggables that works on PC and other devices. JQuery UI does not support the use of touch events when using touch devices, drag won't work. Now I found this plug-in to listen on touch events—touchstart, touchmove and touchend. 3 steps is all you need:

1. Save below as jquery.ui.touch-punch.min.js :

 /*
 * jQuery UI Touch Punch 0.2.2
 *
 * Copyright 2011, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
(function(b){b.support.touch="ontouchend" in document;if(!b.support.touch){return;}var c=b.ui.mouse.prototype,e=c._mouseInit,a;function d(g,h){if(g.originalEvent.touches.length>1){return;}g.preventDefault();var i=g.originalEvent.changedTouches[0],f=document.createEvent("MouseEvents");f.initMouseEvent(h,true,true,window,1,i.screenX,i.screenY,i.clientX,i.clientY,false,false,false,false,0,null);g.target.dispatchEvent(f);}c._touchStart=function(g){var f=this;if(a||!f._mouseCapture(g.originalEvent.changedTouches[0])){return;}a=true;f._touchMoved=false;d(g,"mouseover");d(g,"mousemove");d(g,"mousedown");};c._touchMove=function(f){if(!a){return;}this._touchMoved=true;d(f,"mousemove");};c._touchEnd=function(f){if(!a){return;}d(f,"mouseup");d(f,"mouseout");if(!this._touchMoved){d(f,"click");}a=false;};c._mouseInit=function(){var f=this;f.element.bind("touchstart",b.proxy(f,"_touchStart")).bind("touchmove",b.proxy(f,"_touchMove")).bind("touchend",b.proxy(f,"_touchEnd"));e.call(f);};})(jQuery);
 
        2. Include jQuery and jQuery UI on your page then the file we made.

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>

<script src="jquery.ui.touch-punch.min.js"></script>

  3. Use jQuery UI and watch it work.

<script>$('#widget').draggable();</script>

Hope it hepls!

How to add a simple WYSIWYG editor (Web text editor)

I've been looking for a free editor and this is the simplest I got. Download fckeditor and place it to your site directory. Include the following to your code:

<?php
include("../fckeditor/fckeditor.php");

$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = 'fckeditor/' ;
$oFCKeditor->Value      = $_POST["respond"] ;
$oFCKeditor->Create() ;
?>

Where $_POST["respond"] is your variable. And that's it.

Hope this helps.

How to download your report as Excel

First, is to download PHPExcel Library and place it to your site directory. Open the file and see the examples folder. From there, you can edit the details and set your preferences. See more details below:

Requirements
------------

The following requirements should be met prior to using PHPExcel:
* PHP version 5.2.0 or higher
* PHP extension php_zip enabled *)
* PHP extension php_xml enabled
* PHP extension php_gd2 enabled (if not compiled in)

*) php_zip is only needed by PHPExcel_Reader_Excel2007, PHPExcel_Writer_Excel2007,
   PHPExcel_Reader_OOCalc. In other words, if you need PHPExcel to handle .xlsx or .ods
   files you will need the zip extension, but otherwise not.



Installation instructions
-------------------------

Installation is quite easy: copy the contents of the Classes folder to any location
in your application required.

Example:

If your web root folder is /var/www/ you may want to create a subfolder called
/var/www/Classes/ and copy the files into that folder so you end up with files:

/var/www/Classes/PHPExcel.php
/var/www/Classes/PHPExcel/Calculation.php
/var/www/Classes/PHPExcel/Cell.php
...



Getting started
---------------

A good way to get started is to run some of the tests included in the download.
Copy the "Examples" folder next to your "Classes" folder from above so you end up with:

/var/www/Examples/01simple.php
/var/www/Examples/02types.php
...

Start running the test by pointing your browser to the test scripts:

http://example.com/Examples/01simple.php
http://example.com/Examples/02types.php
...

Note: It may be necessary to modify the include/require statements at the beginning of
each of the test scripts if your "Classes" folder from above is named differently.