Datepicker format (dd/mm/yy) clears when clicked

Datepicker formats produces unpredictable results. You wanted the date format as dd/mm/yy like for example 01/06/2016 1st June 2016 (not 6th January 2016). Here's a simple solution.

First, set the header code below:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Then your HTML:

<input type="text" class="datepicker" name="bdate" id="bdate" value="">

Lastly, your javascript:

<script type="text/javascript"> 
   $(document).ready(function(){

var val = $('#bdate').val();
$('#bdate').datepicker("option", "dateFormat", 'dd/mm/yy');
        $('#bdate').datepicker( "setDate", val); 



});

That's it.

Goodluck.

A simple Auto Open Dialog box

Hi All!

Here's a simple dialog box that auto opens when page is loaded.

Add code below in your header page:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Then, create your HTML like below:

<div id="renewalNotice" style="display: none;">
<div id="notice">
        <span class="daysLeft" >5</span>
           
            <span class="kDetails">
            Company<br />
Address<br />
Phone<br />
Email<a href="mailto:email@domain.com" style="color: #fff;">email@domain.com</a>
            </span>
        </div>
    </div>

Lastly, add our JQuery code:

jQuery('#renewalNotice').dialog({ width: 518, title: 'Important Notice', autoOpen: true, draggable: false, modal: true, resizable: false, stack: false });

That's it.

Goodluck!

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!