Web Team Linking

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Heidi Housten, Tom Moran, Rafael M. Muñoz, and Kusuma Vellanki
Microsoft Corporation

December 4, 2000

This month the Web Team crosses time zones, shows off its research skills, plays a little hide and seek, and throws open the windows for a few laughs. Read on to get hooked up.

Giving the time of day—Time to get local
Putting it all together—Manipulating right frame from within left frame
Between the Windows—Reloading the parent window

The Web Team in Short

Giving the Time of Day

Dear Web Team:

Our company is hosting an e-commerce site that will be used by customers of our sister company. We are located in beautiful Grand Rapids, Michigan, but they are located in The Netherlands. I want to be able to show the correct date and time on the Web pages, reflecting the time in The Netherlands to make tracking orders and log-ins easier. However, the Web server that hosts that particular site also hosts our own Web site so I cannot change the Web server's time settings. Is there a way to adjust the date and time settings (and take into account daylight savings time) so the user isn't confused?

Matthew Flikinger

The Web Team replies:

Life made simple by the JScript® Date object! Matthew, all you need is some simple client-side script to display the local time to your users. When the Date object is created without any parameters, it is initialized to the current (UTC) time. Universal Coordinated Time (UTC) is equivalent to the mean solar time at the prime meridian (0° longitude), formerly expressed in Greenwich Median Time (GMT).

You can then use the toLocaleString method to get the string representation of the date and time using the client's locale settings. For example, if your time zone is set to Pacific time, the time in the resulting display string will be eight hours behind the UTC.

You can also create a custom display string by using the methods provided by the Date object, such as getDate, getFullYear, etc. Refer to the scripting site for more information on these functions.

Here's a sample HTML file that displays the current time. You can use the toLocaleStrDemo or create and return your own display format using the TimeDemo function to retrieve the time.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function toLocaleStrDemo(){   
   var d, s;                      //Declare variables.
   d = new Date();                //Create Date object.
   s = d.toLocaleString();       //Convert to current locale.
   return(s);                     //Return converted date
}
function TimeDemo(){
   var d, s;
   d = new Date();
   s = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
   return(s);
}
function ShowTime()
{
   document.all.currTime.innerText = TimeDemo();
}
window.onload = ShowTime;
</SCRIPT>
</HEAD>
<BODY>
Login time is: <SPAN ID=currTime NAME=currTime></SPAN>
</BODY>
</HTML>

To retrieve the local time from the Data object, use the functions getDate, getMonth, getFullYear, etc. If the JScript is executed on the server, you will get the server's local time, and likewise for the client machine. You can also retrieve the UTC equivalents using the getUTCDate, getUTCMonth, getUTCFullYear functions that will, of course, return the same value on both the client and the server. Another useful function to know in these scenarios is the getTimezoneOffset method that gives you the difference in minutes between the time on the host machine and the UTC.

Putting It All Together

Dear Web Team:

I am using <SPAN> tags to hide and show certain blocks of content. One sample of how I change this "display" setting is with the document.all.style.display = "none"; command. My question arises when I want to change that display setting from a different frame. Say I have a left navigation frame and a right frame. I want a click from the left navigation frame to cause something on the right side to disappear. What would the JavaScript look like for something like this?

Thanks,

Ron Martin, Jr.

The Web Team replies:

Ron, your question provided us a great opportunity to demonstrate to everyone how we sometimes put things together to come up with answers for our readers. Our mission—using the MSDN resources to see if we can target one frame from another and make items hidden or visible.

Our first stop is the MSDN Online Download Center in search of a possible sample. Following the table of contents, we travel to the Web & Internet Samples area and see that we have a sample under DHTML that shows the difference between visibility and display.

Moving over to the MSDN Library, we visit the DHTML References area found in the DHTML, HTML & CSS section and look up the Frame object. Reading through the information, at the bottom we see a code snippet that describes how to reference an object from another frame of the same frameset. The snippet shows us that if we know the targeted frame's name, we can go up to the parent and down through the frames Collection, and have access to the objects we need.

Armed with this information, we modify the source slightly and create two frames called left and right. How's that for imagination? In the right frame we add the text to be targeted:

<SPAN ID=v STYLE="visibility:hidden"><P>
This is <EM>sample data</EM> made visible.
The space for this content is already taken up, even though the content 
   is initially invisible.</P>
</SPAN>

In the left frame, we then pull the inline JavaScript out and create a couple of functions that will control the display or visibility of the text in the right frame:

function visibleclick()
{
   if (parent.frames.right.document.all.v.style.visibility=='hidden')
     parent.frames.right.document.all.v.style.visibility='';
   else
     parent.frames.right.document.all.v.style.visibility='hidden';
}

Put this all together in a frameset and we now have perfection! View our sample to see it in action.

Between the Windows

Dear Web Team:

I have a page that opens a new window with a form in it. When the form has been posted, the results page has a script on it that I would like to use to refresh the parent window. My code is as follows:

function refreshParent() {
   parent.location.reload(true);
}
<body onunload="refreshParent()">

However, this doesn't work. Is this possible? Thanks for your help!!!

Harris Boyce

The Web Team replies:

You were pretty close Harris; maybe you'll get the cigar next time! To access the parent window you need to refer to the object contained in window.opener.

Here is a little example that shows how to refresh the parent window when the child is closed or refreshed. We added a little button that illustrates how you might make changes directly to the parent window content as well.

The parent window contains the following code:

<html>
<head><title>Parent Page</title></head>
<script language="jscript">
function openChild()
{
   winAtts="width=300,height=200,toolbar=no,directories=no,top=300";
   myChild = window.open("child.htm","child",winAtts);
}
function showTime(){
  var d, s;
  d = new Date();
  s = "Current time is ";
  s += d.toLocaleString();
  timeDiv.innerText=s
}
</script>
<body onload="showTime()">
<div id="timeDiv"></div>
<input type="button" onclick="openChild()" value="Open Child Window" />
</body>
</html>

And the child window contains the following:

<html>
<head><title>Child Page</title></head>
<script language="jscript">
var pWin
function setParent(){
    pWin = top.window.opener
}
function reloadParent(){
   pWin.location.reload(true)
}
function tickleParent(){
   pWin.timeDiv.innerText="oh! teee heheee, stop!"
}
</script>
<body onload="setParent()" onunload="reloadParent()">
To refresh the time on the parent window,
close or reload this window.<br /><br />
<input type="button" value="tickle parent" onclick="tickleParent()" />
</body>
</html>

The sharp-eyed among you may have noticed something a little unusual in a couple of the HTML tags. Here on the Web Team, we have been doing some work with XML and XML style sheet (XSL) transformations. When you include HTML tags in XSL sheets, the HTML has to be XML compliant. This means things such as: all tags must be closed; all attributes must be quoted; tag case must be consistent (you can't have <title>my page</TITLE>); and tags can't overlap.

These syntax requirements aren't generally too hard to follow. However, you may say, what about things that don't have closing tags, such as <br>? We are glad you asked! In XML, including the closing slash right in the tag like this '<br/>' can close an empty tag. However, that can cause errors in browsers that are not XML ready. To fool them, all we need to do is put a space between the tag name and the closing slash, like this: <br /> and all browsers and XML parsers will be happy!

There is one more little thing in the XML-compliant HTML (XHTML) spec (see http://www.w3.org for the specification) that you might want to get into the habit of now. The XHTML spec requires that all HTML tags be in lower case. If you try to bear these XHTML requirements in mind as you work on non-XML projects, you will find your transition to using XML and XSL will be a breeze.

The Web Team in Short

Q: Sunil Gupte wants some information on how to create bar charts using Internet Explorer.

A: Refer to Components, Components, Components.

Q: Roeland Jimenez wants to create his own personalized context menu on his Web pages.

A: Refer to How To Create a Mouse Capture Context Menu.

Q: André Lauzon wants to know more about the AutoComplete feature of Internet Explorer.

A: Refer to the KB article Q217148, How to Use the AutoComplete Feature in Internet Explorer 5.

Q: Esther M. Liunata wants to control the distance between paragraphs on her Web page.

A: Refer to the margin-top Attribute and margin-bottom Attribute for controlling spaces.

Web Team Linking

Table of contents

Giving the Time of Day

Putting It All Together

Between the Windows

The Web Team in Short