A couple of questions

@thatonedudeldsJan 06.2009

Question number 1: Currently I have an html calendar on one of my websites, that I use to display weekly information. Yeah, I used some nifty tricks to spice it up and make it look colorful rather than bland, the two problems an html calendar has.

1: It does not auto switch on the first of every month, I have to manually switch out calendars.

2: It does not show the current date.

Question? Is there any way to use javascript to fix these two problems?

Question number 2: On the same site as the calendar, I am currently using a simple copy and paste application, which personally I think just plain is crap. Is there any way to use javascript to create an application that people can fill out on the site that will be sent to my email address when they click the submit button?

to post a comment

JavaScript

7 Comments(s) _↴

@MrNobodyJan 07.2009 — #OK, first question... Do you have server-side scripting available on the web site? I ask, because it is better to do these things using server-side, rather than client-side, scripting. The reason is that client-side scripting can be disabled by the visitor -- thus, making your site appear to be broken.

@thatonedudeldsauthorJan 07.2009 — #I have no idea, I've been asking freewebs (now webs) that for years and no one ever answers.

@MrNobodyJan 07.2009 — #Well, you can test it out for yourself. Create a file called [B]info.php[/B] and upload it to the root folder for your website. Put the following in that file:

[code=php]<?php
 phpinfo();
 ?>[/code]

Then go to your browser and type in the internet address (url) for that file:
[CODE]http://www.mydomain.com/info.php[/CODE]
If you get a huge list of formatted information about PHP and your server, then you at least have PHP scripting available to you. If you only see the content of that file, then you do not.

@thatonedudeldsauthorJan 07.2009 — #Tried it, all that was shown on the page when viewing it was the code.

@MrNobodyJan 07.2009 — #OK, then you probably have no server-side scripting available to you. This is not uncommon for free web hosts. Here is a JavaScript calendar generator I wrote many, many years ago -- but it still works. You can test it with this little page:

Call this: calendar_popup.html:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Date Chooser</title>
 </head>
 
 <body>
 <form name="myDates">
 <p>
 <input type="text" name="datebox1" size="12"> &lt;== Date #1 &#8212; Click ==&gt; <a href="Click-a-Date&#169;"
 onMouseOut="window.status=''; return true;" onMouseOver="window.status='Click-a-Date&#169;'; return true;"
 onClick="window.open('click_a_date.html?val=document.myDates.datebox1&fmt=mdy', '_blank', 'width=238,height=348,resizable=yes,scrollbars=no');
 return false;"><img src="../images/calendar.gif" border="0" width="50" height="41"></a><br>
 <input type="text" name="datebox2" size="12"> &lt;== Date #2 &#8212; Click ==&gt; <a href="Click-a-Date&#169;"
 onMouseOut="window.status=''; return true;" onMouseOver="window.status='Click-a-Date&#169;'; return true;"
 onClick="window.open('click_a_date.html?val=document.myDates.datebox2&fmt=mdy', '_blank', 'width=238,height=348,resizable=yes,scrollbars=no');
 return false;"><img src="../images/calendar.gif" border="0" width="50" height="41"></a>
 </p>
 </form>
 
 </body>
 </html>[/code]

Call this: click_a_date.html

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Language" content="en-us">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Calendar</title>
 <style type="text/css">
 <!--
 .nolb { border-left: 0px; }
 .norb { border-right: 0px; }
 .left { text-align: left; }
 .right { text-align: right; }
 .year {
 background-color: #CCCCCC;
 vertical-align: top;
 }
 .year input {
 width: 52px;
 height: 26px;
 }
 input.year {
 background-color: #CCCCCC;
 font-family: Times New Roman;
 font-size: 18pt;
 font-weight: bold;
 text-align: center;
 }
 .month {
 background-color: #CCCCCC;
 font-family: Times New Roman;
 font-size: 12pt;
 font-weight: bold;
 text-align: center;
 }
 .dow {
 background-color: #99CCFF;
 font-family: Times New Roman;
 font-size: 8pt;
 text-align: center;
 vertical-align: middle;
 }
 .day {
 background-color: #CCCCCC;
 text-align: center;
 vertical-align: middle;
 }
 .day input {
 width: 32px;
 height: 32px;
 }
 -->
 </style>
 <script type="text/javascript">
 <!-- //
 var prevDD = "";
 function initCalendar() {
 var ele = document.forms[0].elements['tday'];
 var x, len = ele.length;
 for (x=0; x<len; ++x) {
 ele[x].onclick = function() {
 return checkTday(this, this.form.currMonth.selectedIndex+1, this.form.currYear.value);
 }
 }
 var curDate = new Date();
 var mm = curDate.getMonth();
 var yr = curDate.getYear();
 yr = (yr<1000)?((yr<30)?2000+yr:1900+yr):yr;
 document.forms[0].currMonth.options[mm].selected = true;
 document.forms[0].currYear.value = yr;
 dispMonth(mm, yr);
 }
 function dispMonth(mm, yr) {
 if (prevDD != "") {
 prevDD.style.backgroundColor = transparent;
 prevDD = "";
 }
 mdom[1] = (leapYear(yr))?29:28; 
 var curDate = new Date(yr, mm, 1);
 var dom = (curDate.getDay() * -1) + 1;
 var dd = document.forms[0].tday;
 var i, len = dd.length
 for (i=0; i<len; i++) {
 if (1 <= dom && dom <= mdom[mm]) {
 dd[i].value = ""+dom+"";
 dd[i].style.visibility = "visible";
 }
 else {
 dd[i].value = "";
 dd[i].style.visibility = "hidden";
 }
 dom++;
 }
 document.forms[0].currMonth.focus();
 return true;
 }
 mdom = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
 function leapYear(yr) {
 yr = Number(yr);
 yr = (yr<1000)?((yr<30)?2000+yr:1900+yr):yr;
 if((yr&#37;400)==0 || ((yr%4)==0 && (yr%100)!=0)) return true;
 return false;
 }
 function checkTday(btn, mm, yy) {
 if (prevDD != "") prevDD.style.backgroundColor = transparent;
 prevDD = btn;
 if (btn.style) btn.style.backgroundColor = "green";
 var dd = Number(btn.value);
 if (dd < 10) dd = "0" + dd.toString();
 if (mm < 10) mm = "0" + mm.toString();
 var str, searchString = new Object();
 var ary = window.location.search.substr(1).split("&");
 for (var i in ary) {
 ary[i] = unescape(ary[i]).split("=");
 searchString[ary[i][0]] = ary[i][1];
 }
 switch (searchString["fmt"]) {
 case "mdy":
 str = mm + "/" + dd + "/" + yy;
 break;
 case "dmy":
 str = dd + "/" + mm + "/" + yy;
 break;
 default:
 str = yy + "/" + mm + "/" + dd;
 searchString["fmt"] = "ymd";
 }
 if (searchString["url"]) {
 if (searchString["tgt"])
 newWin = window.open(searchString["url"]+"?date="+escape(str)+"&fmt="+searchString["fmt"],
 searchString["tgt"], "width=600,height=480");
 else
 newWin = window.open(searchString["url"]+"?date="+escape(str)+"&fmt="+searchString["fmt"],
 "_blank", "width=600,height=480");
 }
 if (searchString["fnc"]) {
 eval('window.opener.'+searchString["fnc"]+'("'+str+'")');
 }
 if (searchString["var"]) {
 eval('window.opener["'+searchString["var"]+'"]="'+str+'"');
 }
 if (searchString["val"]) {
 eval('window.opener.'+searchString["val"]+'.value="'+str+'"');
 }
 self.close();
 return true;
 }
 // -->
 </script>
 </head>
 
 <body onload="initCalendar()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
 
 <div align="center">
 <form>
 <table border="2" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
 <tr>
 <td colspan="2" class="left year norb">
 <input type="button" value="&lt;&lt;&nbsp;year"
 onclick="currYear.value=--currYear.value; return dispMonth(currMonth.selectedIndex, currYear.value);">
 </td>
 <td colspan="3" class="nolb norb">
 <input type="text" name="currYear" class="year" size="4"
 onchange="return dispMonth(currMonth.selectedIndex, this.value)"><br>
 <select name="currMonth" class="month" size="1"
 onchange="return dispMonth(this.selectedIndex, currYear.value)">
 <option>January</option>
 <option>February</option>
 <option>March</option>
 <option>April</option>
 <option>May</option>
 <option>June</option>
 <option>July</option>
 <option>August</option>
 <option>September</option>
 <option>October</option>
 <option>November</option>
 <option>December</option>
 </select></td>
 <td colspan="2" class="right year nolb">
 <input type="button" value="year&nbsp;&gt;&gt;"
 onclick="currYear.value=++currYear.value; return dispMonth(currMonth.selectedIndex, currYear.value);">
 </td>
 </tr>
 <tr>
 <th class="dow norb">Sun</th>
 <th class="dow nolb norb">Mon</th>
 <th class="dow nolb norb">Tue</th>
 <th class="dow nolb norb">Wed</th>
 <th class="dow nolb norb">Thu</th>
 <th class="dow nolb norb">Fri</th>
 <th class="dow nolb">Sat</th>
 </tr>
 <tr>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 </tr>
 <tr>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 </tr>
 <tr>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 </tr>
 <tr>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 </tr>
 <tr>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 </tr>
 <tr>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day"><input type="button" name="tday"></td>
 <td class="day">&nbsp;</td>
 <td class="day">&nbsp;</td>
 <td class="day">&nbsp;</td>
 <td class="day">&nbsp;</td>
 <td class="day">&nbsp;</td>
 </tr>
 </table>
 </form>
 </div>
 
 </body>
 </html>[/code]

@thatonedudeldsauthorJan 08.2009 — #That's the thing that sucks though. I pay for a domain and I still can't use php.

@MrNobodyJan 08.2009 — #Yeah, but paying for a domain name is not the same as paying for hosting your website. For example, you can go to HostMonster.com and pay $5.95 per month for unlimited web hosting (which also includes a domain name) and get PHP and eMail abilities, too.

Also in #JavaScript _↴

Text only conferencing tool or software adding currency field values [RESOLVED] Form validation problem...

Success!

Help @thatonedudelds spread the word by sharing this article on Twitter...

Tweet This

A couple of questions

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

A couple of questions

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴