PDA

View Full Version : SIMPLE javascript request (combobox, onchange)



nmajdan
May 8th, 2005, 09:57 PM
i know no javascript and little java, so this is an easy question.

i have a combo box with an onChange event. in the combo box are states. i want the user to be able to select a state and then have them automatically sent to an anchor position on the same page. how do i do this?

vwphillips
May 8th, 2005, 10:26 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function FindAnchor(val){
ftop=zxcFTop(document.getElementById(val));
window.scroll(0,ftop-20);
document.getElementById('Find').style.top=(ftop-20)+'px'; // remove this line if you dont like this feature
}

function zxcFTop(zxc){
zxcObjTop=zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return zxcObjTop;
}

//-->
</script></head>

<body>

</body>
<select id="Find" size="1" onchange="javascript:FindAnchor(this.options[this.selectedIndex].value);" style="position:relative;" >
<option value="Anchor1">Anchor1</option>
<option value="Anchor2">Anchor2</option>
<option value="Anchor3">Anchor3</option>
<option value="Anchor4">Anchor4</option>
</select><br>
Anchor1<a id="Anchor1"></a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Anchor2<a id="Anchor2"></a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Anchor3<a id="Anchor3"></a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Anchor4<a id="Anchor4"></a>
</html>

brandonH
May 8th, 2005, 11:20 PM
this actually changes the windows location value, which of course is treated like a totally new page as far as the back button is concerned. if the user wants to go back they will have to go back through all the anchors they have previously click through.

I believe the script the fellow above me gave just moves you to the point where the anchor is, and nothing gets stored into the back button.

mines shorter, his is probably the one that will piss your users off less.




<html>
<head>
</head>
<body>
<select id="Find" size="1" onchange="window.location=this.value;" style="position:relative;" >
<option value="#anchor1">Anchor1</option>
<option value="#anchor2">Anchor2</option>
<option value="#anchor3">Anchor3</option>
<option value="#anchor4">Anchor4</option>
</select>


<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id=#anchor1></a>anchor1
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id=#anchor2>anchor2
</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id=#anchor3></a>anchor3
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id=#anchor4></a>anchor4
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

nmajdan
May 8th, 2005, 11:47 PM
thanks to both of you. they both worked.

brandonH
May 9th, 2005, 04:06 AM
your welcome. :-)

vwphillips
May 9th, 2005, 08:16 AM
shorter, his is probably the one that will piss your users off less

and provides the page navigation at the view point!