By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,619 Members | 1,771 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,619 IT Pros & Developers. It's quick & easy.

Two links to one location

P: n/a
I have an interesting delema. I have a two-frame window. The top
frame has a listing of years and months. The user needs to select a
year, then a month - which will then bring up a page in the bottom
frame.

I know there are other ways of doing this (ie two drop downs) - but I'd
like to have the full row of years and months always showing - so in
effect the user would need to first select the year, then select the
month. Thus, two clicks to select a single URL. See rough example
below:

1999 2000 2001 2002 2003 2004 2005
Jan Feb Mar Apr May Jun Jul Aug Sep Oct...

Any ideas?

Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
On 8 Mar 2005 05:47:55 -0800, in comp.lang.javascript
ia*********@fin.gov.on.ca wrote:
| I have an interesting delema. I have a two-frame window. The top
| frame has a listing of years and months. The user needs to select a
| year, then a month - which will then bring up a page in the bottom
| frame.
|
| I know there are other ways of doing this (ie two drop downs) - but I'd
| like to have the full row of years and months always showing - so in
| effect the user would need to first select the year, then select the
| month. Thus, two clicks to select a single URL. See rough example
| below:
|
| 1999 2000 2001 2002 2003 2004 2005
| Jan Feb Mar Apr May Jun Jul Aug Sep Oct...
|
| Any ideas?


Air code - not tested

<script type="text/javascript">
//--- set default year if none selected
var curYear = new Date().getFullYear();

function SetYear( yr )
{
curYear = yr;
}

function SetMth( m )
{
location.href = "data.asp?Y=" + curYear + "&M=" + m + "
target='frame2'";
}
</script>
<body>
<a href="javascript:SetYear(1999);">1999</a>
<a href="javascript:SetYear(2000);">2000</a>
<a href="javascript:SetYear(2001);">2001</a>

<a href="javascript:SetMth(1);">Jan</a>
<a href="javascript:SetMth(2);">Feb</a>
<a href="javascript:SetMth(3);">Mar</a>
</body>
---------------------------------------------------------------
jn******@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------
Jul 23 '05 #2

P: n/a
JRS: In article <11**********************@g14g2000cwa.googlegroups .com>
, dated Tue, 8 Mar 2005 05:47:55, seen in news:comp.lang.javascript,
ia*********@fin.gov.on.ca posted :
I have an interesting delema. I have a two-frame window. The top
frame has a listing of years and months. The user needs to select a
year, then a month - which will then bring up a page in the bottom
frame.

I know there are other ways of doing this (ie two drop downs) - but I'd
like to have the full row of years and months always showing - so in
effect the user would need to first select the year, then select the
month. Thus, two clicks to select a single URL. See rough example
below:

1999 2000 2001 2002 2003 2004 2005
Jan Feb Mar Apr May Jun Jul Aug Sep Oct...

Any ideas?


Lightly tested in IE4, ensure compatibility with all currently-used
browsers.

<span onClick="Y(this)">2000</span>
<span onClick="Y(this)">2001</span>
<br>
<span onClick="M(this)">Jan</span>
<span onClick="M(this)">Feb</span>

<script>
var yr
function Y(T) { yr = T.innerHTML }
function M(T) { alert(yr+T.innerHTML) }
</script>

Replace the alert by an assignment to location.href , at the final
stage.

You could make function Y also write the year in a <span>----</span>
preceding the months on their line - see FAQ DynWrite().

Since the year row does not link, it should not look like links, and it
must be explained. With explanation, the month row does not *have* to
look like links.

You might write the year row, or its year numbers, programmatically so
as always to cover -N/+M years about the current one.

It may look better in fixed-pitch, perhaps with an extra space between
the months.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #3

P: n/a
Dr John Stockton wrote:
JRS: In article <11**********************@g14g2000cwa.googlegroups .com>
, dated Tue, 8 Mar 2005 05:47:55, seen in news:comp.lang.javascript,
ia*********@fin.gov.on.ca posted :
I have an interesting delema. I have a two-frame window. The top
frame has a listing of years and months. The user needs to select a
year, then a month - which will then bring up a page in the bottom
frame.

I know there are other ways of doing this (ie two drop downs) - but I'd
like to have the full row of years and months always showing - so in
effect the user would need to first select the year, then select the
month. Thus, two clicks to select a single URL. See rough example
below:

1999 2000 2001 2002 2003 2004 2005
Jan Feb Mar Apr May Jun Jul Aug Sep Oct...

Any ideas?

Lightly tested in IE4, ensure compatibility with all currently-used
browsers.

<span onClick="Y(this)">2000</span>
<span onClick="Y(this)">2001</span>
<br>
<span onClick="M(this)">Jan</span>
<span onClick="M(this)">Feb</span>

<script>
var yr
function Y(T) { yr = T.innerHTML }
function M(T) { alert(yr+T.innerHTML) }
</script>

Replace the alert by an assignment to location.href , at the final
stage.


That would allow navigation by clicking only the year.

var yr=false;
//does this work the same with just var yr?
if (yr) {document.location.href=......}
else
{
alert('please select a year first')
}

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #4

P: n/a
ia*********@fin.gov.on.ca wrote:
I have an interesting delema. I have a two-frame window. The top
frame has a listing of years and months. The user needs to select a
year, then a month - which will then bring up a page in the bottom
frame.

I know there are other ways of doing this (ie two drop downs) - but I'd like to have the full row of years and months always showing...


(snip)

A 'drop-down' doesn't really have to 'drop-down' \:D -
....set the size attribute and it can become a 'sit-there', so to speak.

Here's an idea...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str*ict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

#frame {
position: relative;
width: 84px;
height: 198px;
margin: 50px;
border: 3px #888 double;
}
#month {
position: absolute;
left: 0;
top: 0;
clip: rect(3px 36px 194px 3px);
}
#year {
position: absolute;
left: 44px;
top: 40px;
clip: rect(3px 36px 114px 3px);
}

</style>
</head>
<body>
<form action="foo.html" method="get" target="bottom">
<div id="frame">
<select id="month" name="month" size="12"
onmouseover="this.style.background='buttonface'"
onmouseout="this.style.background='white'">
<option value="Jan" selected="selected">Jan</option>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select id="year" name="year" size="7"
onmouseover="this.style.background='buttonface'"
onmouseout="this.style.background='white'"
onchange="if(month.value)this.form.submit()">
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
</div>
</form>
</body>
</html>

All the clipping is needed to clean up those sit-theres, especially in
moz which refuses to remove scrollbars (bug). Lightly tested.

Jul 23 '05 #5

P: n/a
JRS: In article <T4********************@comcast.com>, dated Tue, 8 Mar
2005 19:10:15, seen in news:comp.lang.javascript, Randy Webb
<Hi************@aol.com> posted :
Dr John Stockton wrote:
<span onClick="Y(this)">2000</span>
<span onClick="Y(this)">2001</span>
<br>
<span onClick="M(this)">Jan</span>
<span onClick="M(this)">Feb</span>

<script>
var yr
function Y(T) { yr = T.innerHTML }
function M(T) { alert(yr+T.innerHTML) }
</script>

Replace the alert by an assignment to location.href , at the final
stage.


That would allow navigation by clicking only the year.

var yr=false;
//does this work the same with just var yr?


test it :
var Y
if (Y) 'No' ; else 'Yes' // Yes.
if (yr) {document.location.href=......}
else
{
alert('please select a year first')
}


I think you mean only the month?

Yes, I was only giving the barest outline.
If the year is written into, and later read from, a span, then there can
be a default year (or a detectable non-year) written on loading and only
one click is needed for that year (improved design).

It might be clearer, though, to put the tear and month on radio buttons.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME.
Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
Jul 23 '05 #6

P: n/a
Dr John Stockton wrote:
JRS: In article <T4********************@comcast.com>, dated Tue, 8 Mar
2005 19:10:15, seen in news:comp.lang.javascript, Randy Webb
<Hi************@aol.com> posted :
Dr John Stockton wrote:
<--snip-->
Replace the alert by an assignment to location.href , at the final
stage.


That would allow navigation by clicking only the year.

var yr=false;
//does this work the same with just var yr?

test it :
var Y
if (Y) 'No' ; else 'Yes' // Yes.


Thank you. It was the results of being in a hurry when I posted it. I
should learn to slow down more often ::Sigh::
if (yr) {document.location.href=......}
else
{
alert('please select a year first')
}

I think you mean only the month?


The month click is what triggers navigation. If you click a month
without a year, then you should have to select a year first.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Jul 23 '05 #7

P: n/a
RobB wrote:
ia*********@fin.gov.on.ca wrote:
I have an interesting delema. I have a two-frame window. The top
frame has a listing of years and months. The user needs to select a year, then a month - which will then bring up a page in the bottom
frame.

I know there are other ways of doing this (ie two drop downs) - but I'd
like to have the full row of years and months always showing...


(snip)

A 'drop-down' doesn't really have to 'drop-down' \:D -
...set the size attribute and it can become a 'sit-there', so to

speak.
Here's an idea...


(snip)

OK, wanted to try this without any JS required, after all, this is a js
ng.

Assuming you're using cgi/php/asp to redirect the "bottom" frame, this
should do...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/str**ict.dtd">
<html>
<head>
<title>Mr. Pither</title>
<style type="text/css">

#menu {
position: relative;
width: 124px;
height: 198px;
margin: 50px;
border: 3px #888 double;
background: #ccc;
}
#month {
position: absolute;
left: 0;
top: 0;
clip: rect(3px 36px 194px 3px);
background: #ccc;
cursor: pointer;
}
#year {
position: absolute;
left: 44px;
top: 40px;
clip: rect(3px 36px 114px 3px);
background: #ccc;
cursor: pointer;
}
#sub {
position: absolute;
left: 96px;
top: 92px;
width: 20px;
font-size: 12px;
padding: 0 0 1px 0;
border: none;
background: #fff;
cursor: pointer;
}

</style>
</head>
<body>
<form action="foo.html" method="get" target="bottom">
<div id="menu">
<select id="month" name="month" size="12"
onmouseover="this.style.background='#499';
this.style.color='#fff'"
onmouseout="this.style.background='#ccc';
this.style.color='#000'">
<option value="Jan" selected="selected">Jan</optio*n>
<option value="Feb">Feb</option>
<option value="Mar">Mar</option>
<option value="Apr">Apr</option>
<option value="May">May</option>
<option value="Jun">Jun</option>
<option value="Jul">Jul</option>
<option value="Aug">Aug</option>
<option value="Sep">Sep</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
<select id="year" name="year" size="7"
onmouseover="this.style.background='#499';
this.style.color='#fff'"
onmouseout="this.style.background='#ccc';
this.style.color='#000'">
<option value="1999" selected="selected">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
</select>
<input type="submit" id="sub"
value="go"
onmouseover="this.style.background='#499';
this.style.color='#fff'"
onmouseout="this.style.background='#fff';
this.style.color='#000'" />
</div>
</form>
</body>
</html>

Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.