PDA

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



nmajdan
05-08-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
05-08-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
05-08-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
05-08-2005, 11:47 PM
thanks to both of you. they both worked.

brandonH
05-09-2005, 04:06 AM
your welcome. :-)

vwphillips
05-09-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!