473,385 Members | 1,535 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > two links to one location

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Two links to one location

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
7 1354
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
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
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
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
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
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
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
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
disable all href/links when user click a link
by: KS | last post by:
Im trying to prevent the user from clicking any other links on my page when the user have selected/clicked a href once. Sometimes it takes a while before the next page loads so some user will try...
Javascript
4
Reusing same windows with HTTPS links
by: Jon | last post by:
I have links that open https secondary windows using: window.open(url, windowName); The windowName is always the same but I keep getting new windows. Is it possible for each of the links to...
Javascript
5
show hide navigation links based on server names
by: Ray | last post by:
Hi, I was wondering if anyone has any idea how this can be done. I am trying to show/hide navigation links based on server names or ip addresses. So if, someone visits a particular url/ip address...
Javascript
3
FireFox and Local Links within Generated Content exhibits problems
by: Jim Davis | last post by:
The scenario: 1) Generate a popup window via script. 2) Populate it (again via script) with content that features local (hash) links. In IE 6.x this works - the links work as they should,...
Javascript
1
Change Linked Table links on run time?
by: ET | last post by:
Hello friends, did somebody try this, is it possible to change Linked Table's links on run time? Lets say, database in mde format opens, and you need to change location of the datafiles for...
Microsoft Access / VBA
24
Automagic Previous / Next Links
by: Ian Rastall | last post by:
I do a site where I have a previous and next link at the bottom of every page. It looks like: <p><a href="foo01.html">Previous</a> | <a href="foo03.html">Next</a></p> Seeing as they're always...
Javascript
22
symbolic links, aliases, cls clear
by: mp | last post by:
i have a python program which attempts to call 'cls' but fails: sh: line 1: cls: command not found i tried creating an alias from cls to clear in .profile, .cshrc, and /etc/profile, but none...
Python
5
embedded links with php
by: sickboy | last post by:
hello, is it possible to do embedded links from a php script? Check out the code below, when I send the test case to the switch, it will not go to the embedded link #clarence2 Any thoughts?...
PHP
16
Protect links
by: Martin Schneider | last post by:
Hi! I want to maintain a large file link list (to legal files, by the way :-)). The links should be protected from "grabbing", though. Is it possible to make the browser download a link...
HTML / CSS
1
Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
General
0
One-click Importing Excel Data into a*Database
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
Microsoft Excel
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!