Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Thursday, October 4

Textbox allows only numbers: javascript



//Html/ Jsp textbox which only allow numbers
//only numbers allowed in textbox

function numbersOnly(myfield, e)
      {
            var key;
            var keychar;
            if (window.event)
              key = window.event.keyCode;
            else if (e)
              key = e.which;
            else
              return true;
            keychar = String.fromCharCode(key);
           
            // control keys
            if ((key==null) || (key==0) || (key==8) ||
               (key==9) || (key==13) || (key==27) )
              return true;
           
            // numbers
            else if ((("0123456789.").indexOf(keychar) > -1))
              return true;
            // decimal point jump
            else
              return false;
   }

// JSP code 

use the above javascript function @ onKeyPress event like below


<s:textfield name="textbox1" id=" textbox1" maxlength="20" onkeypress="return numbersOnly(this, event);" />

// <s:textfield> is a struts tag. Html <input> tag can also be used.

Check textbox for email format : javascript



-- Check html/ jsp textbox for email address format  --


//Use this function in javascript.
//Call the function @ textbox onChange event

function checkemail(email,errorMail)
      {          
            var testresults;
            var str=document.getElementById(email).value;
            var filter=/^.+@.+\..{2,3}$/;
            if (filter.test(str)){
                 document.getElementById(errorMail).style.display="none";
                 testresults=true;
            }
            else
            {    
                  document.getElementById(errorMail).style.display="block";
                  testresults=false;
            }
            return testresults;
}

Wednesday, October 3

Animate web buttons (zoom in zoom out)

Exactly not an animation. Use this javascript code to zoom in zoom out buttons on mouse hover.

--- Below is Javascript code ---



function buttonZoom(id){
      var x = Number(document.getElementById(id).width);
      for(var i=x; i<=Number(x+20); i++){
            document.getElementById(id).width = Number(i);
      }
    }
   
    function buttonZoomOut(id){
      var x = Number(document.getElementById(id).width);
      for(var i=x; i>=Number(x-20); i--){
            document.getElementById(id).width = Number(i);
      }
    }


----- Below is JSP Code ---

<embed id="button" type="image/svg+xml" src="" onclick="as();"
onmouseover="buttonZoom(this.id);" onmouseout="buttonZoomOut(this.id);" width="60"/>

Note: Specifying width in jsp embed tag is necessary

Wednesday, September 26

Create custom calendar on JSP with java script

Code on Jsp File:

<script language="JavaScript" type="text/javascript" src="js/calendar.js"></script>


<table id="calenderTable" style="display:none">
     <tbody id="calenderTableHead">
      <tr>
       <td colspan="4" align="center">
           <select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,this.selectedIndex, false));" id="selectMonth">
           <option value="0">Jan</option><option value="1">Feb</option><option value="2">Mar</option>
             <option value="3">Apr</option><option value="4">May</option><option value="5">Jun</option>
             <option value="6">Jul</option><option value="7">Aug</option><option value="8">Sep</option>
             <option value="9">Oct</option><option value="10">Nov</option><option value="11">Dec</option>
           </select>
         </td>
       <td colspan="2" align="center">
          <select onChange="showCalenderBody(createCalender(this.value,document.getElementById('selectMonth').selectedIndex, false));" id="selectYear"></select>
       </td>
       <td align="center"><a href="#" onClick="closeCalender();"><font color="#ffffff" size="+1">X</font></a></td>
      </tr>
     </tbody>
     <tbody id="calenderTableDays">
      <tr style="">
       <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
      </tr>
     </tbody>
     <tbody id="calender"></tbody>
    </table>



 JS File Code: calendar.js

  //alert("Calendar_us.js included");
  // Array of max days in month in a year and in a leap year
monthMaxDays      = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];

function getRealYear(dateObj)
{
      return (dateObj.getYear() % 100) +
         (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}

function getDaysPerMonth(month, year)
{
      /*
      Check for leap year. These are some conditions
        to check year is leap year or not...
      1.Years evenly divisible by four are normally
          leap years, except for...
      2.Years also evenly divisible by 100 are not
          leap years, except for...
      3.Years also evenly divisible by 400 are
          leap years. */
      if ((year % 4) == 0)
      {
            if ((year % 100) == 0 && (year % 400) != 0)
                  return monthMaxDays[month];
     

            return monthMaxDaysLeap[month];
      }
      else
            return monthMaxDays[month];
}

function createCalender(year, month, day)
{
       // current Date
      var curDate = new Date();
      var curDay = curDate.getDate();
      var curMonth = curDate.getMonth();
      var curYear = getRealYear(curDate)

       // if a date already exists, we calculate some values here
      if (!year)
      {
            var year = curYear;
            var month = curMonth;
      }

      var yearFound = 0;
      for (var i=0; i<document.getElementById('selectYear').options.length;
             i++)
      {
            if (document.getElementById('selectYear').options[i].value
                    == year)
            {
                  document.getElementById('selectYear').selectedIndex =
                        i;
                  yearFound = true;
                  break;
            }
      }
      if (!yearFound)
      {
            document.getElementById('selectYear').selectedIndex = 0;
            year = document.getElementById('selectYear').options[0].value;         
      }
      document.getElementById('selectMonth').selectedIndex = month;

       // first day of the month.
      var fristDayOfMonthObj = new Date(year, month, 1);
      var firstDayOfMonth = fristDayOfMonthObj.getDay();

      continu           = true;
      firstRow    = true;
      var x = 0;
      var d = 0;
      var trs = []
      var ti = 0;
      while (d <= getDaysPerMonth(month, year))
      {
            if (firstRow)
            {
                  trs[ti] = document.createElement("TR");
                  if (firstDayOfMonth > 0)
                  {
                        while (x < firstDayOfMonth)
                        {
                        trs[ti].appendChild(document.createElement
                                ("TD"));
                        x++;
                        }
                  }
                  firstRow = false;
                  var d = 1;
            }
            if (x % 7 == 0)
            {
                  ti++;
                  trs[ti] = document.createElement("TR");
            }
            if (day && d == day)
            {
                  var setID = 'calenderChoosenDay';
                  var styleClass = 'choosenDay';
                  var setTitle = 'this day is currently selected';
            }
            else if (d == curDay && month == curMonth && year == curYear)
            {
                  var setID = 'calenderToDay';
                  var styleClass = 'toDay';
                  var setTitle = 'this day today';
            }
            else
            {
                  var setID = false;
                  var styleClass = 'normalDay';
                  var setTitle = false;
            }
            var td = document.createElement("TD");
            td.className = styleClass;
            if (setID)
            {
                  td.id = setID;
            }
            if (setTitle)
            {
                  td.title = setTitle;
            }
            td.onmouseover = new Function('highLiteDay(this)');
            td.onmouseout = new Function('deHighLiteDay(this)');
            if (targetEl)
                  td.onclick = new Function(
                           'pickDate('+year+', '+month+', '+d+')'
                           );
            else
                  td.style.cursor = 'default';
            td.appendChild(document.createTextNode(d));
            trs[ti].appendChild(td);
            x++;
            d++;
      }
      return trs;
}
//added by chandrima
function setDuplicateTarget(tgtEl){
      duplicate_targetEl = document.getElementById(tgtEl);
}

function showCalender(elPos, tgtEl)
{
     
      targetEl = false;

      if (document.getElementById(tgtEl))
      {
            targetEl = document.getElementById(tgtEl);
      }
      else
      {
            if (document.forms[0].elements[tgtEl])
            {
                  targetEl = document.forms[0].elements[tgtEl];
            }
      }
      var calTable = document.getElementById('calenderTable');

      var positions = [0,0];
      var positions = getParentOffset(elPos, positions);   
      calTable.style.left = positions[0]+'px';       
      calTable.style.top = positions[1]+'px';              

      calTable.style.display='block';

      var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
      var m = matchDate.exec(targetEl.value);
      if (m == null)
      {
            trs = createCalender(false, false, false);
            showCalenderBody(trs);
      }
      else
      {
            if (m[1].substr(0, 1) == 0)
                  m[1] = m[1].substr(1, 1);
            if (m[2].substr(0, 1) == 0)
                  m[2] = m[2].substr(1, 1);
            m[2] = m[2] - 1;
            trs = createCalender(m[3], m[2], m[1]);
            showCalenderBody(trs);
      }

      hideSelect(document.body, 1);
}
function showCalenderBody(trs)
{
      var calTBody = document.getElementById('calender');
      while (calTBody.childNodes[0])
      {
            calTBody.removeChild(calTBody.childNodes[0]);
      }
      for (var i in trs)
      {
            calTBody.appendChild(trs[i]);
      }
}
function setYears(sy, ey)
{
     
       // current Date
      var curDate = new Date();
      var curYear = getRealYear(curDate);
      if (sy)
            startYear = curYear;
      if (ey)
            endYear = curYear;
      document.getElementById('selectYear').options.length = 0;
      var j = 0;
      for (y=ey; y>=sy; y--)
      {
      document.getElementById('selectYear')[j++] = new Option(y, y);
      }
}
function hideSelect(el, superTotal)
{
      if (superTotal >= 100)
      {
            return;
      }

      var totalChilds = el.childNodes.length;
      for (var c=0; c<totalChilds; c++)
      {
            var thisTag = el.childNodes[c];
            if (thisTag.tagName == 'SELECT')
            {
            if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
            {
            var calenderEl = document.getElementById('calenderTable');
            var positions = [0,0];
            var positions = getParentOffset(thisTag, positions);  // nieuw
            var thisLeft      = positions[0];
            var thisRight     = positions[0] + thisTag.offsetWidth;
            var thisTop = positions[1];
            var thisBottom    = positions[1] + thisTag.offsetHeight;
            var calLeft = calenderEl.offsetLeft;
            var calRight      = calenderEl.offsetLeft + calenderEl.offsetWidth;
            var calTop  = calenderEl.offsetTop;
            var calBottom     = calenderEl.offsetTop + calenderEl.offsetHeight;

            if (
            (
            // check if it overlaps horizontally
            (thisLeft >= calLeft && thisLeft <= calRight)
            ||
            (thisRight <= calRight && thisRight >= calLeft)
            ||
            (thisLeft <= calLeft && thisRight >= calRight)
            )
            &&
            (
            // check if it overlaps vertically
            (thisTop >= calTop && thisTop <= calBottom)
            ||
            (thisBottom <= calBottom && thisBottom >= calTop)
            ||
            (thisTop <= calTop && thisBottom >= calBottom)
            )
            )
            {
            hideSelectTags[hideSelectTags.length] = thisTag;
            thisTag.style.display = 'none';
            }
            }

            }
            else if(thisTag.childNodes.length > 0)
            {
                  hideSelect(thisTag, (superTotal+1));
            }
      }
}
function closeCalender()
{
      for (var i=0; i<hideSelectTags.length; i++)
      {
            hideSelectTags[i].style.display = 'block';
      }
      hideSelectTags.length = 0;
      document.getElementById('calenderTable').style.display='none';
}
function highLiteDay(el)
{
      el.className = 'hlDay';
}
function deHighLiteDay(el)
{
      if (el.id == 'calenderToDay')
            el.className = 'toDay';
      else if (el.id == 'calenderChoosenDay')
            el.className = 'choosenDay';
      else
            el.className = 'normalDay';
}
function pickDate(year, month, day)
{
      month++;
      day   = day < 10 ? '0'+day : day;
      month = month < 10 ? '0'+month : month;
    var  monthnames =  new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
      if (!targetEl)
      {
            alert('target for date is not set yet');
      }
      else
      {
            //added by ankit
             if(typeof(duplicate_targetEl)!="undefined"){
                  duplicate_targetEl.value= month+'/'+day+'/'+year;
            }
     
            month = monthnames[month-1];
            targetEl.value= day+'-'+month+'-'+year;
            closeCalender();
      }
}

function getParentOffset(el, positions)
{
      positions[0] += el.offsetLeft;
      positions[1] += el.offsetTop;
      if (el.offsetParent)
        positions = getParentOffset(el.offsetParent, positions);
      return positions;
}

function IsDateGreater(DateValue1, DateValue2)
{

var DaysDiff;
Date1 = new Date(DateValue1);
Date2 = new Date(DateValue2);
DaysDiff = Math.floor((Date1.getTime() - Date2.getTime())/(1000*60*60*24));
if(DaysDiff > 0)
return true;
else
return false;
}

//same cfunction just making it to be within the boundaries of table
function showCalenderForAccrualEndDate(elPos, tgtEl)
{
     
      targetEl = false;

      if (document.getElementById(tgtEl))
      {
            targetEl = document.getElementById(tgtEl);
      }
      else
      {
            if (document.forms[0].elements[tgtEl])
            {
                  targetEl = document.forms[0].elements[tgtEl];
            }
      }
      var calTable = document.getElementById('calenderTable');

      var positions = [0,0];
      var positions = getParentOffset(elPos, positions);   
      calTable.style.left = (positions[0]-150)+'px';       
      calTable.style.top = (positions[1]+18)+'px';               
     
      calTable.style.display='block';

      var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
      var m = matchDate.exec(targetEl.value);
      if (m == null)
      {
            trs = createCalender(false, false, false);
            showCalenderBody(trs);
      }
      else
      {
            if (m[1].substr(0, 1) == 0)
                  m[1] = m[1].substr(1, 1);
            if (m[2].substr(0, 1) == 0)
                  m[2] = m[2].substr(1, 1);
            m[2] = m[2] - 1;
            trs = createCalender(m[3], m[2], m[1]);
            showCalenderBody(trs);
      }

      hideSelect(document.body, 1);
}
  

Now you can make Calendar like this:

<a href="#" onclick="setYears(2000,2020);showCalender(this,'fromDate');"><img src="images/calender.gif" align="middle" border="0" /></a></li>

<s:textfield name="fromDate" id="fromDate" readonly="true" onclick="javascript:alert('Please click on the Calendar Icon.');" value="%{fromDateValue}" cssClass="date_box" theme="simple" />

<a href="#" onclick="setYears(2000,2020);showCalender(this,'toDate');"><img src="images/calender.gif" align="middle" border="0" /></a>

<s:textfield name="toDate" readonly="true" id="toDate" onclick="javascript:alert('Please click on the Calendar Icon.');" value="%{toDateValue}"  cssClass="date_box" theme="simple" />

CSS:

.date_box {
      border: 1px solid #d4d1ca;
      font-size: 11px;
      color: #333333;
      width: 62px;
}
.date_box_small {
      border: 1px solid #d4d1ca;
      font-size: 11px;
      color: #333333;
      width: 50px;
}