JavaScript - Cut And Paste Javascript Events Calendar

I am using a freebie script that changes css elements using onClick when you hit a button.

I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list.

2 button examples (and js code) is:
<input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" />
<input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" />


How do I convert this to a SELECT list??

Thank you!

in the attached photos you have a wheel of colors and a corresponding cascading menu. I'd like to just be able to onmouseover one of the 8 colored polygons within the wheel, have it replace the wheel with one of 8 new images depending on which polygon the mouse is over, and at the same time, light up the corresponding image on the cascading company menu group. is this possible with javascript? links to a tutorial?

I've had some experience with replacing one image with another onmouseover, but not with breaking up one image into 8 parts, each with a separate image replacement. I could see how you could perform this with only 4 different colored polygons, but not 8.

Hi all,

The question is hopefully relatively simple. if I have an object say
Code:

[
var SampleObject = function(id){
  SampleObject.id = id;
  SampleObject.age= 22;
}

Is there a way to create an event that triggers every time the age member value changes?

Thanks
Ollie.

Hi I am using httpXmlRequest object to call a xml web service. In order to successfully perform a task there are couple steps need to happen.

1 you have to request for a session (cookie)
2 with the cookie, we need to authenticate with the server
3 then perform other actions

snippet of my code looks something like this. Basically here i am trying to get the cookie, login and then logout once logged in.

function connect() {
document.myForm.elements['myTextArea'].value += "connecting to teh server.\n";
try {
xhttp.open("GET",urlStr + commonInfoParam, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
if(xmlDoc.readyState == 4) {
var resultsTag = null;
resultsTag = xmlDoc.getElementsByTagName("results");

if(resultsTag != null) {
for(i=0;i<resultsTag.length;i++) {
var commonTag = resultsTag[i].getElementsByTagName("common");
for(j=0;j<commonTag.length; j++) {
cookie = commonTag[j].getElementsByTagName("cookie")[0].childNodes[0].nodeValue;
break;
}
}
}
if(cookie != null) {
document.myForm.elements['myTextArea'].value += "cookie found: " + cookie + "\n";
login();
}
}
};
} catch(e) {
document.myForm.elements['myTextArea'].value += "Exception occurred at connect: " + e.message + "\n";
}
}




function login() {
var loginRequestURL = "http://testconnect.com/api/xml?action=login&login=" + username+ "&password=" + password + "&session=" + cookie;
try {
xhttp.open("GET", loginRequestURL, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert('in loginResponseHandler');
if(xmlDoc.readyState == 4) {
try {
loginStatus = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(loginStatus == 'ok') {
alert("login is good: " + loginStatus);
logout();
} else {
}
} catch(e) {}
}
};
} catch(e) {
}
}




function logout() {
alert("in logout");
try {
xhttp.open("GET", logoutRequestURL + cookie, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert("in logoutResponseHandler");
if(xmlDoc.readyState == 4) {
try {
status = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(status == 'ok') {
alert(status);
}
} catch(e) {}
}
};
}
catch(e) {}
}


so when I run my code in the browser, all my alert stages give me proper message as expected. But at the final alert, it hangs. I just could not figvure out what am i doing wrong. can any one pin point this out for me please?

Thanks in advance.

KM

Hello

I need help regarding capturing page events(mouse click ,navigation) etc on web pages and write them into a text file (using javascript). One way is using javascript events and writing them into text file. Is there be a better way of doing this ??

Can we have two onFocus javascriptscript events for single HTML Tag? Thank you..

without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events?

for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

Code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.

consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

any help!?

HTML TARGET:

Code:

<div id="login_link" style="margin-top:-142px;margin-left:245px;height:142px;">
		<img id="login_link" src="menu_button.png" /><a href="#"><img src="menu_button.png" /></a></div>
</div>

I'm trying to get menu_button.png to change to menu_button2.png on mouseover... I'd also like it to play a sound on click like "click.wav" I can't rename the div because it controls the slider

Heres my current project table:

http://bit.ly/dbwH23

I tried to put it in a span and have the span referance to the next tag but it didn't seem to work at least not in firefox. I'm going to keep lookin around but i'm not used to these types of code structure.

I was thinking of Embeding a flash file inside the div instead but that might be overkill. Anyone know of a solution that might work?

how to create a customizable event based calender

i need to create a grid calender

where user can edit the fields of the dates and he can block some dates !

is it possible please help to me

i hope u will help to me

thanking you

reply soon

Hello Friends...
I am working on the healthcare project.So in that project there are different html pages for the user interaction & Events,such as user registration,patient profiles,doctor registration.
So in the patient registration page i want to add the calendar control the requirement is
whenever i click on the calendar control the user selected date is displayed in the textbox in the ddmmyyyy format..
So please tell me the answer...

Thanking you.....
Umesh

Hi,
I want to build a custom calendar using javascript.
On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month.
There are 3 button below the calendar as prev mnth,create schedule,next mnth.
when prev is clicked it should works same as on load for previous month, similarly for next mnth.

Pls help its urgent.

Thanks

Hello friends...
i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page.
In registration page to register the portal the birth date of user is required .
so i have added the calendar control using javascript.
I want that whenever user clicks on the calendar the birth date is displayed in the textfield.
but it cannot displayed the birth date...
So please tell me the sloution...

following is the code for calendar control

<p>
<meta content="text/html;" http-equiv="Content-Type" />
<style type="text/css">
#calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; }
#calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; }
#calenderTableHead TR { background-color: #5FB404; }
#calenderTableDays TR { background-color: #B40404; color: #E6E6E6; }
.normalDay { border: 1px dotted black; cursor: pointer; }
.hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; }
.toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; }
.choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; }
</style>
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script language="javaScript" type="text/javascript" src="calendar.js">
// 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;
}

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; Tag.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;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
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;
}
</script>
<link rel="stylesheet" type="text/css" href="calendar.css" /></p>
<form>
<input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&amp;groupId=10136&amp;t=1294233035464" /></a>
</form>
<!-- Calender Script -->
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));">
<option value="0" selected="selected">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 id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td>
<td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr>
<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>
<!-- End Calender Script -->

Thanking you...

I downloaded a popup datepicker from javascriptkit.com. All great but can't take the time out of the footer. I only want the date to show, and once selected, I would like the field to be filled with "Day, Date, Month, Year" (no time).

Code is as follows:

Code:

function show_calendar(str_target, str_datetime) {
	var arr_months = ["January", "February", "March", "April", "May", "June",
		"July", "August", "September", "October", "November", "December"];
	var week_days = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
	var n_weekstart = 1; // day week starts from (normally 0 or 1)

	var dt_datetime = (str_datetime == null || str_datetime =="" ?  new Date() : str2dt(str_datetime));
	var dt_prev_month = new Date(dt_datetime);
	dt_prev_month.setMonth(dt_datetime.getMonth()-1);
	var dt_next_month = new Date(dt_datetime);
	dt_next_month.setMonth(dt_datetime.getMonth()+1);
	var dt_firstday = new Date(dt_datetime);
	dt_firstday.setDate(1);
	dt_firstday.setDate(1-(7+dt_firstday.getDay()-n_weekstart)%7);
	var dt_lastday = new Date(dt_next_month);
	dt_lastday.setDate(0);
	
	// html generation (feel free to tune it for your particular application)
	// print calendar header
	var str_buffer = new String (
		"<html>\n"+
		"<head>\n"+
		"	<title>Calendar</title>\n"+
		"</head>\n"+
		"<body bgcolor=\"White\">\n"+
		"<table class=\"clsOTable\" cellspacing=\"0\" border=\"0\" width=\"100%\">\n"+
		"<tr><td bgcolor=\"#4682B4\">\n"+
		"<table cellspacing=\"1\" cellpadding=\"3\" border=\"0\" width=\"100%\">\n"+
		"<tr>\n	<td bgcolor=\"#4682B4\"><a href=\"javascript:window.opener.show_calendar('"+
		str_target+"', '"+ dt2dtstr(dt_prev_month)+"'+document.cal.time.value);\">"+
		"<img src=\"prev.gif\" width=\"16\" height=\"16\" border=\"0\""+
		" alt=\"previous month\"></a></td>\n"+
		"	<td bgcolor=\"#4682B4\" colspan=\"5\">"+
		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"
		+arr_months[dt_datetime.getMonth()]+" "+dt_datetime.getFullYear()+"</font></td>\n"+
		"	<td bgcolor=\"#4682B4\" align=\"right\"><a href=\"javascript:window.opener.show_calendar('"
		+str_target+"', '"+dt2dtstr(dt_next_month)+"'+document.cal.time.value);\">"+
		"<img src=\"next.gif\" width=\"16\" height=\"16\" border=\"0\""+
		" alt=\"next month\"></a></td>\n</tr>\n"
	);

	var dt_current_day = new Date(dt_firstday);
	// print weekdays titles
	str_buffer += "<tr>\n";
	for (var n=0; n<7; n++)
		str_buffer += "	<td bgcolor=\"#87CEFA\">"+
		"<font color=\"white\" face=\"tahoma, verdana\" size=\"2\">"+
		week_days[(n_weekstart+n)%7]+"</font></td>\n";
	// print calendar table
	str_buffer += "</tr>\n";
	while (dt_current_day.getMonth() == dt_datetime.getMonth() ||
		dt_current_day.getMonth() == dt_firstday.getMonth()) {
		// print row heder
		str_buffer += "<tr>\n";
		for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
				if (dt_current_day.getDate() == dt_datetime.getDate() &&
					dt_current_day.getMonth() == dt_datetime.getMonth())
					// print current date
					str_buffer += "	<td bgcolor=\"#FFB6C1\" align=\"right\">";
				else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
					// weekend days
					str_buffer += "	<td bgcolor=\"#DBEAF5\" align=\"right\">";
				else
					// print working days of current month
					str_buffer += "	<td bgcolor=\"white\" align=\"right\">";

				if (dt_current_day.getMonth() == dt_datetime.getMonth())
					// print days of current month
					str_buffer += "<a href=\"javascript:window.opener."+str_target+
					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
					"<font color=\"black\" face=\"tahoma, verdana\" size=\"2\">";
				else 
					// print days of other months
					str_buffer += "<a href=\"javascript:window.opener."+str_target+
					".value='"+dt2dtstr(dt_current_day)+"'+document.cal.time.value; window.close();\">"+
					"<font color=\"gray\" face=\"tahoma, verdana\" size=\"2\">";
				str_buffer += dt_current_day.getDate()+"</font></a></td>\n";
				dt_current_day.setDate(dt_current_day.getDate()+1);
		}
		// print row footer
		str_buffer += "</tr>\n";
	}
	// print calendar footer
	str_buffer +=
		"<form name=\"cal\">\n<tr><td colspan=\"7\" bgcolor=\"#87CEFA\">"+
		"<font color=\"White\" face=\"tahoma, verdana\" size=\"2\">"+
		"Time: <input type=\"text\" name=\"time\" value=\""+dt2tmstr(dt_datetime)+
		"\" size=\"8\" maxlength=\"8\"></font></td></tr>\n</form>\n" +
		"</table>\n" +
		"</tr>\n</td>\n</table>\n" +
		"</body>\n" +
		"</html>\n";

	var vWinCal = window.open("", "Calendar", 
		"width=200,height=250,status=no,resizable=yes,top=200,left=200");
	vWinCal.opener = self;
	var calc_doc = vWinCal.document;
	calc_doc.write (str_buffer);
	calc_doc.close();
}
// datetime parsing and formatting routimes. modify them if you wish other datetime format
function str2dt (str_datetime) {
	var re_date = /^(\d+)\-(\d+)\-(\d+)\s+(\d+)\:(\d+)\:(\d+)$/;
	if (!re_date.exec(str_datetime))
		return alert("Invalid Datetime format: "+ str_datetime);
	return (new Date (RegExp.$3, RegExp.$2-1, RegExp.$1, RegExp.$4, RegExp.$5, RegExp.$6));
}
function dt2dtstr (dt_datetime) {
	return (new String (
			dt_datetime.getDate()+"-"+(dt_datetime.getMonth()+1)+"-"+dt_datetime.getFullYear()+" "));
}
function dt2tmstr (dt_datetime) {
	return (new String (
			dt_datetime.getHours()+":"+dt_datetime.getMinutes()+":"+dt_datetime.getSeconds()));
}

This is called with:

Code:

<html lang="en">
<head>
    <script language="JavaScript" src="ts_picker.js">

</script>
</head>
<body>
   <form name="tstest">
<input type="Text" name="timestamp" value="">
<a href="javascript:show_calendar('document.tstest.timestamp', document.tstest.timestamp.value);"><img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp"></a>
</form> 
</body>
</html>

Thanks for any help!!!

Ruth