|
JavaScript - Looking For An Easy Reusable Calendar Popup Script
I am after a script that will allow a calendar to pop up to select a date in UK date format.
I have a page that has a form with three date fields so the script needs to be reusable. I have been told to use jquery but could not work out how to reuse or get the calendar to be a different size other than half the size of the full page screen! the whole sites CSS also got messed up using jquery for some reason, think maybe I had used the same CSS tags as jquery? So looking for a basic calendar script no-frills, short sweet reusable. :-) Can anyone suggest some? Similar TutorialsHello, I need to disable the first 3 days of a popup calendar so that users can only select a date which is 3 days in advance to the present date. I dont really know javascript so i would really appreciate if someone can help me out in this. Calendar code can be found below. Code: /* --- Swazz Javascript Calendar ---
/* --- v 1.0 3rd November 2006
By Oliver Bryant
http://calendar.swazz.org */
function getObj(objID)
{
if (document.getElementById) {return document.getElementById(objID);}
else if (document.all) {return document.all[objID];}
else if (document.layers) {return document.layers[objID];}
}
function checkClick(e) {
e?evt=e:evt=event;
CSE=evt.target?evt.target:evt.srcElement;
if (getObj('fc'))
if (!isChild(CSE,getObj('fc')))
getObj('fc').style.display='none';
}
function isChild(s,d) {
while(s) {
if (s==d)
return true;
s=s.parentNode;
}
return false;
}
function Left(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function Top(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
document.write('<table id="fc" style="position:absolute;border-collapse:collapse;background:#FFFFFF;border:1px solid #ABABAB;display:none" cellpadding=2>');
document.write('<tr><td style="cursor:pointer" onclick="csubm()"><img src="../../public/front/includes/classes/images/arrowleftmonth.gif"></td><td colspan=5 id="mns" align="center" style="font:bold 13px Verdana"></td><td align="right" style="cursor:pointer" onclick="caddm()"><img src="../../public/front/includes/classes/images/arrowrightmonth.gif"></td></tr>');
document.write('<tr><td align=center style="background:#ABABAB;font:12px Verdana">S</td><td align=center style="background:#ABABAB;font:12px Verdana">M</td><td align=center style="background:#ABABAB;font:12px Verdana">T</td><td align=center style="background:#ABABAB;font:12px Verdana">W</td><td align=center style="background:#ABABAB;font:12px Verdana">T</td><td align=center style="background:#ABABAB;font:12px Verdana">F</td><td align=center style="background:#ABABAB;font:12px Verdana">S</td></tr>');
for(var kk=1;kk<=6;kk++) {
document.write('<tr>');
for(var tt=1;tt<=7;tt++) {
num=7 * (kk-1) - (-tt);
document.write('<td id="v' + num + '" style="width:18px;height:18px"> </td>');
}
document.write('</tr>');
}
document.write('</table>');
document.all?document.attachEvent('onclick',checkClick):document.addEventListener('click',checkClick,false);
// Calendar script
var now = new Date;
var sccm=now.getMonth();
var sccy=now.getFullYear();
var ccm=now.getMonth();
var ccy=now.getFullYear();
var updobj;
function lcs(ielem) {
updobj=ielem;
getObj('fc').style.left=Left(ielem);
getObj('fc').style.top=Top(ielem)+ielem.offsetHeight;
getObj('fc').style.display='';
// First check date is valid
curdt=ielem.value;
curdtarr=curdt.split('/');
isdt=true;
for(var k=0;k<curdtarr.length;k++) {
if (isNaN(curdtarr[k]))
isdt=false;
}
if (isdt&(curdtarr.length==3)) {
ccm=curdtarr[1]-1;
ccy=curdtarr[2];
prepcalendar(curdtarr[0],curdtarr[1]-1,curdtarr[2]);
}
}
function evtTgt(e)
{
var el;
if(e.target)el=e.target;
else if(e.srcElement)el=e.srcElement;
if(el.nodeType==3)el=el.parentNode; // defeat Safari bug
return el;
}
function EvtObj(e){if(!e)e=window.event;return e;}
function cs_over(e) {
evtTgt(EvtObj(e)).style.background='#CD2F30';
}
function cs_out(e) {
evtTgt(EvtObj(e)).style.background='#F0F0F0';
}
function cs_click(e) {
updobj.value=calvalarr[evtTgt(EvtObj(e)).id.substring(1,evtTgt(EvtObj(e)).id.length)];
getObj('fc').style.display='none';
}
var mn=new Array('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');
var mnn=new Array('31','28','31','30','31','30','31','31','30','31','30','31');
var mnl=new Array('31','29','31','30','31','30','31','31','30','31','30','31');
var calvalarr=new Array(42);
function f_cps(obj) {
obj.style.background='#F0F0F0';
obj.style.font='10px Verdana';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.textDecoration='none';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}
function f_cpps(obj) {
obj.style.background='#F0F0F0';
obj.style.font='10px Verdana';
obj.style.color='#ABABAB';
obj.style.textAlign='center';
obj.style.textDecoration='line-through';
obj.style.border='1px solid #6487AE';
obj.style.cursor='default';
}
function f_hds(obj) {
obj.style.background='#FFF799';
obj.style.font='bold 10px Verdana';
obj.style.color='#333333';
obj.style.textAlign='center';
obj.style.border='1px solid #6487AE';
obj.style.cursor='pointer';
}
// day selected
function prepcalendar(hd,cm,cy) {
now=new Date();
sd=now.getDate();
td=new Date();
td.setDate(1);
td.setFullYear(cy);
td.setMonth(cm);
cd=td.getDay();
getObj('mns').innerHTML=mn[cm]+ ' ' + cy;
marr=((cy%4)==0)?mnl:mnn;
for(var d=1;d<=42;d++) {
f_cps(getObj('v'+parseInt(d)));
if ((d >= (cd -(-1))) && (d<=cd-(-marr[cm]))) {
dip=((d-cd < sd)&&(cm==sccm)&&(cy==sccy));
htd=((hd!='')&&(d-cd==hd));
if (dip)
f_cpps(getObj('v'+parseInt(d)));
else if (htd)
f_hds(getObj('v'+parseInt(d)));
else
f_cps(getObj('v'+parseInt(d)));
getObj('v'+parseInt(d)).onmouseover=(dip)?null:cs_over;
getObj('v'+parseInt(d)).onmouseout=(dip)?null:cs_out;
getObj('v'+parseInt(d)).onclick=(dip)?null:cs_click;
getObj('v'+parseInt(d)).innerHTML=d-cd;
calvalarr[d]=''+(d-cd)+'-'+(cm-(-1))+'-'+cy;
}
else {
getObj('v'+d).innerHTML=' ';
getObj('v'+parseInt(d)).onmouseover=null;
getObj('v'+parseInt(d)).onmouseout=null;
getObj('v'+parseInt(d)).style.cursor='default';
}
}
}
prepcalendar('',ccm,ccy);
//getObj('fc'+cc).style.visibility='hidden';
function caddm() {
marr=((ccy%4)==0)?mnl:mnn;
ccm+=1;
if (ccm>=12) {
ccm=0;
ccy++;
}
cdayf();
prepcalendar('',ccm,ccy);
}
function csubm() {
marr=((ccy%4)==0)?mnl:mnn;
ccm-=1;
if (ccm<0) {
ccm=11;
ccy--;
}
cdayf();
prepcalendar('',ccm,ccy);
}
function cdayf() {
if ((ccy>sccy)|((ccy==sccy)&&(ccm>=sccm)))
return;
else {
ccy=sccy;
ccm=sccm;
cfd=scfd;
}
}
Thank you very much in advance Sami Hello there, plz help working with php. am new to coding. I am working to get a reservation system for golf tee times. I have 2 different pages. one is where i will set the generic settings for golf course. the other is a reservations page which provides an option to add new reservation page. Now in the settings page i can set no of days to 1 thru 5. it will be inserted into config table in database. Based on this, on reservation page, i need to show only 1 or 2 or 5 days on the popup calendar starting from today which allows to select one while making new reservation. or based on the setting if i can prepopulate those dates in a drop down list on the addreservation.php I am seeking a way to restyle the google calendar by trying to add a different background color to each day of the month, closest I am getting is this code: Code: @namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://www.google.com/calendar") {
.tg-today, .bg-exists .tg-today, .st-bg-today {
background-color:#53abdf !important;
}
.lv-today {
/* background-color:#ffffcc !important;*/
}
}
taken from this small artticle: http://userstyles.org/styles/20934/g...-color-obvious The way I see it, if this code can change the bg color for one day then why can't it work for ANY day "ahead" of time? Hello, I have a script that makes a link a different color on click, i would like to add a hover color to the links that are NOT active. Script below. Thanks in advance! Code: function activate(el) { var links=document.getElementsByTagName("a"); for(i=0;i<links.length;i++) { if(links[i].className=="toggle") { links[i].style.color="#999"; } } el.style.color="#DF8700"; }
Hi All Javascript novice here so just need a bit of help. I'm sure it's something easy I have a form, attributes below: Code: <form id="frmOrder" name="input" method="post" onsubmit="return OnSubmitForm();"> I need the deposit input value to match the total input value if the weeks10 checkbox is ticked. The reason for this is my client requires full payment if this box is ticked. This must be done upon form submission. The reason for this is the email.php and payment.php submission pages collect the deposit value using $_POST and use that as the payment total Attributes for inputs below: Weeks10 checkbox: Code: <input type="checkbox" name="weeks10" id="weeks10" class="weeks10" /> Deposit input: Code: <input type="text" name="deposit" id="txtTotal3" readonly="readonly" size="2" value="0.00"></input> Totals input: Code: <input type="text" readonly="readonly" id="txtTotal" value="0.00" size="2" name="total"/> I'm using the following script: Code: <script type="text/javascript">
function OnSubmitForm()
{
if(document.input.weeks10[0].checked == true)
{
document.input.deposit.value = document.input.total.value;
}
return true;
}
function OnSubmitForm()
{
if(document.input.operation[0].checked == true)
{
document.input.action ="email.php";
}
else
if(document.input.operation[1].checked == true)
{
document.input.action ="payment.php";
}
return true;
}
</script>
The problem is, the second function works (email.php or payment.php action depending on radio selection). But the first one to adjust the total doesnt Now I know my script is wrong so would somebody be kind enough to lend me a hand? Thanks! *Edit - forgot to mention the example is live here if you need to see the full code. It's a fairly complicated form (for me atleast anyway) http://lake-form.carpbookings.co.uk I am trying to modify a popup script to popup a lightbox on page load instead of a new window. The script identifies if the user is a new visitor and displays the popup only to new visitors. Typically, the lightbox is triggered by an a:link. I would like to trigger it using this script so that the lightbox pops up automatically for new visitors only. Here is the popup script: Code: <SCRIPT LANGUAGE="JavaScript">
<!--
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
window.name = "thiswin";
newwin=open("http://www.pccmedia.net/P25_60sec.php", "dispwin",
"width=350,height=350,scrollbars=yes,menubar=no");
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
// -->
</SCRIPT>
I want to replace the newwin=open... command with something that will trigger the lightbox. The section of the lightbox script that receives the trigger and variables is.... Code: Mediabox.scanPage = function() {
// $$('#mb_').each(function(hide) { hide.set('display', 'none'); });
var links = $$("a").filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
});
$$(links).mediabox({/* Put custom options here */}, null, function(el) {
var rel0 = this.rel.replace(/[[]|]/gi," ");
var relsize = rel0.split(" ");
return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
});
};
window.addEvent("domready", Mediabox.scanPage);
An example of the typical HTML tag that triggers the lightbox and feeds the variables is Code: <a href="http://www.pccmedia.net/other/P25_60sec.mp4" rel="lightbox[set 720 405]" title="Project 25" onClick="stop1()"/> The rel=lightbox... is the trigger for the lightbox. The stop1() function refers to a separate script that plays background music on the website. This also needs to be included in the new visitor popup script, but is a separate issue..... I'm not familiar enough with JS to be able to figure this out. Any help would be GREATLY appreciated. Total newbie, I (almost) know just basic HTML. I have my own website and I'm trying to find out how to make a popup window work from clicking on a part link in a parent window table so that my clients can make an inquiry. I have about 300 parts on 10 pages total and would like it to be something I can just enter the new varibles on the parent page and the code takes care of the rest. I would like the popup to have the part info as a variable from the table as a variable in the inquiry page header and also part description as a variable the hidden subject line. I have included the code I already have and I'm looking for the script to bring it all together. Example for header may read "Part 1" for example and the hidden subject variable to read "0001 Part 1 $20" for example. I hope this is possible and I hope I made sense. I really need help me with this. Parent page Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Parts Page</title>
<link rel="stylesheet" type="text/css" href="../styles.css" />
<style type="text/css">body{font-family: Verdana, sans-serif;font-size: 14px;font-style: normal;line-height: normal;font-weight: normal;color: #000000;}</style>
</head>
<body>
<div align="center"><table width="90%" style="border-collapse:collapse;" border="1" cellpadding="2">
<tr><td width="15%"><h2 align="center">Item #</h2><p align="center">Click to inquire</p></td>
<td width="60%"><h2 align="center">Description - Used OEM Parts*</h2><p align="center">*Unless described differently</p></td>
<td width="15%" valign="top"><h2 align="center">Coverage</h2><p align="center">*Sorted by Year</p></td>
<td width="10%" valign="top"><h2 align="center">Price</h2></td></tr>
<tr><td align="center"><a href="mailto:myemail@myweb.com?subject=0001 - My Part 1 - $20"><font size="2">0001</font></a></td><td align="left"><font size="2">My part 1</font></td><td align="center"><font size="2">1960-61</font></td><td align="center"><font size="2">$20</font></td></tr>
<tr><td align="center"><a href="mailto:myemail@myweb.com?subject=0002 - My Part 2 - $25"><font size="2">0002</font></a></td><td align="left"><font size="2">My part 2</font></td><td align="center"><font size="2">1960-61</font></td><td align="center"><font size="2">$25</font></td></tr>
</table></div>
</body>
Popup window Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Parts Inquiry</title>
<link rel="stylesheet" type="text/css" href="../styles.css" />
<style type="text/css">body{font-family: Verdana, sans-serif;font-size: 14px;font-style: normal;line-height: normal;font-weight: normal;color: #000000;}</style>
</head>
<body>
<form action="http://www.myweb.com/cgi/FormMail.pl" method="post">
<input type="hidden" name="recipient" value="myemail@myweb.com" />
<input type="hidden" name="subject" value="variable 2" />
<input type="hidden" name="redirect" value="http://myemail@myweb.com/used_parts/thank_you6.html" />
<input type="hidden" name="required" value="realname, email" />
<input type="hidden" name="env_report" value="REMOTE_HOST, HTTP_USER_AGENT, REMOTE_USER, REMOTE_ADDR " />
<div align="center"><table width="90%" border="0">
<tr><td align="center"><h1>variable 1</h1>
<p align="center"><font size="2" color="#FF0000">"*" Indicates required field.</font></p>
<p><font>Fill out the form below to find out more about this this part.</font></p>
</td></tr></table></div>
<div align="center"><table width="50%" border="2" bgcolor="#99CCFF">
<tr><td align="right" width="50%"><font color="#FF0000">*</font>Your Name : </td>
<td align="left" width="50%"><input type="text" size="35" maxlength="256" name="realname" /></td></tr>
<tr><td align="right" width="50%"><font color="#FF0000">*</font>Email Address : </td>
<td align="left" width="50%"><input type="text" size="35" maxlength="256" name="email" /></td></tr>
<tr><td align="right" width="50%">Phone Number : </td>
<td align="left" width="50%"><input type="text" size="14" maxlength="256" name="Phone" /></td></tr>
<tr><th colspan="2">Please type your question(s) in the space below:
<textarea name="Question(s)" rows="5" cols="70"></textarea></th></tr></table></div><br />
<div align="center"><table width="90%" border="0">
<tr><td align="center">
<input type="submit" value="Submit Form" /> <input type="reset" value="Clear Form" />
</td></tr></table></div></form>
</body>
I also have some parameters for the desired popup window size and position. Code: width=625,height=450,left=275,top=100,resizable=no,status=no,toolbar=no,menubar=no,location=no'); Any other suggestions for the popup window parameters would be welcome! Thanks, John i need blog popup java script can help me? i have premium account blog and i use some adf.ly links so i need auto popup window java script!
Hi, I adjusted a javascript code which was a clickable popup to an autoloading popup. Basicly when someone visits the page I want the popup to appear. It's working fine but Firefox doesn't display the popup on page load, only when clicked. (newsletter signup) Im just starting out on JavaScript. Can anyone help? here's the code Code: $(document).ready(function() {
// Here we will write a function when link click under class popup
var rel = popuprel3;
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$(popuprel3).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($(popuprel3).height() + 10) / 2;
var popupleftmargin = ($(popuprel3).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$(popuprel3).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel3').fadeOut()
return false;
});});
theres a div on index.php with an id called popuprel3 Short version at bottom Need to add an array before an array to init thousands of arrays. Mostly worked out, just need to add an array before an array. ........Please check it out. Really want to finish this tonight or tomorrow. Alright, so two days later I finally have this portion working but its only because of the awesome people of this forum and unforunately these people thought I had some half decent grasp of javascript (which I don't) and so their answers were meant to solve my problem but each time I was left with no idea how to repeat what they did. So, I've learned a lot of extra stuff that I really could have done without in the effort to try and understand what they did. This is all well and good because I'm much farther than I am had I gone it alone (so thank you!) but please, anyone that posts an answer, could you try and explain a bit of how I might use your solution again. For example, today I was confused for about an hour because I didn't understand how [CODE]var newArray=[], a, i=0;CODE] worked but only after staring at it long enough and not finding anything on google related to "values inputed after array initialization" did I finally realized that these were not params of a new array but just new variables. Code:
var alphabetArray =['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','all1'];
var a;
var i=0;
while(a=alphabetArray[i++]){
eval('var _img_'+a+' = []');
eval('var _h_'+a+' = []');
eval('var _r_'+a+' = []');
eval('var _m_'+a+' = []');
eval('var _yt_'+a+' = []');
}
alert(_h_all1)
and its working perfectly but I somehow I need to add Code: var pageNum = ['','p2_','p3_','p4_','p5_','p6_','p7_','p8_','p9_','p10_'] need to add pageNum to every alphabetArray so... _img_a = [],_img_p2_a = [], img_p3_a = [].... _img_p10_a = [] repeated for every variable in alphabetArray. _yt_p10_all1=[] Super short version Code: var alphabetArray =[letters/numbers];
var a;
var i=0;
while(a=alphabetArray[i++]){
eval('var _img_'+a+' = []');
}
// works now I need to add 10 page prefixes before each var in alphabetArray
Code: var pageNum = ['','p2_','p3_','p4_','p5_','p6_','p7_','p8_','p9_','p10_'] need to add pageNum to every alphabetArray so... _img_a = [],_img_p2_a = [], img_p3_a = [].... _img_p10_a = [] repeated for every variable in alphabetArray. _yt_p10_all1=[] Please explain how this might be possible in a way that your dog might understand. I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week Thanking you, L.Rajesh rajboy13@gmail.com my code is Code: function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var sl = document.createElement('input');
sl.type = 'text';
sl.name = 'sln' ;
sl.id = 'sln' + iteration;
sl.value = iteration;
sl.size = 3;
sl.readOnly = true;
cellLeft.appendChild(sl);
var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);
var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";
var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);
}
the button code is : Code: </br>
<fieldset style="width:60%;" align="center"> <legend>
<SCRIPT LANGUAGE="JavaScript">
function deleteRow(b){
document.getElementById('table_formcontainer').deleteRow(b)
}
function CompareDates1()
{
var str1 = document.getElementById("start").value;
var str2 = document.getElementById("edate").value;
var dt1 = parseInt(str1.substring(0,2),10);
var mon1 = parseInt(str1.substring(3,5),10);
var yr1 = parseInt(str1.substring(6,10),10);
var dt2 = parseInt(str2.substring(0,2),10);
var mon2 = parseInt(str2.substring(3,5),10);
var yr2 = parseInt(str2.substring(6,10),10);
var date1 = new Date(yr1, mon1, dt1);
var date2 = new Date(yr2, mon2, dt2);
if(date2 < date1)
{
alert("To date cannot be greater than from date");
return false;
}
else
{
alert("Submitting ...");
document.form1.submit();
}
return true;
}
function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var sl = document.createElement('input');
sl.type = 'text';
sl.name = 'sln' ;
sl.id = 'sln' + iteration;
sl.value = iteration;
sl.size = 3;
sl.readOnly = true;
cellLeft.appendChild(sl);
var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);
var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";
var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);
}
function delRow1(c)
{
document.getElementById('tblMed').deleteRow(c)
}
function validate()
{
var tbl = document.getElementById('tblMed');
var lastRow= tbl.rows.length-1;
var a;
for (a=1; a<=lastRow; a++)
{
var def = document.getElementById('sln'+ a);
var ghi = document.getElementById('Mdesc'+ a);
var jkl = document.getElementById('Mqty'+ a);
var jkl1 = document.getElementById('Mqty'+ a).value;
var abc = document.getElementById('Mbill'+ a);
var gpexpdt2 = document.getElementById('tblMed').value;
var str11 = document.getElementById("sdate").value;
var str12 = document.getElementById("edate").value;
var tranday = jkl1.substring(0,2);
var tranmon = jkl1.substring(3,5);
var tranyear = jkl1.substring(6,10);
var trandate = new Date(tranyear,tranmon,tranday);
var tranday2 = str11.substring(0,2);
var tranmon2 = str11.substring(3,5);
var tranyear2 = str11.substring(6,10);
var trandate2 = new Date(tranyear2,tranmon2,tranday2);
var tranday3 = str12.substring(0,2);
var tranmon3 = str12.substring(3,5);
var tranyear3 = str12.substring(6,10);
if ((document.getElementById("AC").value == ""))
{
alert ( "Please enter Amount Claimed." );
document.form5.AC.focus();
return false;
}
else if((document.getElementById("Amb").value == ""))
{
alert ( "Please enter Relationship" );
document.form5.Amb.focus();
return false;
}
if ( document.form5.Treat.selectedIndex == "")
{
alert ( "Please select Treatment Type" );
document.form5.Treat.focus();
return false;
}
else if((document.getElementById("C10").value == ""))
{
alert ( "Please enter Total " );
document.form5.C10.focus();
return false;
}
else if((document.getElementById("C11").value == ""))
{
alert ( "Please enter Place " );
document.form5.C11.focus();
return false;
}
else if((document.getElementById("start").value == ""))
{
alert ( "Please enter from date" );
document.form5.start.focus();
return false;
}
else if((document.getElementById("edate").value == ""))
{
alert ( "Please enter to date" );
document.form5.edate.focus();
return false;
}
if (ghi.value.length == "")
{
alert('Please enter Bill No');
ghi.focus();
return false;
}
if (jkl.value.length == "")
{
alert('Please enter Date');
jkl.focus();
return false;
}
var trandate3 = new Date(tranyear3,tranmon3,tranday3);
if (tranmon > 12|| tranmon < 1)
{
alert('Invalid Month In Date Field .Enter as dd-mm-yy');
jkl.focus();
return false;
}
if (tranday > 31|| tranday < 1)
{
alert('Invalid Date In Date Field Enter as dd-mm-yy');
jkl.focus();
return false;
}
if(trandate2.getTime() > trandate.getTime())
{
alert("Bill date should be less than From date");
jkl.focus();
return false;
}
if(trandate3.getTime() < trandate.getTime())
{
alert("Bill date should not be greater than End date");
jkl.focus();
return false;
}
if (abc.value.length == "")
{
alert('Please enter Amount');
abc.focus();
return false;
}
var str3 = document.getElementById("AC").value;
var str4 = document.getElementById("Amb").value;
if(parseInt(str3) > parseInt(str4))
{
alert('Amount Claimed must be less than Amount Balance');
document.form5.AC.focus();
return false;
}
var alertsay = "";
if (form5.Treat.value > 4)
{
alert("Sorry You Can Not This Employee Data In Database..........");
form5.Treat.focus();
return (false);
}
var checkOK = "0123456789";
var checkStr = abc.value;
var allValid = true;
var allNum = "";
for (e = 0; e < checkStr.length; e++)
{
ch = checkStr.charAt(e);
for (f = 0; f < checkOK.length; f++)
if (ch == checkOK.charAt(f))
break;
if (f == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Invalid Data Please enter only digits'");
abc.focus();
return (false);
}
}
return true;
}
var count =0;
function Check()
{
if (!validate())
return true;
addRow()
}
function removeRow1()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
function deleteRow(node) {
if (rowNum > 1) {
var td = node.parentNode;
while (td.tblMed.toLowerCase() != "tr")
td = td.parentNode;
td.parentNode.removeChild(td);
rowNum = rowNum - 1;
document.form1.count.value = rowNum;
}
else {
alert ("You cannot delete the last remaining row");
}
}
</script>
<b><font color="#153E7E"border="1">Bill Details</b></legend><br>
<table id="tblMed" width="75%">
<tr>
<th>Sl.No.</th>
<th align="left">Bill No</th>
<th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th>
<th>Bill Amount( <span class="WebRupee">Rs.</span> )</th>
</tr>
</table>
<tr><br/>
    <input name="button" type="button" value="Add Bill" onClick="Check()"/>
................................................................................................ i want popup calender in 3rd row of the table please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) I don't have any knowledge of apps but would like to get one like this and be able to change/add info to it myself, where/how can I go about doing this please?
hi all, I need one script for the change of month & year the data of the month and year is changed in iframe. like when ever we select the month and date the calender is changing like that i frame content t be change. Code:
<?
if (isset($_COOKIE["ValidUserAdmin"]))
{
require "config.php";
require "config1.php";// connection to database
include "header_purchase.php";
$auth = ($_COOKIE["ValidUserAdmin"]);
$sys_date1= date("Y/m/d");
?>
<html><head><title></title>
<style rel="stylesheet" type="text/css">
table.calendar {
font-family: Helvetica, Arial, sans-serif;
font-size: 0.8em;
border-collapse: collapse;
background-color: white;
border: solid #999999 1px;
background-color: white;
width: 200px;
text-align: center;
/*prevent user from selecting text in Mozilla & Safari - check calendar constructor for IE code)*/
-moz-user-select: none;
/*-khtml-user-select: none;*/
}
table.calendar input, table.calendar select {
font-size: 10px;
}
table.calendar td {
border: 0;
font-size: 10px;
text-align: center;
}
div.mainheading {
margin: 2px;
}
table.caldayheading {
border-collapse: collapse;
cursor: pointer;
empty-cells: show;
margin: 0 6px 0 6px;
}
table.caldayheading td {
border: solid #CCCCCC 1px;
text-align: left;
color: #0054E3;
font-weight: bold;
width: 22px; /*should match calendar cell's width*/
}
table.caldayheading td.wkhead {
border-right: double #CCCCCC 3px;
}
table.calcells {
border-collapse: collapse;
cursor: pointer;
margin: 0 6px 0 6px;
}
table.calcells td {
border: solid #CCCCCC 1px;
vertical-align: top;
text-align: left;
font-weight: bold;
width: 22px;
height: 20px; /*IE doesn't like ems*/
}
table.calcells td div {
padding: 1px;
margin: 0;
}
table.calcells td.wkhead {
background-color: white;
text-align: center;
border-right: double #CCCCCC 3px;
color: #0054E3;
}
table.calcells td.wkday {
background-color: #DDDDDD;
}
table.calcells td.wkend {
background-color: #DDDDDD;
}
table.calcells td.curdate {
}
table.calcells td.cell_selected {
background-color: #99CCFF;
color: black;
}
table.calcells td.notmnth {
background-color: #FFFFFF;
color: #CCCCCC;
}
table.calcells td.notallowed {
background-color: white;
color: #EEEEEE;
font-style: italic;
}
table.calcells td.hover {
background-color: #999999;
}
</style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript">
var bas_cal,dp_cal,ms_cal;
window.onload = function () {
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('sale_date'));
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('invc_date'));
}
</script>
<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script>
</head>
<body >
<table id="page">
<tr><td>
<br>
<a name="AddNew"></a>
Enter the details on the new Outgoing Transaction in the spaces below. You only need to add the amount in Rs click on the 'Add Outgoing' button.<br>
<BR> <form name="form1" method="post">
<input name="op" type="hidden" value="OutgoingTransactionAdd">
<input name="DateAdded" type="hidden" value="<?php print "$dateadded"; ?>">
<TABLE class="tbl" width="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="1" BGCOLOR="#E4EEE3">
<TR>
<TD colspan="4"><strong>Purchase Details </strong></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Vendor <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <? $query1 = "SELECT distinct ven_name from aa_vendor1 where cleared='cleared' ";
$result1 = mysql_query($query1);
if(!$result1)
{
echo "The query failed " . mysql_error();
} else {
echo "<select name='dropdown1' onChange='AjaxFunction(document.form1.dropdown1.options[document.form1.dropdown1.selectedIndex].text);'>";
?> <option value=""> Select One </option> <?
while($row = mysql_fetch_array($result1, MYSQL_ASSOC))
{
$select= $row['Bank_custom'];
echo"<option value='". $row['ven_name']."'>" .$row['ven_name'] . "</option>";
}
echo"</select>";
}
?>
</TD>
<td bgcolor="#FFFFFF">Product <span style="color:#FF0000"> * </span></td>
<td bgcolor="#FFFFFF"> <select name="product"> </select></td>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Vendor Invoice No <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="TEXT" name="ven_inv_no" size="15" maxlength="15"></TD>
<td bgcolor="#FFFFFF">Invoice Amount <span style="color:#FF0000"> * </span></td>
<td bgcolor="#FFFFFF"> <input type="TEXT" name="ven_inv_amnt" size="15" maxlength="15"></td>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Invoice Date <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF" colspan="3"> <INPUT id="invc_date" NAME="invc_date" TYPE="text" size="15" readonly="yes" />
<INPUT NAME="rec_date" TYPE="hidden" size="20" value="<? echo $todaydate ?>" /></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"> Comments </TD>
<TD BGCOLOR="#FFFFFF" colspan="3">
<span> </span><textarea white-space:nowrap;overflow:auto; rows="3" cols="40" type="TEXT" name="comment_prchs"></textarea>
</TD>
</TR>
<TR> <TD colspan="4"><a name="AddNew"><strong>Sale Details </strong></a></TD> </TR>
<TR>
<TD height="24" BGCOLOR="#FFFFFF">Client Name <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="text" name="client_name" size="30" onClick="make_blank();"></TD>
<TD BGCOLOR="#FFFFFF">Sale Invoice No <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="TEXT" name="sales_inv_no" size="15"> </TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Sale Amount <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <input type="TEXT" name="sale_amt" size="15" > </TD>
<TD BGCOLOR="#FFFFFF">Sale Date <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <INPUT id="sale_date" NAME="sale_date" TYPE="text" size="15" readonly="yes" /></TD>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF">Status <span style="color:#FF0000"> * </span></TD>
<TD BGCOLOR="#FFFFFF"> <select id="sts" name="status" onChange="paid(document.form1.status.options[document.form1.status.selectedIndex].text);">
<option>Pending</option>
<option>Paid</option>
<option>Defaulted</option>
</select>
</TD>
<td bgcolor="#FFFFFF"><div id="rcp1" style="display:none">Receipt<span style="color:#FF0000"> * </span></div></td>
<td bgcolor="#FFFFFF"><div id="rcp2" style="display:none"> <input id="rcp3" type="TEXT" name="receipt" size="15" ></div></td>
</TR>
<TR>
<TD BGCOLOR="#FFFFFF"> Comments </TD>
<TD BGCOLOR="#FFFFFF" colspan="3">
<span> </span><textarea white-space:nowrap;overflow:auto; rows="3" cols="40" type="TEXT" name="comment1" ></textarea>
</TD>
</TR>
<TR>
<TD align="center" colspan="4"> <input name="SUBMIT" type="SUBMIT" value="Add" onClick="return validate();"></TD>
</TR>
</TABLE>
</FORM>
<script language="JavaScript" type="text/javascript">
function validate(){
var frmvalidator = new Validator("form1");
var stts = document.getElementById("sts")
var rcpp = document.getElementById("rcp3")
frmvalidator.addValidation("client_name","req","Please enter your Client Name");
frmvalidator.addValidation("client_name","maxlen=100",
"Max length for client name is 100");
frmvalidator.addValidation("client_name","alphanumeric_space");
frmvalidator.addValidation("sale_amt","maxlen=50");
frmvalidator.addValidation("sale_amt","dec");
frmvalidator.addValidation("sale_amt","req","Please enter your Sales Amount");
frmvalidator.addValidation("sales_inv_no","maxlen=10");
frmvalidator.addValidation("sales_inv_no","alnum");
frmvalidator.addValidation("sales_inv_no","req","Please enter your Sales Invoice Number");
frmvalidator.addValidation("sale_date","req","Please enter your Sales Date");
frmvalidator.addValidation("dropdown1","req","Please select your Vendor Name");
frmvalidator.addValidation("ven_inv_no","maxlen=10");
frmvalidator.addValidation("ven_inv_no","alnum");
frmvalidator.addValidation("ven_inv_no","req","Please enter your Vendor Invoice Number");
frmvalidator.addValidation("ven_inv_amnt","maxlen=10");
frmvalidator.addValidation("ven_inv_amnt","dec");
frmvalidator.addValidation("ven_inv_amnt","req","Please enter your Vendor Invoice Amount");
frmvalidator.addValidation("invc_date","maxlen=10");
frmvalidator.addValidation("invc_date","req","Please enter your Vendor Invoice Date");
if(stts.value == "Paid" && rcpp.value=="")
{
alert("Enter Your Receipt no.");
return false;
}
}
</script>
<BR>
<br>
<?php
if (isset($_POST["op"]) && ($_POST["op"]=="OutgoingTransactionAdd"))
{
if(empty($_POST['client_name'])){
echo "<b style='color:red'>*Fields Are Empty</b>";
exit;
}
mysql_connect($server, $DBusername, $DBpassword) or die ("$DatabaseError - 33");
mysql_select_db($database);
mysql_query("INSERT INTO $incoming_table1(id,DateAdded,client_name,sale_amt,sale_date,sales_inv_no,rec_date,ven_name,product,ven_inv_no,ven_inv_amnt,status,comment1,prepared_by,inv_date,rec_no,sys_date1,comment_prchs)
VALUES ('',
'".$_POST['DateAdded']."',
'".$_POST['client_name']."',
'".$_POST['sale_amt']."',
'".$_POST['sale_date']."',
'".$_POST['sales_inv_no']."',
'".$_POST['rec_date']."',
'".$_POST['dropdown1']."',
'".$_POST['product']."',
'".$_POST['sales_inv_no']."',
'".$_POST['ven_inv_amnt']."',
'".$_POST['status']."',
'".$_POST['comment1']."',
'".$username."',
'".$_POST['invc_date']."',
'".$_POST['receipt']."',
'".$sys_date1."',
'".$_POST['comment_prchs']."')") or die ("$DatabaseError - 35");
print "<p align=\"center\"><font color=red>The Transaction has been added to the system</font></p>";
print "<p align=\"center\"><a href=\"123.php\">Refresh Details</a></p>";
}
?>
</td>
</tr>
</table>
<TABLE WIDTH="100%" CELLPADDING="1" CELLSPACING="1" BGCOLOR="<?php print "$HRColour"; ?>">
<TR>
<TD></TD>
</TR>
</TABLE>
<P ALIGN="CENTER" CLASS="copyright"><?php print "$Copyright"; ?></P>
</body>
</html>
<?
}
else
{
print "<p>Unauthorised Admin access - <a href=\"http://expense.webhop.org\">Click Here to Login</></p>";
}
?>
I have a calendar that gets pulled up via javascript. It allows someone to pick a date in a form with this little calendar icon that pops up. However, I am trying to make certain days of the week not available. If I wanted to make Tuesdays and Thursdays not available, where would I edit it? Here is the lengthy code http://www.happydogwebproductions.com/CFcalendar.js It was too long to post here. Thanks for any help I have a page of dates in a form field which currently are being entered manually and wish to have a calendar pop up for each one to make it a bit easier. i have managed to use a calendar routine 'tigra calendar' i found online but now after working out not to get it working within my own template i faced the problem on multiple date fields. i currently use a numbers field 1-10 or how every many there needs to be on that page. but how would i integrate this within the coding from 'tigra calendar' can anyone suggest a better way to do this. if needed i can sort out a zip file of the files i have for tigra calendar. I am supposed to create a calendar and have the calendar show up in the top right of the screen while also highlighting the current date set on it. Nothing shows up... HTM: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!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">
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
The Chamberlain Civic Center
Author:
Date:
Filename: ccc.htm
Supporting files: back.jpg, calendar.css, calendar.js, ccc.css, ccc.jpg, logo.gif
-->
<title>The Chamberlain Civic Center</title>
<link href="ccc.css" rel="stylesheet" type="text/css" />
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="head">
<script type="text/javascript">
calendar("March 25, 2011");
</script>
<img src="ccc.jpg" alt="Chamberlain Civic Center" />
</div>
<div id="links">
<table><tr>
<td><a href="#">Home</a></td><td><a href="#">Tickets</a></td>
<td><a href="#">Events</a></td><td><a href="#">Tour</a></td>
<td><a href="#">Directions</a></td><td><a href="#">Hours</a></td>
<td><a href="#">Packages</a></td><td><a href="#">Contact Us</a></td>
</tr></table>
</div>
<div id="main">
<p id="firstp"><img src="photo.jpg" alt="" />March is another banner month
at the Chamberlain Civic Center, with performances of the award-winning
musical, <span>The Producers</span> by the Broadway Touring Company on
March 4, 5, and 6. Tickets are going fast, so order yours today.</p>
<p>Celebrate the season on March 11 with the Chamberlain Symphony and their
special selection of classical music with Spring themes. The next day,
March 12, exercise your mind by attending the Charles Dickens mystery
<span>Edwin Drood</span>.</p>
<p>Jazz lovers have a lot to celebrate in March with a visit from <span>The
Jazz Masters</span> on the 17th. Then on March 24, enjoy the music of The
Duke with <span>An Ellington Tribute</span> performed by the Jazz Company
of Kansas City.</p>
<p>Pins, bottles, plates, and chairs are flying at the Chamberlain Civic
Center in March. <span>The Taiwan Acrobats</span> return with another
amazing performance on Sunday, March 13. On March 20, the <span>Madtown
Jugglers</span> get into the act with their unique blend of comedy, juggling,
and madness.</p>
<p>Enjoy a classical brunch every Sunday afternoon with music provided by the
Carson Quartet. Seating is limited, so please reserve your table.</p>
</div>
<address>
The Chamberlain Civic Center ·
2011 Canyon Drive ·
Chamberlain, SD 57325 ·
(800) 555-8741
</address>
</body>
</html>
Java Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Author:
Date:
Function List:
calendar(calendarDay)
Creates the calendar table for the month specified in the
calendarDay parameter. The current date is highlighted in
the table.
writeCalTitle(calendarDay)
Writes the title row in the calendar table
writeDayTitle()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeCalDays(calendarDay)
Writes the daily rows in the calendar table, highlighting
calendarDay
*/
function calendar(calendarDay) {
if (calendarDay == null) calDate=new Date()
else calDate = new Date(calendarDay);
document.write("<table id='calendar_table'>");
writeCalTitle(calDate);
writeDayNames();
writeCalDays(calDate);
document.write("</table>");
}
function writeCalTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "Octoboer", "November", "December");
var thisMonth=calendarDay.getMonth();
var thisYear=calendarDay.getFullYear();
document.write("<tr>");
document.write("<th id='calendar_head' colspan='7'>");
document.write(monthName[thisMonth]+" "+thisYear);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
document.write("<tr>");
for (var i=0; i < dayName.length; i++) {
document.write("<th class='calendar_weekdays'> "+dayName[i]+"</th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array (31,28,31,30,31,30,31,31,30,31,30,31);
if (thisYear % 4 == 0) {
if ((thisYear % 100 != 0) || (thisYear % 400 == 0)) {
dayCount[1] = 29;
}
}
return dayCount[thisMonth];
}
function writeCalDays(calendarDay) {
var currentDay = calendarDay.getDate();
var dayCount = 1;
var totalDays = daysInMonth(calendarDay);
calendarDay.setDate(1);
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
while (dayCount <= totalDays) {
if (weekDay == 0) document.write("<tr>");
if (dayCount == currentDay) {
document.write("<td class='calendar_dates' id='calendar_today'>"+dayCount+"</td>");
} else {
document.write("<td class='calendar_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
dayCount++;
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
}
document.write("</tr>");
}
CSS (calendar) Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: calendar.css
This file contains styles applied to the calendar table
*/
#calendar_table {float: right; background-color: white; font-size: 9pt;
font-family: Arial, Helvetica, sans-serif;
border-style: outset; border-width: 5px; margin: 0px 0px 5px 5px}
#calendar_head {background-color: rgb(223,29,29); color: ivory; letter-spacing: 2px}
.calendar_weekdays {width: 30px; font-size: 10pt; border-bottom-style: solid}
.calendar_dates {text-align: center; background-color: white}
#calendar_today {font-weight: bold; color: rgb(223,29,29); background-color: ivory;
border: 1px solid black}
CSS (page) Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 3
Tutorial Case
Filename: ccc.css
This file contains styles used in the ccc.htm file
*/
body {margin: 0px; background: white url(back.jpg) repeat-y scroll 820px 0px}
#head {width: 750px; height: 150px; padding: 5px}
#links {clear: right; width: 750px; padding: 0px}
#links table {width: 750px; font-family: Arial, Helvetica, sans-serif;
font-size: 8pt; margin: 0px}
#links table td {text-align: center; background-color: white;
border: 1px solid black; letter-spacing: 5; padding: 2px}
#links table a {text-decoration: none; color: rgb(223,29,29); width: 100%}
#links table a:hover {color: white; background-color: rgb(223,29,29)}
#main {width: 750px; font-family: Arial, Helvetica, sans-serif; padding: 10px}
#main p {text-align: justify; font-size: 9pt}
#firstp:first-line {font-variant: small-caps}
#main img {float: right; margin: 0px 0px 10px 10px}
#main p span {color: rgb(223,29,29)}
address {width: 750px; font-size: 8pt; font-style: normal; color: rgb(223,29,29);
font-family: Arial, Helvetica, sans-serif; text-align: center;
border-top: 1px solid rgb(223,29,29); padding-bottom: 10px}
Can anyone see something wrong? This is really frustrating me as I'm not very good with javascript but thought I did this one right... I am looking to add a calendar to my website in order to list events for each day on the calendar you click on. For example, the link below shows a calendar on the left, that when you click on a day it lists all the events that day. I have done a few searches, but am not sure if I can find a calendar that acts like this... Calendar Example Any help would be greatly appreciated! Hi everyone, I am looking to insert a 225x200 pixel monthly calendar on a webpage. I would like it to just show one month but you can click a down arrow to show a different month. I also would like each day to be changed to a different color (I am going to put in a legend at the bottom with different topics color-coded where the user can see the date and click the topic to learn more). If anyone can help with this code it would be much appreciated! Thanks DvdBonan |
|||||||