|
JavaScript - Calendar Javascript Widget - Obtaining Input
How do I retrieve input/selections from this calendar widget on this site: moongarm.99k.org
Similar TutorialsHi all, I have been searching for a long time to obtain the UNC path of a file using the FileUpload control using javascript.. Is there any way to obtain it. Can anyone please guide me to the answer. Thank you, Aswin Good evening! After spending the last few days wrecking my brain over a simple JavaScript quiz I decided it was time I asked for help. The complete code is right beneath this post. The page will display brief instructions followed by a table containing the quiz. I'm having two rather peculiar problems. The first is with the Score() function which reads as follows: function Score(){ for(i=1;i<=10;i++) if(ans[i]== yourAns[i]) score++; prequiz.score.value= score; } Now unless I'm mistaken (which I am since the score isn't being tabulated correctly) this function essentially uses a for to cycle through both arrays, comparing the user's input against the array containing the right answers. If the contents within index i are the same on both arrays the score increases by one point. Once it cycles through the arrays, it passes score over to prequiz.score.value which will later pass this number to the text box that will display the grade to the user. The problem I'm experiencing is that the score will either be stuck at 2 or will display as 9 (even though all 10 answers were correct). Steps I've taken to try to solve this: Thinking it was the setAnsArray(question, answer) function I added a document.writeline to it. However it showed that the values were being passed correctly to the answer array. Added a document.writeline to the Score() function. Unlike the point above, score always displays as 00000 regardless of how many right answers I provide. The second issue I'm having is that the reset button is not working correctly. If I hit reset and answer the first question, the score will come back as double the score displayed before. Any insight into what is causing this issue is greatly appreciated! Code: <?xml version="1.0" encoding= "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns= "http://www.w3.org/1999/xhtml">
<head>
<title>Pre-Quiz!</title>
<script type="text/JavaScript">
var ans= new Array(10);
var yourAns= new Array(10);
var score= 0;
ans[0] = "b";
ans[1] = "c";
ans[2] = "c";
ans[3] = "a";
ans[4] = "d";
ans[5] = "c";
ans[6] = "c";
ans[7] = "a";
ans[8] = "b";
ans[9] = "c";
function setAnsArray(question, answer) {
yourAns[question]= answer;
}
function Score(){
for(i=1;i<=10;i++)
if(ans[i]== yourAns[i])
score++;
prequiz.score.value= score;
}
</script>
</head>
<body>
<h1>Pre-Quiz</h1>
<p>The following test will allow you to evaluate your knowledge in programming prior to starting the course.
After completing the test you will receive a score. Should you have any further doubts feel free to bring them
with you on the first day of class.</p>
</body>
<form name="prequiz" action="JavaScript:Score()">
<center>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value= "Reset" /><br><br>
</center>
<b>Sco </b><input type="text" name="score" disabled=true><br>
<hr>
<center><table border="3" width="65%"
summary= "Questions and options are organized in a table.">
<thead>
<tr>
<th>Question</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>1. The following parameter code is used in which control structure?</b><br>
(int i=0; i<= size; i++)<br> </td>
<td><input type="radio" name="q1" value="a" onClick="setAnsArray(1, this.value)">a. If<br>
<input type="radio" name="q1" value="b" onClick="setAnsArray(1, this.value)">b. For<br>
<input type="radio" name="q1" value="c" onClick="setAnsArray(1, this.value)">c. Do-while<br>
<input type="radio" name="q1" value="d" onClick="setAnsArray(1, this.value)">d. While</td>
</tr>
<tr>
<td><b>2. What does the command "cout" do?</b><br></td>
<td><input type="radio" name="q2" value="a" onClick="setAnsArray(2, this.value)">a. Obtains information from the user.<br>
<input type="radio" name="q2" value="b" onClick="setAnsArray(2, this.value)">b. Closes the window.<br>
<input type="radio" name="q2" value="c" onClick="setAnsArray(2, this.value)">c. Displays on screen.<br>
<input type="radio" name="q2" value="d" onClick="setAnsArray(2, this.value)">d. Pauses a process.</td>
</tr>
<tr>
<td><b>3. What is the origin of name Python? (referring to the programming language)</b><br></td>
<td><input type="radio" name="q3" value="a" onClick="setAnsArray(3, this.value)">a. Creator had a pet python.<br>
<input type="radio" name="q3" value="b" onClick="setAnsArray(3, this.value)">b. Named after a student of Plato.<br>
<input type="radio" name="q3" value="c" onClick="setAnsArray(3, this.value)">c. Named after Monty Python's Flying Circus.<br>
<input type="radio" name="q3" value="d" onClick="setAnsArray(3, this.value)">d. Creator was a fan of Greek mythology.</td>
</tr>
<tr>
<td><b>4. What does HTML stand for?</b><br></td>
<td><input type="radio" name="q4" value="a" onClick="setAnsArray(4, this.value)">a. HyperText Markup Language<br>
<input type="radio" name="q4" value="b" onClick="setAnsArray(4, this.value)">b. Hyper Tools for Managing Languages<br>
<input type="radio" name="q4" value="c" onClick="setAnsArray(4, this.value)">c. Heap Text Manager Lead<br>
<input type="radio" name="q4" value="d" onClick="setAnsArray(4, this.value)">d. Horde Take Much Lore</td>
</tr>
<tr>
<td><b>5. Who invented JavaScript?</b><br></td>
<td><input type="radio" name="q5" value="a" onClick="setAnsArray(5, this.value)">a. Bill Gates<br>
<input type="radio" name="q5" value="b" onClick="setAnsArray(5, this.value)">b. Isaac Newton<br>
<input type="radio" name="q5" value="c" onClick="setAnsArray(5, this.value)">c. Elvis Java<br>
<input type="radio" name="q5" value="d" onClick="setAnsArray(5, this.value)">d. Netscape</td>
</tr>
<tr>
<td><b>6. What is a variable?</b><br></td>
<td><input type="radio" name="q6" value="a" onClick="setAnsArray(6, this.value)">a. An unknown.<br>
<input type="radio" name="q6" value="b" onClick="setAnsArray(6, this.value)">b. A value that changes.<br>
<input type="radio" name="q6" value="c" onClick="setAnsArray(6, this.value)">c. The name for a place in the computer's memory where a certain data is stored.<br>
<input type="radio" name="q6" value="d" onClick="setAnsArray(6, this.value)">d. Part of an algebraic expression.</td>
</tr>
<tr>
<td><b>7. What is a compiler?</b><br></td>
<td><input type="radio" name="q7" value="a" onClick="setAnsArray(7, this.value)">a. Converts the target file into a .zip .<br>
<input type="radio" name="q7" value="b" onClick="setAnsArray(7, this.value)">b. Gathers all documents in one.<br>
<input type="radio" name="q7" value="c" onClick="setAnsArray(7, this.value)">c. A program or set of programs that transforms source code from programming language into another computer language.<br>
<input type="radio" name="q7" value="d" onClick="setAnsArray(7, this.value)">d. Secret ingridient in KFC's chicken</td>
</tr>
<tr>
<td><b>8. Define portability:</b><br></td>
<td><input type="radio" name="q8" value="a" onClick="setAnsArray(8, this.value)">a. Characteristic attributed to a program if it can be used in another OS different from the one it was created in without requiring major rework.<br>
<input type="radio" name="q8" value="b" onClick="setAnsArray(8, this.value)">b. Ease to transport the program's disks.<br>
<input type="radio" name="q8" value="c" onClick="setAnsArray(8, this.value)">c. How big the size of the program is.<br>
<input type="radio" name="q8" value="d" onClick="setAnsArray(8, this.value)">d. Time required to download a program.</td>
</tr>
<tr>
<td><b>9. What is an executable file?</b><br></td>
<td><input type="radio" name="q9" value="a" onClick="setAnsArray(9, this.value)">a. A text document containing code.<br>
<input type="radio" name="q9" value="b" onClick="setAnsArray(9, this.value)">b. A file in a format the computar can directly execute.<br>
<input type="radio" name="q9" value="c" onClick="setAnsArray(9, this.value)">c. A virus.<br>
<input type="radio" name="q9" value="d" onClick="setAnsArray(9, this.value)">d. A malicious program.</td>
</tr>
<tr>
<td><b>10. Which of the following is not a programming language? </b><br></td>
<td><input type="radio" name="q10" value="a" onClick="setAnsArray(10, this.value)">a. HTML<br>
<input type="radio" name="q10" value="b" onClick="setAnsArray(10, this.value)">b. Lua<br>
<input type="radio" name="q10" value="c" onClick="setAnsArray(10, this.value)">c. Moolah<br>
<input type="radio" name="q10" value="d" onClick="setAnsArray(10, this.value)">d. C++</td>
</tr>
</tbody>
</table></center>
</form>
</html>
Hello, Im a coding noob and trying to make this widget display in 3 columns. Can some one help me? I am able to do it with simple css modifications, but the container still only shows up as 1 column rather than 3. Any ideas? Code: <!-- Show static HTML/CSS as a placeholder in case js is not enabled - javascript include will override this if things work -->
<style type="text/css" media="screen">
.gr_custom_container_1318614690 {
/* customize your Goodreads widget container here*/
border: 1px solid gray;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding: 10px 5px 10px 5px;
background-color: #FFFFFF;
color: #000000;
width: 300px
}
.gr_custom_header_1318614690 {
/* customize your Goodreads header here*/
border-bottom: 1px solid gray;
width: 100%;
margin-bottom: 5px;
text-align: center;
font-size: 120%
}
.gr_custom_each_container_1318614690 {
/* customize each individual book container here */
width: 100%;
clear: both;
margin-bottom: 10px;
overflow: auto;
padding-bottom: 4px;
border-bottom: 1px solid #aaa;
}
.gr_custom_book_container_1318614690 {
/* customize your book covers here */
overflow: hidden;
height: 60px;
float: left;
margin-right: 4px;
width: 39px;
}
.gr_custom_author_1318614690 {
/* customize your author names here */
font-size: 10px;
}
.gr_custom_tags_1318614690 {
/* customize your tags here */
font-size: 10px;
color: gray;
}
.gr_custom_rating_1318614690 {
/* customize your rating stars here */
float: right;
}
</style>
<div id="gr_custom_widget_1318614690">
<div class="gr_custom_container_1318614690">
<h2 class="gr_custom_header_1318614690">
<a href="http://www.goodreads.com/review/list/6131699-kevin?shelf=read&utm_medium=api&utm_source=custom_widget" style="text-decoration: none;">Kevin's bookshelf: read</a>
</h2>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&utm_source=custom_widget" title="The Great Gatsby"><img alt="The Great Gatsby" border="0" src="http://photo.goodreads.com/books/1273944449s/4671.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292893?utm_medium=api&utm_source=custom_widget">The Great Gatsby</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/3190.F_Scott_Fitzgerald">F. Scott Fitzgerald</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&utm_source=custom_widget" title="Where the Sidewalk Ends"><img alt="Where the Sidewalk Ends" border="0" src="http://photo.goodreads.com/books/1168052448s/30119.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292900?utm_medium=api&utm_source=custom_widget">Where the Sidewalk Ends</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/435477.Shel_Silverstein">Shel Silverstein</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&utm_source=custom_widget" title="The Alchemist"><img alt="The Alchemist" border="0" src="http://photo.goodreads.com/books/1287827991s/865.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="5 of 5 stars" height="15" src="http://dkt27ch3b0vq7.cloudfront.net/images/layout/stars/red_star_5_of_5.png?1318545374" title="5 of 5 stars, it was amazing" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292913?utm_medium=api&utm_source=custom_widget">The Alchemist</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/566.Paulo_Coelho">Paulo Coelho</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&utm_source=custom_widget" title="Slaughterhouse-Five"><img alt="Slaughterhouse-Five" border="0" src="http://photo.goodreads.com/books/1316813479s/4981.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292927?utm_medium=api&utm_source=custom_widget">Slaughterhouse-Five</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/2778055.Kurt_Vonnegut">Kurt Vonnegut</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&utm_source=custom_widget" title="Of Mice and Men"><img alt="Of Mice and Men" border="0" src="http://photo.goodreads.com/books/1309211906s/890.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="3 of 5 stars" height="15" src="http://d16kthk4voxb3t.cloudfront.net/images/layout/stars/red_star_3_of_5.png?1318545374" title="3 of 5 stars, liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292969?utm_medium=api&utm_source=custom_widget">Of Mice and Men</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/585.John_Steinbeck">John Steinbeck</a>
</div>
</div>
<div class="gr_custom_each_container_1318614690">
<div class="gr_custom_book_container_1318614690">
<a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&utm_source=custom_widget" title="Lord of the Flies"><img alt="Lord of the Flies" border="0" src="http://photo.goodreads.com/books/1165637417s/7624.jpg" /></a>
</div>
<div class="gr_custom_rating_1318614690">
<img alt="4 of 5 stars" height="15" src="http://d2owxupnsl35mn.cloudfront.net/images/layout/stars/red_star_4_of_5.png?1318545374" title="4 of 5 stars, really liked it" width="75" />
</div>
<div class="gr_custom_title_1318614690">
<a href="http://www.goodreads.com/review/show/202292999?utm_medium=api&utm_source=custom_widget">Lord of the Flies</a>
</div>
<div class="gr_custom_author_1318614690">
by <a href="http://www.goodreads.com/author/show/306.William_Golding">William Golding</a>
</div>
</div>
<br style="clear: both"/>
<center>
<a href="http://www.goodreads.com/"><img src="http://www.goodreads.com/images/widget/widget_logo.gif" alt="goodreads.com" style="border:0;" /></a>
</center>
<noscript>
Share <a href="http://www.goodreads.com">book reviews</a> and ratings with Kevin, and even join a <a href="http://www.goodreads.com/group/">book club</a> on Goodreads.
</noscript>
</div>
</div>
<script src="http://www.goodreads.com/review/custom_widget/6131699.Kevin's%20bookshelf:%20read?cover_position=left&cover_size=small&num_books=6&order=a&shelf=read&show_author=1&show_cover=1&show_rating=1&show_review=1&show_tags=1&show_title=1&sort=date_added&widget_bg_color=FFFFFF&widget_bg_transparent=&widget_border_width=1&widget_id=1318614690&widget_text_color=000000&widget_title_size=medium&widget_width=medium" type="text/javascript" charset="utf-8"></script>
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 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&groupId=10136&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... 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 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 Hello, I have a question about the cut and paste javascript events calendar at http://www.javascriptkit.com/script/...calendar.shtml Is there any way to add links to the event description that appears in the box below the calendar? Thanks for your help. Hey Guys, I'm playing around with the facebook API with very limited knowledge of JavaScript, and I was wondering how I could use the FB social graph to extract user interests and display it on my site. I have the authentication set up, but I'm not sure how I would retrieve the interests, which is a JSON array. Here's my code so far Code: FB.api('/me', function(user) {
if(user != null) {
//create image variable and getting image
var image = document.getElementById('image');
image.src = 'http://graph.facebook.com/' + user.id + '/picture';
//create name variable and getting name
var name = document.getElementById('name');
name.innerHTML = user.name
var movies = document.getElementById("movies");
}
});
I'm not sure how I would get the movies and display the information- I know what I did isn't right since "movies" is an array... Any help is appreciated. Thanks! Hello everyone, I am creating a small application for my memory book. I want to have one of those calendars like in Here .. that would retutn values like: day month year - seperatelly that I could use in php. Im looking for easy solution if there is one.. Simple and short script Kind regards, Aurimas I need javascript event calendar sourcecode with highlighting of colors when dates selecting from datepicker of DHTMLgoodies calendar Hey I got two text boxes one for start date and second for end date in that i want to fill text boxes according to Quarter of a year, as like if i put 1-4-2012 in first text box then in second text box values should be automatically 30-6-2012. So now tell me please how to do this ??????? Regards rajboy13 Contact me @ = rajboy13@gmail.com hey guys, I have to create a scientific calculator using javascript and I am wondering how I can make it so that the equals box (box that displays the answer) cannot be manually cleared with the mouse cursor. thanks! Scott Anyone know how do I use javascript to limit the numeric amount enetered in a text box less than 1000?
I am stuck on this question. 1. To set the value contained in a field such as an input box, you must use the ____________________ property. This is based on Javascript. What type of properties are used for fields in an input box? Thanks Hello all, My website has a search field at the index page. I want to test this search field for vulnerabilities by entering Javascript. When i enter <script>alert("test");</script> in the search field there comes a pop-up which says: "best" instead of "test". When I enter <script>alert("test123");</script> the pop-up says: "test" instead of "test123" The page source displays the following after I enter <script>alert("test");</script> in the search field. As you can see it changes my "test" input to "best" for some kind of reason. <a href="/searchresults.jsp?searchpage=1&freetext=%3Cscript%3Ealert%28%22best%22%29%3B%3C%2Fscript%3E& pagepart=objectname;description;shorturl&expressionset=&nodelocation=0000000000010000&ds mshowinsearch=true&dateformat=dd-MM-yyyy&creationdatestart=&creationdateend=&modificationdatestart=&modificationdateend= &publicationdatestart=&publicationdateend=&searchbase=0&searchrange=10&expans ion =" class="blauw bold italic"><script>alert(" best ");</script></a> <a href="/searchresults.jsp?searchpage=2&freetext=%3Cscript%3Evoert%28%22test%22%29%3B%3C%2Fscript%3E& pagepart=objectname;description;shorturl&expressionset=&nodelocation=0000000000010000&ds mshowinsearch=true&dateformat=dd-MM-yyyy&creationdatestart=&creationdateend=&modificationdatestart=&modificationdateend= &publicationdatestart=&publicationdateend=&searchbase=0&searchrange=10&expans ion =" class="blauw bold italic"><script>voert(" test ");</script></a> <a href="/searchresults.jsp?searchpage=3&freetext=%3Cscriptie%3Ealert%28%22test%22%29%3B%3C%2Fscriptie%3E& amp;pagepart=objectname;description;shorturl&expressionset=&nodelocation=0000000000010000&am p;dsmshowinsearch=true&dateformat=dd-MM-yyyy&creationdatestart=&creationdateend=&modificationdatestart=&modificationdateend= &publicationdatestart=&publicationdateend=&searchbase=0&searchrange=10&expans ion =" class="blauw bold italic"><scriptie>alert(" test ");</scriptie></a> </p> <p class="sorteer-aantal">Deze zoekvraag levert geen resultaten op</p> So in some way my website changes my input, but what is happening? and is it possible that somebody can abuse this searchfield? Thanks in advance for your reply, Hanna (a newbie with Javascript) I'm new in web-development. I've searched it but it's not found. I make a input then how i get value of it for javascript value?
I have tried using Microsofts translator widget but it messes up my menu that I wish it to sit beside, the widget is almost twice the height if my menu bar. I am after a widget that is just text and the user clicks it to open up a select language box. Does anyone have other widgets they use that is based on a single line selector not more than say 15px high or some thing like that ? |
|||||||