Two links to one location

**Jeff North** · Jul 23 '05, 06:20 PM

Re: Two links to one location

On 8 Mar 2005 05:47:55 -0800, in comp.lang.javas cript
ian.hubling@fin .gov.on.ca wrote:
[color=blue]
>| 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?[/color]

Air code - not tested

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

function SetYear( yr )
{
curYear = yr;
}

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

<a href="javascrip t:SetMth(1);">J an</a>
<a href="javascrip t:SetMth(2);">F eb</a>
<a href="javascrip t:SetMth(3);">M ar</a>
</body>
---------------------------------------------------------------
jnorthau@yourpa ntsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

**Dr John Stockton** · Jul 23 '05, 06:21 PM

Re: Two links to one location

JRS: In article <1110289675.671 613.158050@g14g 2000cwa.googleg roups.com>
, dated Tue, 8 Mar 2005 05:47:55, seen in news:comp.lang. javascript,
ian.hubling@fin .gov.on.ca posted :[color=blue]
>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?[/color]

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.inne rHTML) }
</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, programmaticall y 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.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

**Randy Webb** · Jul 23 '05, 06:21 PM

Re: Two links to one location

Dr John Stockton wrote:
[color=blue]
> JRS: In article <1110289675.671 613.158050@g14g 2000cwa.googleg roups.com>
> , dated Tue, 8 Mar 2005 05:47:55, seen in news:comp.lang. javascript,
> ian.hubling@fin .gov.on.ca posted :
>[color=green]
>>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?[/color]
>
>
> 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.inne rHTML) }
> </script>
>
> Replace the alert by an assignment to location.href , at the final
> stage.[/color]

That would allow navigation by clicking only the year.

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

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

**RobB** · Jul 23 '05, 06:21 PM

Re: Two links to one location

ian.hubling@fin .gov.on.ca wrote:[color=blue]
> 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[/color]
I'd[color=blue]
> like to have the full row of years and months always showing...[/color]

(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/strict.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.htm l" method="get" target="bottom" >
<div id="frame">
<select id="month" name="month" size="12"
onmouseover="th is.style.backgr ound='buttonfac e'"
onmouseout="thi s.style.backgro und='white'">
<option value="Jan" selected="selec ted">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="th is.style.backgr ound='buttonfac e'"
onmouseout="thi s.style.backgro und='white'"
onchange="if(mo nth.value)this. form.submit()">
<option value="1999">19 99</option>
<option value="2000">20 00</option>
<option value="2001">20 01</option>
<option value="2002">20 02</option>
<option value="2003">20 03</option>
<option value="2004">20 04</option>
<option value="2005">20 05</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.

**Dr John Stockton** · Jul 23 '05, 06:23 PM

Re: Two links to one location

JRS: In article <T4ydnXDJfaB4o7 PfRVn-gg@comcast.com> , dated Tue, 8 Mar
2005 19:10:15, seen in news:comp.lang. javascript, Randy Webb
<HikksNotAtHome @aol.com> posted :[color=blue]
>Dr John Stockton wrote:[/color]
[color=blue][color=green]
>> <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.inne rHTML) }
>> </script>
>>
>> Replace the alert by an assignment to location.href , at the final
>> stage.[/color]
>
>That would allow navigation by clicking only the year.
>
>var yr=false;
>//does this work the same with just var yr?[/color]

test it :
var Y
if (Y) 'No' ; else 'Yes' // Yes.
[color=blue]
>if (yr) {document.locat ion.href=...... }
>else
>{
>alert('pleas e select a year first')
>}[/color]

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.demo n.co.uk/> - w. FAQish topics, links, acronyms
PAS EXE etc : <URL:http://www.merlyn.demo n.co.uk/programs/> - see 00index.htm
Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.

**Randy Webb** · Jul 23 '05, 06:23 PM

Re: Two links to one location

Dr John Stockton wrote:
[color=blue]
> JRS: In article <T4ydnXDJfaB4o7 PfRVn-gg@comcast.com> , dated Tue, 8 Mar
> 2005 19:10:15, seen in news:comp.lang. javascript, Randy Webb
> <HikksNotAtHome @aol.com> posted :
>[color=green]
>>Dr John Stockton wrote:[/color][/color]

<--snip-->
[color=blue][color=green][color=darkred]
>>>Replace the alert by an assignment to location.href , at the final
>>>stage.[/color]
>>
>>That would allow navigation by clicking only the year.
>>
>>var yr=false;
>>//does this work the same with just var yr?[/color]
>
>
> test it :
> var Y
> if (Y) 'No' ; else 'Yes' // Yes.[/color]

Thank you. It was the results of being in a hurry when I posted it. I
should learn to slow down more often ::Sigh::
[color=blue][color=green]
>>if (yr) {document.locat ion.href=...... }
>>else
>>{
>>alert('plea se select a year first')
>>}[/color]
>
>
> I think you mean only the month?[/color]

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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

**RobB** · Jul 23 '05, 06:23 PM

Re: Two links to one location

RobB wrote:[color=blue]
> ian.hubling@fin .gov.on.ca wrote:[color=green]
> > 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[/color][/color]
a[color=blue][color=green]
> > 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[/color]
> I'd[color=green]
> > like to have the full row of years and months always showing...[/color]
>
> (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[/color]
speak.[color=blue]
>
> Here's an idea...[/color]

(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/strict.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.htm l" method="get" target="bottom" >
<div id="menu">
<select id="month" name="month" size="12"
onmouseover="th is.style.backgr ound='#499';
this.style.colo r='#fff'"
onmouseout="thi s.style.backgro und='#ccc';
this.style.colo r='#000'">
<option value="Jan" selected="selec ted">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="th is.style.backgr ound='#499';
this.style.colo r='#fff'"
onmouseout="thi s.style.backgro und='#ccc';
this.style.colo r='#000'">
<option value="1999" selected="selec ted">1999</option>
<option value="2000">20 00</option>
<option value="2001">20 01</option>
<option value="2002">20 02</option>
<option value="2003">20 03</option>
<option value="2004">20 04</option>
<option value="2005">20 05</option>
</select>
<input type="submit" id="sub"
value="go"
onmouseover="th is.style.backgr ound='#499';
this.style.colo r='#fff'"
onmouseout="thi s.style.backgro und='#fff';
this.style.colo r='#000'" />
</div>
</form>
</body>
</html>

Two links to one location

Two links to one location

Comment

Comment

Comment

Comment

Comment

Comment

Comment