?
Solved

How to use frames in this page..

Posted on 2003-03-18
4
Medium Priority
?
183 Views
Last Modified: 2010-04-09
Hey all

I have page which has 2 text boxes which display the date using Calendar Control. I want to add 2 frames to this page and display 2 other pages one by using a link and the 2nd i have to display on the submit button click. How do i do that??

Here is the code for the page which i am using..

Thanks
Ram


<html>
<%
Response.Write Request.Form("date1") & "<BR>"
Response.Write Request.Form("date2")
%>

<SCRIPT Language="JAVASCRIPT">
var frmField, frmValue,aMonth;
var minYear = 1970, maxYear = 2050;

document.write('<table id="tblCalender" cellpadding="1" cellspacing="1" border="0"'
     +'style="position:absolute;visibility:hidden;font-family:sans-serif;font-size:8pt;font-weight:bold;border:thin solid #000;background-color:#ccc;">');
document.write('<tr>');
document.write('<td colspan="6" align="center">');

document.write('<select name="optCalenderMonth" onchange="updateMenu();" style="font-size:8pt;font-weight:bold;">');
for (i=0; i<12; i++){
     document.write('<option value="' + i + '">' + getMonths(i) + '</option>');
}
document.write('</select>&nbsp;&nbsp;');

document.write('<select name="optCalenderYear" onchange="updateMenu();" style="font-size:8pt;font-weight:bold;">');
for (i=minYear; i<=maxYear; i++){
     document.write('<option value="' + i + '">' + i + '</option>');
}
document.write('</select>');
document.write('</td>');

document.write('<td align="right" valign="top"><span style="cursor:hand;font-size:8px;text-align:center;" '
     + 'onmouseover="closeOver();" '
     + 'onmouseout="closeOut();" '
     + 'onclick="closeClick();">&nbsp;X&nbsp;</span></td>');
document.write('</tr>');

document.write('<tr>');
var str = "Sun,Mon,Tue,Wed,Thu,Fri,Sat";
var arr = str.split(',');
for (i=0; i<7; i++){
     document.write('<th style="background-color:#fff;">' + arr[i] + '</th>');
}
document.write('</tr>');
// Grid
for (i = 0; i < 6; i++) { // 6 weeks
     document.write('<tr>');
     for (j = 0; j < 7; j++) { // 7 days per week
          document.write('<td id="tdCalender" style="text-align:left;vertical-align:top;width:25px;cursor:hand;background-color:#fff;" '
               + 'onmouseover="calOver();" '
               + 'onmouseout="calOut();" '
               + 'onclick="calClick();">');
          document.write('</td>');
     }
     document.write('</tr>');
}
document.write('</table>');


function getDates(y, m) {
     var dates = new Array(42);
     var first = new Date(y, m, 1).getDay();
     var days = 32 - new Date(y, m, 32).getDate();
     var i = 1;
     for (j = first; j <first+days; j++) {
          dates[j] = i;
          i++;
     }
     return dates;
}
function getMonths(i){
     var sMonths = "January,February,March,April,May,June,July,August,September,October,November,December";
     aMonth = sMonths.split(',');
     return aMonth[i];
}
function updateMenu(){
     updateCalender(document.getElementById('optCalenderYear').value, document.getElementById('optCalenderMonth').value);
}
function updateCalender(y, m) {
     var arr = getDates(y, m);
     for (i=0; i<document.getElementById('optCalenderYear').options.length; i++) {
          if (document.getElementById('optCalenderYear').options[i].value == y) {
               document.getElementById('optCalenderYear').options.selectedIndex = i;
          }
     }
     for (i=0; i<document.getElementById('optCalenderMonth').options.length; i++) {
          if (document.getElementById('optCalenderMonth').options[i].value == m) {
               document.getElementById('optCalenderMonth').options.selectedIndex = i;
          }
     }
     for (i=0; i<arr.length; i++) {
          if (!isNaN(arr[i])) tdCalender[i].innerText = arr[i];
          else tdCalender[i].innerText = "";
     }
}
function popupCalender(field){
     
//     alert(field)
frmField = document.getElementById(field);
     frmValue = frmField.value;
     var thisDate, thisYear, thisMonth;
     with (document.getElementById('tblCalender')){
          style.visibility = "visible";
          style.top = document.body.scrollTop + event.clientY - 10;
          style.left = document.body.scrollLeft + event.clientX + 6;
//          style.top = field.style.top-10;
//          style.left = field.style.left + 6;

     }
     var reDate = /^\d{2}\/\d{2}\/\d{4}$/;
     if (reDate.test(frmValue)) {
          thisDate = frmValue.split('/');
          thisYear = thisDate[2];
          thisMonth = thisDate[0]-1;
     }
     else {
          thisDate = new Date();
          thisYear = thisDate.getFullYear();
          thisMonth = thisDate.getMonth();
     }
     document.all.optCalenderMonth.focus();
     updateCalender(thisYear, thisMonth);
}
function calOver() {
     if (!isNaN(parseInt(event.srcElement.innerText))) {
          event.srcElement.style.color = "#f00";
     }
}
function calOut() {
     if (!isNaN(parseInt(event.srcElement.innerText))) {
          event.srcElement.style.color = "#000";
     }
}
function calClick() {
     if (!isNaN(parseInt(event.srcElement.innerText))) {
          var strDate = "";
          var strMonth = parseInt(document.getElementById('optCalenderMonth').options[document.getElementById('optCalenderMonth').selectedIndex].value);
          var strYear = document.getElementById('optCalenderYear').options[document.getElementById('optCalenderYear').selectedIndex].value.substring(2,4);
          if (parseInt(event.srcElement.innerText) < 10) strDate += "0";
          strDate += event.srcElement.innerText + '-' + aMonth[strMonth].substring(0,3) + '-';
          strDate += strYear;
          frmField.value = strDate;
          document.getElementById('tblCalender').style.visibility = "hidden";
     }
}
function closeOver() {
     event.srcElement.style.backgroundColor = "#006";
     event.srcElement.style.color = "#fff";
}
function closeOut() {
     event.srcElement.style.backgroundColor = "#ccc";
     event.srcElement.style.color = "#000";
}
function closeClick() {
     frmField.value = frmValue;
     document.getElementById('tblCalender').style.visibility = "hidden";
}

</SCRIPT>
<BODY>

<form METHOD="POST" ACTION="Workshop3.htm"> <center> <b>  HTML Training </b> </center> <br> <br> Start Date
<input type="text" name="date1" onFocus="popupCalender('date1')" size="20">
<p> &nbsp End Date
<input type="text" name="date2" onFocus="popupCalender('date2')" size="20"></p>
<p>&nbsp;<input type="submit" name="b1"> </p>

</form>
</BODY>
</html>
0
Comment
Question by:sramkris
  • 2
  • 2
4 Comments
 

Accepted Solution

by:
RobMe earned 800 total points
ID: 8161715
You could just add target, like this:

<form METHOD="POST" ACTION="Workshop3.htm" TARGET="Main">

if you have a frames page with at frame called main like this example:

<html>
<head>

<title>- Your frame page title here -</title>
</head>

<frameset cols="250,*">
  <frame name="Menu" src=" - your datepicker page here - ">
  <frame name="Main" src=" - some other page you want to display initially - ">
  <noframes>
  <body>
      Your info for ppl without frame support
  </body>
  </noframes>
</frameset>

</html>

Hope this helps, just ask if you want more help
0
 
LVL 1

Author Comment

by:sramkris
ID: 8162396
Thanks for your input but i am not sure i understand it right cause i have not used html before. I want to display all the information on the same date.htm page. I dont want to open another html page.
I want couple of frames on the same page and display one of the pages on the click of the submit button and the other either by using a link.

Thanks
Ram
0
 

Expert Comment

by:RobMe
ID: 8162581
Have a look at http://www.geocities.com/r_israelsson/test/date.htm

is that anywhere near what you want to do?
0
 
LVL 1

Author Comment

by:sramkris
ID: 8289570
Sorry for not replying back earlier as this work was put in the back burner..i will give the points to you for the ans.

Thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question