Sunday 26 October 2014

jQuery Datepicker with 2 inputs and range restriction

Example here: Datepicker

Example of using jQuery Datepicker with 2 inputs and range restriction

   

Code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script src=""></script>
<title>Datepicker</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
label { margin: 5px 5px 0 10px; }
</style>


</head>
<body>
  <h2>Example of using jQuery Datepicker with 2 inputs and range restriction</h2>

  <label>Start Date:</label><input type="text" value="10/06/2014" id="txtStartDate"></input>
  &nbsp;&nbsp;&nbsp;
  <label>End Date:</label><input type="text" id="txtEndDate"></input>
<script>
jQuery(function() {
  jQuery('#txtStartDate, #txtEndDate').datepicker();

  jQuery('#txtStartDate, #txtEndDate').datepicker('option', {
    beforeShow: customRange
  });
});

function customRange(input) {

  if (input.id == 'txtEndDate') {
    return {

      minDate: jQuery('#txtStartDate').datepicker("getDate")
    };
  } else if (input.id == 'txtStartDate') {
    return {
      maxDate: jQuery('#txtEndDate').datepicker("getDate")
    };
  }
}
</script>


</body>
</html>
Posted by at No comments:

Thursday 4 September 2014

Get the current web page size of the screen and browser window


Properties:
screen.width screen.height screen.availWidth screen.availHeight screen.colorDepth screen.pixelDepth
If you are using jQuery, you can get the size of the window or the document using jQuery methods: $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document $(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document For screen size you can use the screen object in the following way: screen.height; screen.width;
A non-jQuery way to get the available screen dimension. window.screen.width/height has already been put up, but for responsive webdesign and completeness sake I think its worth to mention those attributes: alert(window.screen.availWidth); alert(window.screen.availHeight);

Posted by at No comments:

Wednesday 16 July 2014

multiple select box html css

Select multiple select box

example :
























code :

<p style="height: 100px; overflow: auto; border: 5px solid #eee; background: #eee; color: #000; margin-bottom: 1.5em;">
<label><input type="checkbox" name="items[]"> Best Practices</label><br>
<label><input type="checkbox" name="items[]"> Client Relationships</label><br>
<label><input type="checkbox" name="items[]" checked="checked"> Communications</label><br>
<label><input type="checkbox" name="items[]"> Compensation</label><br>
<label><input type="checkbox" name="items[]"> Contracts and Negotiations</label><br>
<label><input type="checkbox" name="items[]"> Design and Construction Marketplace</label><br>
<label><input type="checkbox" name="items[]"> Design/Build Project Delivery</label><br>
<label><input type="checkbox" name="items[]"> Education</label><br>
<label><input type="checkbox" name="items[]"> Financial Management and Profitability</label><br>
<label><input type="checkbox" name="items[]"> Global Marketplace</label><br>
<label><input type="checkbox" name="items[]"> Human Resources</label><br>
<label><input type="checkbox" name="items[]"> Intelligent Choices</label><br>
<label><input type="checkbox" name="items[]"> Leadership</label><br>
<label><input type="checkbox" name="items[]"> Management</label><br>
<label><input type="checkbox" name="items[]"> Marketing</label><br>
<label><input type="checkbox" name="items[]"> Mergers and Acquisitions</label><br>
<label><input type="checkbox" name="items[]"> Operations Management</label><br>
<label><input type="checkbox" name="items[]"> Public Relations</label><br>
<label><input type="checkbox" name="items[]"> Staff Recruitment and Retention</label><br>
<label><input type="checkbox" name="items[]"> Strategic Planning</label><br>
<label><input type="checkbox" name="items[]"> Strategy</label><br>
<label><input type="checkbox" name="items[]"> Sustainability</label><br>
<label><input type="checkbox" name="items[]" checked="checked"> Technology</label><br>
<label><input type="checkbox" name="items[]" checked="checked"> Trends</label>
</p>
refer this link for more : http://www.lessanvaezi.com/filter-select-list-options/
Posted by at No comments:
Subscribe to: Posts (Atom)