Hello, I have got no knowledge at all about javascript. This is the code to call a pop up window <a href="javascript:NewCal('demo3','ddmmmyyyy',true,24)">Calendar</a> PHP: it works perfect but if i am viewing another page and this pop up page is behind a page i am viewing, the pop up page does not come to top when i click on the link. i have to look for the pop up window on taskbar. what can i do to display this pop up when i click on the link. thanks
we'll need to have a closer look on NewCal() function. look inside your .js files for this function, and you'll probably see a call inside the function for window.open(). if you have something like: hWindow = window.open(...); Code (markup): then all you need to do is change it to: hWindow = window.open(..); hWindow.focus(); Code (markup): the window.open function returns the handle for the newly created window. once you have the handle, all you need to do is call its focus() function. if its something different, paste the code here, we'll have a go at it
hello, this is the full script //Javascript name: My Date Time Picker //Date created: 16-Nov-2003 23:19 //Scripter: TengYong Ng //Website: http://www.rainforestnet.com //Copyright (c) 2003 TengYong Ng //FileName: DateTimePicker.js //Version: 0.8 //Contact: contact@rainforestnet.com // Note: Permission given to use this script in ANY kind of applications if // header lines are left unchanged. //Global variables var winCal; var dtToday=new Date(); var Cal; var docCal; var MonthName=["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"]; var WeekDayName=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var exDateTime;//Existing Date and Time //Configurable parameters var cnTop="200";//top coordinate of calendar window. var cnLeft="500";//left coordinate of calendar window var WindowTitle ="DateTime Picker";//Date Time Picker title. var WeekChar=3;//number of character for week day. if 2 then Mo,Tu,We. if 3 then Mon,Tue,Wed. var CellWidth=20;//Width of day cell. var DateSeparator="-";//Date Separator, you can change it to "/" if you want. var TimeMode=24;//default TimeMode value. 12 or 24 var ShowLongMonth=true;//Show long month name in Calendar header. example: "January". var ShowMonthYear=true;//Show Month and Year in Calendar header. var MonthYearColor="#cc0033";//Font Color of Month and Year in Calendar header. var WeekHeadColor="#0099CC";//Background Color in Week header. var SundayColor="#6699FF";//Background color of Sunday. var SaturdayColor="#CCCCFF";//Background color of Saturday. var WeekDayColor="white";//Background color of weekdays. var FontColor="blue";//color of font in Calendar day cell. var TodayColor="#FFFF33";//Background color of today. var SelDateColor="#FFFF99";//Backgrond color of selected date in textbox. var YrSelColor="#cc0033";//color of font of Year selector. var ThemeBg="";//Background image of Calendar window. //end Configurable parameters //end Global variable function NewCal(pCtrl,pFormat,pShowTime,pTimeMode) { Cal=new Calendar(dtToday); if ((pShowTime!=null) && (pShowTime)) { Cal.ShowTime=true; if ((pTimeMode!=null) &&((pTimeMode=='12')||(pTimeMode=='24'))) { TimeMode=pTimeMode; } } if (pCtrl!=null) Cal.Ctrl=pCtrl; if (pFormat!=null) Cal.Format=pFormat.toUpperCase(); exDateTime=document.getElementById(pCtrl).value; if (exDateTime!="")//Parse Date String { var Sp1;//Index of Date Separator 1 var Sp2;//Index of Date Separator 2 var tSp1;//Index of Time Separator 1 var tSp1;//Index of Time Separator 2 var strMonth; var strDate; var strYear; var intMonth; var YearPattern; var strHour; var strMinute; var strSecond; //parse month Sp1=exDateTime.indexOf(DateSeparator,0) Sp2=exDateTime.indexOf(DateSeparator,(parseInt(Sp1)+1)); if ((Cal.Format.toUpperCase()=="DDMMYYYY") || (Cal.Format.toUpperCase()=="DDMMMYYYY")) { strMonth=exDateTime.substring(Sp1+1,Sp2); strDate=exDateTime.substring(0,Sp1); } else if ((Cal.Format.toUpperCase()=="MMDDYYYY") || (Cal.Format.toUpperCase()=="MMMDDYYYY")) { strMonth=exDateTime.substring(0,Sp1); strDate=exDateTime.substring(Sp1+1,Sp2); } if (isNaN(strMonth)) intMonth=Cal.GetMonthIndex(strMonth); else intMonth=parseInt(strMonth,10)-1; if ((parseInt(intMonth,10)>=0) && (parseInt(intMonth,10)<12)) Cal.Month=intMonth; //end parse month //parse Date if ((parseInt(strDate,10)<=Cal.GetMonDays()) && (parseInt(strDate,10)>=1)) Cal.Date=strDate; //end parse Date //parse year strYear=exDateTime.substring(Sp2+1,Sp2+5); YearPattern=/^\d{4}$/; if (YearPattern.test(strYear)) Cal.Year=parseInt(strYear,10); //end parse year //parse time if (Cal.ShowTime==true) { tSp1=exDateTime.indexOf(":",0) tSp2=exDateTime.indexOf(":",(parseInt(tSp1)+1)); strHour=exDateTime.substring(tSp1,(tSp1)-2); Cal.SetHour(strHour); strMinute=exDateTime.substring(tSp1+1,tSp2); Cal.SetMinute(strMinute); strSecond=exDateTime.substring(tSp2+1,tSp2+3); Cal.SetSecond(strSecond); } } winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=300,height=245,resizable=0,top="+cnTop+",left="+cnLeft); docCal=winCal.document; RenderCal(); } function RenderCal() { var vCalHeader; var vCalData; var vCalTime; var i; var j; var SelectStr; var vDayCount=0; var vFirstDay; docCal.open(); docCal.writeln("<html><head><title>"+WindowTitle+"</title>"); docCal.writeln("<script>var winMain=window.opener;</script>"); docCal.writeln("</head><body background='"+ThemeBg+"' link="+FontColor+" vlink="+FontColor+"><form name='Calendar'>"); vCalHeader="<table border=1 cellpadding=1 cellspacing=1 width='100%' align=\"center\" valign=\"top\">\n"; //Month Selector vCalHeader+="<tr>\n<td colspan='7'><table border=0 width='100%' cellpadding=0 cellspacing=0><tr><td align='left'>\n"; vCalHeader+="<select name=\"MonthSelector\" onChange=\"javascript:winMain.Cal.SwitchMth(this.selectedIndex);winMain.RenderCal();\">\n"; for (i=0;i<12;i++) { if (i==Cal.Month) SelectStr="Selected"; else SelectStr=""; vCalHeader+="<option "+SelectStr+" value >"+MonthName[i]+"\n"; } vCalHeader+="</select></td>"; //Year selector vCalHeader+="\n<td align='right'><a href=\"javascript:winMain.Cal.DecYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\"><</font></b></a><font face=\"Verdana\" color=\""+YrSelColor+"\" size=2><b> "+Cal.Year+" </b></font><a href=\"javascript:winMain.Cal.IncYear();winMain.RenderCal()\"><b><font color=\""+YrSelColor+"\">></font></b></a></td></tr></table></td>\n"; vCalHeader+="</tr>"; //Calendar header shows Month and Year if (ShowMonthYear) vCalHeader+="<tr><td colspan='7'><font face='Verdana' size='2' align='center' color='"+MonthYearColor+"'><b>"+Cal.GetMonthName(ShowLongMonth)+" "+Cal.Year+"</b></font></td></tr>\n"; //Week day header vCalHeader+="<tr bgcolor="+WeekHeadColor+">"; for (i=0;i<7;i++) { vCalHeader+="<td align='center'><font face='Verdana' size='2'>"+WeekDayName[i].substr(0,WeekChar)+"</font></td>"; } vCalHeader+="</tr>"; docCal.write(vCalHeader); //Calendar detail CalDate=new Date(Cal.Year,Cal.Month); CalDate.setDate(1); vFirstDay=CalDate.getDay(); vCalData="<tr>"; for (i=0;i<vFirstDay;i++) { vCalData=vCalData+GenCell(); vDayCount=vDayCount+1; } for (j=1;j<=Cal.GetMonDays();j++) { var strCell; vDayCount=vDayCount+1; if ((j==dtToday.getDate())&&(Cal.Month==dtToday.getMonth())&&(Cal.Year==dtToday.getFullYear())) strCell=GenCell(j,true,TodayColor);//Highlight today's date else { if (j==Cal.Date) { strCell=GenCell(j,true,SelDateColor); } else { if (vDayCount%7==0) strCell=GenCell(j,false,SaturdayColor); else if ((vDayCount+6)%7==0) strCell=GenCell(j,false,SundayColor); else strCell=GenCell(j,null,WeekDayColor); } } vCalData=vCalData+strCell; if((vDayCount%7==0)&&(j<Cal.GetMonDays())) { vCalData=vCalData+"</tr>\n<tr>"; } } docCal.writeln(vCalData); //Time picker if (Cal.ShowTime) { var showHour; showHour=Cal.getShowHour(); vCalTime="<tr>\n<td colspan='7' align='center'>"; vCalTime+="<input type='text' name='hour' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+showHour+" onchange=\"javascript:winMain.Cal.SetHour(this.value)\">"; vCalTime+=" : "; vCalTime+="<input type='text' name='minute' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Minutes+" onchange=\"javascript:winMain.Cal.SetMinute(this.value)\">"; vCalTime+=" : "; vCalTime+="<input type='text' name='second' maxlength=2 size=1 style=\"WIDTH: 22px\" value="+Cal.Seconds+" onchange=\"javascript:winMain.Cal.SetSecond(this.value)\">"; if (TimeMode==12) { var SelectAm =(parseInt(Cal.Hours,10)<12)? "Selected":""; var SelectPm =(parseInt(Cal.Hours,10)>=12)? "Selected":""; vCalTime+="<select name=\"ampm\" onchange=\"javascript:winMain.Cal.SetAmPm(this.options[this.selectedIndex].value);\">"; vCalTime+="<option "+SelectAm+" value=\"AM\">AM</option>"; vCalTime+="<option "+SelectPm+" value=\"PM\">PM<option>"; vCalTime+="</select>"; } vCalTime+="\n</td>\n</tr>"; docCal.write(vCalTime); } //end time picker docCal.writeln("\n</table>"); docCal.writeln("</form></body></html>"); docCal.close(); } function GenCell(pValue,pHighLight,pColor)//Generate table cell with value { var PValue; var PCellStr; var vColor; var vHLstr1;//HighLight string var vHlstr2; var vTimeStr; if (pValue==null) PValue=""; else PValue=pValue; if (pColor!=null) vColor="bgcolor=\""+pColor+"\""; else vColor=""; if ((pHighLight!=null)&&(pHighLight)) {vHLstr1="color='red'><b>";vHLstr2="</b>";} else {vHLstr1=">";vHLstr2="";} if (Cal.ShowTime) { vTimeStr="winMain.document.getElementById('"+Cal.Ctrl+"').value+=' '+"+"winMain.Cal.getShowHour()"+"+':'+"+"winMain.Cal.Minutes"+"+':'+"+"winMain.Cal.Seconds"; if (TimeMode==12) vTimeStr+="+' '+winMain.Cal.AMorPM"; } else vTimeStr=""; PCellStr="<td "+vColor+" width="+CellWidth+" align='center'><font face='verdana' size='2'"+vHLstr1+"<a href=\"javascript:winMain.document.getElementById('"+Cal.Ctrl+"').value='"+Cal.FormatDate(PValue)+"';"+vTimeStr+";window.close();\">"+PValue+"</a>"+vHLstr2+"</font></td>"; return PCellStr; } function Calendar(pDate,pCtrl) { //Properties this.Date=pDate.getDate();//selected date this.Month=pDate.getMonth();//selected month number this.Year=pDate.getFullYear();//selected year in 4 digits this.Hours=pDate.getHours(); if (pDate.getMinutes()<10) this.Minutes="0"+pDate.getMinutes(); else this.Minutes=pDate.getMinutes(); if (pDate.getSeconds()<10) this.Seconds="0"+pDate.getSeconds(); else this.Seconds=pDate.getSeconds(); this.MyWindow=winCal; this.Ctrl=pCtrl; this.Format="ddMMyyyy"; this.Separator=DateSeparator; this.ShowTime=false; if (pDate.getHours()<12) this.AMorPM="AM"; else this.AMorPM="PM"; } function GetMonthIndex(shortMonthName) { for (i=0;i<12;i++) { if (MonthName[i].substring(0,3).toUpperCase()==shortMonthName.toUpperCase()) { return i;} } } Calendar.prototype.GetMonthIndex=GetMonthIndex; function IncYear() { Cal.Year++;} Calendar.prototype.IncYear=IncYear; function DecYear() { Cal.Year--;} Calendar.prototype.DecYear=DecYear; function SwitchMth(intMth) { Cal.Month=intMth;} Calendar.prototype.SwitchMth=SwitchMth; function SetHour(intHour) { var MaxHour; var MinHour; if (TimeMode==24) { MaxHour=23;MinHour=0} else if (TimeMode==12) { MaxHour=12;MinHour=1} else alert("TimeMode can only be 12 or 24"); var HourExp=new RegExp("^\\d\\d$"); if (HourExp.test(intHour) && (parseInt(intHour,10)<=MaxHour) && (parseInt(intHour,10)>=MinHour)) { if ((TimeMode==12) && (Cal.AMorPM=="PM")) { if (parseInt(intHour,10)==12) Cal.Hours=12; else Cal.Hours=parseInt(intHour,10)+12; } else if ((TimeMode==12) && (Cal.AMorPM=="AM")) { if (intHour==12) intHour-=12; Cal.Hours=parseInt(intHour,10); } else if (TimeMode==24) Cal.Hours=parseInt(intHour,10); } } Calendar.prototype.SetHour=SetHour; function SetMinute(intMin) { var MinExp=new RegExp("^\\d\\d$"); if (MinExp.test(intMin) && (intMin<60)) Cal.Minutes=intMin; } Calendar.prototype.SetMinute=SetMinute; function SetSecond(intSec) { var SecExp=new RegExp("^\\d\\d$"); if (SecExp.test(intSec) && (intSec<60)) Cal.Seconds=intSec; } Calendar.prototype.SetSecond=SetSecond; function SetAmPm(pvalue) { this.AMorPM=pvalue; if (pvalue=="PM") { this.Hours=(parseInt(this.Hours,10))+12; if (this.Hours==24) this.Hours=12; } else if (pvalue=="AM") this.Hours-=12; } Calendar.prototype.SetAmPm=SetAmPm; function getShowHour() { var finalHour; if (TimeMode==12) { if (parseInt(this.Hours,10)==0) { this.AMorPM="AM"; finalHour=parseInt(this.Hours,10)+12; } else if (parseInt(this.Hours,10)==12) { this.AMorPM="PM"; finalHour=12; } else if (this.Hours>12) { this.AMorPM="PM"; if ((this.Hours-12)<10) finalHour="0"+((parseInt(this.Hours,10))-12); else finalHour=parseInt(this.Hours,10)-12; } else { this.AMorPM="AM"; if (this.Hours<10) finalHour="0"+parseInt(this.Hours,10); else finalHour=this.Hours; } } else if (TimeMode==24) { if (this.Hours<10) finalHour="0"+parseInt(this.Hours,10); else finalHour=this.Hours; } return finalHour; } Calendar.prototype.getShowHour=getShowHour; function GetMonthName(IsLong) { var Month=MonthName[this.Month]; if (IsLong) return Month; else return Month.substr(0,3); } Calendar.prototype.GetMonthName=GetMonthName; function GetMonDays()//Get number of days in a month { var DaysInMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; if (this.IsLeapYear()) { DaysInMonth[1]=29; } return DaysInMonth[this.Month]; } Calendar.prototype.GetMonDays=GetMonDays; function IsLeapYear() { if ((this.Year%4)==0) { if ((this.Year%100==0) && (this.Year%400)!=0) { return false; } else { return true; } } else { return false; } } Calendar.prototype.IsLeapYear=IsLeapYear; function FormatDate(pDate) { if (this.Format.toUpperCase()=="DDMMYYYY") return (pDate+DateSeparator+(this.Month+1)+DateSeparator+this.Year); else if (this.Format.toUpperCase()=="DDMMMYYYY") return (pDate+DateSeparator+this.GetMonthName(false)+DateSeparator+this.Year); else if (this.Format.toUpperCase()=="MMDDYYYY") return ((this.Month+1)+DateSeparator+pDate+DateSeparator+this.Year); else if (this.Format.toUpperCase()=="MMMDDYYYY") return (this.GetMonthName(false)+DateSeparator+pDate+DateSeparator+this.Year); } Calendar.prototype.FormatDate=FormatDate; PHP:
you have these lines: winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=300,height=245,resizable=0,top="+cnTop+",left="+cnLeft); docCal=winCal.document; RenderCal(); Code (markup): change it to: winCal=window.open("","DateTimePicker","toolbar=0,status=0,menubar=0,fullscreen=no,width=300,height=245,resizable=0,top="+cnTop+",left="+cnLeft); docCal=winCal.document; RenderCal(); winCal.focus(); Code (markup): i believe it should work.
it did not work. still same. What about if i do this way. everytime when i click for the popup link, pop up will close it self and open again. i know php but no idea on javascript. thanks