?
Solved

How to use frames in this page..

Posted on 2003-03-18
4
Medium Priority
?
180 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

764 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