HTML Tips #1

Link to jump to specific part of page

Simple anchor tag can be used to jump to specific part the page.

<a id="INSERT_YOUR_OBJECT_NAME_HERE">
<a href="#INSERT_YOUR_OBJECT_NAME_HERE">The object you want to link to.</a>

We can do it with jquery also

<a id="tab_jumps"></a>
<a href="#tab_jumps" id="tab_jump"></a>
 type="text/javascript">
$(function(){
	$('#Button').click(function(){
		window.location = $('#tab_jump').attr('href');
	});
});

 

Happy Coding!!!

jQuery Datepicker

Using jQuery Datepicker

Simple method to link datepicker to input box

$('.datepicker_open').datepicker({})

This example shows where you want set minimum date from another date picker. For example from and to date and to date will be 14 days from the From date

HTML

<label for="from">Repay Date</label>
<input type="text" id="repay" name="repay" />
<label for="to">Transfer Date</label>
<input type="text" id="transfer" name="transfer" />

Javascript

  $(function() {
 var dateToday = new Date();
 $( "#repay" ).datepicker({
 changeMonth: true , //change the month 
 changeYear:true , //change the year 
 minDate:dateToday,
 onSelect: function( selectedDate ) {
 $( "#transfer" ).datepicker( "option", "minDate", selectedDate );
 }
 });
 $( "#transfer" ).datepicker({ 
 changeMonth: true, 
 changeYear:true,
 minDate:dateToday,
 onSelect: function( selectedDate ) {
 $( "#repay" ).datepicker( "option", "minDate", selectedDate );
 }
 });
 });

Datepicker Properties

  1. .prop – for example if you want the date picker to be only readonly
$('.datepicker_open').datepicker({
 minDate: dateToday,
 dateFormat: 'dd/mm/yy',
 onSelect: function(selectedDate){ $j( ".datepicker_restrict" ).datepicker( "option", "minDate", selectedDate ); }
 }).prop('readonly', true);

Link to fiddle

Apply Themes

<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/themes/vader/jquery-ui.css" />
//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js

Trigger with the Icon Only

 $j("#calendar1").datepicker({ 
 datevFormat: 'dd/mm/yy',
 showOn: "button",
 buttonImage: "/images/basic_theme/calender_icon.jpg",
 buttonImageOnly: true,
 buttonText: "Select date"
 }).prop('readonly', true);

Setting Min and Max Dates

$j('.datepicker_open').datepicker({
    minDate:'-6m',
    maxDate:dateToday,
 });

minDate/MaxDate: m = month, d=day, Y= year

Show Icon

$j(function() {
 var dateToday = new Date();
 var limit = '__CAL_LIMIT__';
 $j('.datepicker_open').datepicker({
 showOn: "button",
 buttonImage: "calendar_r1_c1.png",
 buttonImageOnly: true,
 buttonText: "Select date",
 dateFormat: 'dd/mm/yy',
 minDate:limit,
 maxDate:dateToday,
 }).prop('readonly',true);
});

Happy coding!!!!

Mysql Tips #1: Change field order and insert

Change the field order 

Sometimes we want to change the field order without deleting and re-inserting.
ALTER TABLE `table_name` MODIFY `column_you_want_to_move` DATATYPE AFTER `column`

ALTER TABLE `investment_security` MODIFY `location` text AFTER `serial_number`;

If you want to move it to the first place then:

ALTER TABLE `investment_security` MODIFY `location` text FIRST;

 

Insert from one table into another

INSERT INTO new_table SELECT columns-in-new-order FROM old_table;

Happy coding!!!!!

CSS Tips #2

Hide section of html for print

A simple tip to hide a section of html content when printing the page. Can also you a css file to define the print content

@media print was introduced in CSS2 to support media types. When using the @media screen make sure not to include media type in stylesheet link.

Working sample here

<link rel="stylesheet" href="print.css" type="text/css" media="print" />
@media print {
       #hide_content {
          display: none;
        }
 }