PDA

Click to See Complete Forum and Search --> : select form + display window

cruel_love
11-12-2003, 09:25 PM
i have drop down menus that when you select an option they automatically go to that link wherever it is [for the sake of the argument lets make it a new window]

now i also have a display window script that i've used before that allows you to change the window size of the new window for each link.

now my problem is when i try to add that to the script for the form it doesn't work. no matter how i've played with it the best i've gotten is for it to open in a new window. is there a way to allow the new window to change size depening on what option is selected in the drop down menu?


edit: here's a link to what i have currently, http://artlist.united.net.kg/selectform.html
migwich
11-12-2003, 11:04 PM
Hey Cruel_love,
Is this what you needed?

<html>
<head>
<title>artlist://nicole_white</title>
<link rel="stylesheet" href="styles-site.css" type="text/css" />

<script language="JavaScript">

function artto(f, width, height) {
var myindex=f.link.selectedIndex;
if (f.link.options[myindex].value != "0") {
var Win = window.open(f.link.options[myindex].value,"displayWindow",'width=' + width +',height=' + height + ',resizable=0,scrollbars=no,menubar=no' );
}
}

</script>
</head>
cruel_love
11-14-2003, 10:30 AM
it opens in a new window but now the problem is how to call in the form.

what i have:

<FORM NAME="form2">
<SELECT NAME="link" onChange="artto(this.form)" class="px9black" style="width: 155px">
<option selected>&nbsp;</option>
<option value="a1.jpg,200,300">art image</option>
</select>
</form>

as far as i know i can't insert the javascript into the option value and i believe the option value is only supposed to be one, so having three items listed there is confusing it.


and if i have it as this:

<FORM NAME="form2">
<SELECT NAME="link" onChange="artto(f, width, height)" class="px9black" style="width: 155px">
<option selected>&nbsp;</option>
<option value="a1.jpg, 200, 300">art image</option>
</select>
</form>

it won't even open a window.
migwich
11-14-2003, 10:52 AM
Ok, try this one.


<head>
<title>Onchange Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<script language="JavaScript1.2" type="text/javascript">
function artto(f) {
var myindex=f.link.value;

// Dissect the value string
ar= myindex.split(',');
$URL= ar[0];
$W= ar[1];
$H= ar[2];

if (ar[0] != "0") {
var Win = window.open($URL,"displayWindow" 'width=' + $W +',height=' + $H + ',resizable=0 scrollbars=no,menubar=no' );
}
}
</script>
<head>

<body>
<form name="form2">
<select name="link" onChange="artto(this.form)" class="px9black" style="width: 155px">
<option selected> </option>
<option value="http://www.yahoo.com,200,300">art image1</option>
<option value="a1.jpg,400,600">art image2</option>
<option value="a1.jpg,200,100">art image3</option>
</select>
</form>
</body>
cruel_love
11-19-2003, 11:03 AM
well it got it to open in a new window but there is still the problem that it's not resized. i just want the new window to be a pre-determined size.

i found this script: <SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
<!--
var popupWindow=null;
function popup(mypage,myname,w,h,pos,infocus){

if (pos == 'random')
{LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
else
{LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
settings='width='+ w + ',height='+ h + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';popupWindow =window.open('',myname,settings);
if(infocus=='front'){popupWindow.focus();popupWindow.location=mypage;}
if(infocus=='back'){popupWindow.blur();popupWindow.location=mypage;popupWindow.blur();}

}
// -->
</script>
<form name="form2">
<select class="px9black" style="width: 155px" name="menu" onChange="popup('document.form1.menu.options[document.form1.menu.selectedIndex].value','pagename','510','500','center','front');">
<option selected>art / photo</option>
<option value="art.html">art</option>
</select>
</form>

that does open at the size i set, however it takes a long time to open the window and the page doesn't end up loading. i'd fix it but the javascript is beyond my understanding.

i tried something simple with the window open
<form name="form1">
<select class="px9black" style="width: 155px" name="menu" onChange="window.open(document.form1.menu.options[document.form1.menu.selectedIndex].value,'width='510',height='500',resizable=0,scrollbars=no,menubar=no');">
<option selected>art / photo</option>
<option value="art.html">art</option>
</select>
</form>

that when i take out the width and height it opens in a new window, but if i treat it like a simple window.open script and add the variables it won't work.
cruel_love
11-19-2003, 11:09 AM
EDIT: i managed to simplify that top javascript to this:

<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
<!--
var popupWindow=null;
function popup(mypage,myname,w,h){
settings='width='+ w + ',height='+ h + ',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';popupWindow =window.open('',myname,settings);
}
// -->
</script>

and in the body this:

<form name="form1">
<select class="px9black" style="width: 155px" name="menu" onChange="popup('document.form1.menu.options[document.form1.menu.selectedIndex].value','pagename','510','500');">
<option selected>art / photo</option>
<option value="art.html">art</option>
</select>
</form>

which works great but it still is giving me a blank page it won't load the actual page i want it to. [yes the page does exist i have it open right next to what i'm currently working with]
migwich
11-19-2003, 12:35 PM
Hey Cruel_love,
Great job! It looks like the only thing you missed was URL declaration.

window.open('',myname,settings);

should be...

window.open(mypage,myname,settings);
cruel_love
11-19-2003, 02:33 PM
ok i fixed that, but the url still won't load.

here are the links to two different scripts that i've gotten to open pre-sized:

http://artlist.united.net.kg/selectform.html
http://artlist.united.net.kg/selectform2.html

and the page i'm using to load in the new window:
http://artlist.united.net.kg/art.html

now the code i got was from htmlbasix and the only option it had for forms was a form button and the script works fine as that. [http://artlist.united.net.kg/selectform3.html]

but when i try to change it to work in a drop down menu, that's when i'm running into my problems. everything seems fine the only stuff i'm taking away is the extra x,y top, left positioning elements in the script, so why isn't it working?
even if i change onClick to onChange, it isn't working.
migwich
11-19-2003, 05:38 PM
Try it without single quotes.

popup('document.form1.menu.options[document.form1.menu.selectedIndex].value', ...etc.

as

popup(document.form1.menu.options[document.form1.menu.selectedIndex].value, ...etc
cruel_love
11-19-2003, 06:47 PM
omg! you're genius! thankyou very much!!

one last question then i'll stop bothering you. if the option value is what loads a page, by selecting it, shouldn't it act like a normal <a href="yadayadayada"> tag? like this:

<html>
<head>
<title>Onchange Test</title>
<link rel="stylesheet" href="styles-site.css" type="text/css" />
<script>
<!--
function displayWindow(url, width, height) {
var Win = window.open(url,"displayWindow",'width=' + width +
',height=' + height + ',resizable=0,scrollbars=no,menubar=no' );
}
// -->
</script>
</head>

<body>
<form name="form1">
<select class="px9black" style="width: 155px" name="menu">
<option selected value="0">art / photo</option>
<option value="a href="javascript:displayWindow('art.html',570,540)">art2</option
</select>
</form>
</body>

</html>

or must there be just one variable for the value?
migwich
11-19-2003, 09:31 PM
It's no bother, really, you might be able to help with some of my JS issues later :">

To be honest, I never tried the method you've listed. I suspect that it wouldn't work because the "value" is a static string and won't parse HTML code (also you'd need a way to escape the "quotes" within the anchor tag).

You need an event handler like "onchange" to listen for your actions. Once the action takes place, the cooresponding function/script is called.

onchange affects: select menu & text input elements.
onclick affects: links & buttons.

I hope this answers your question. If not, just ask again.

--

P.S. I apologize for the code sample I listed above (4th post from top). It's missing a comma after the window name and will only open a new window with dynamic sizing once.
migwich
11-19-2003, 10:24 PM
On a side note:
This code should do the same thing but allow you to declare separate Window Sizes for each new window.

<head>
<title>Onchange Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<script language="JavaScript" type="text/javascript">
var $win;

function artto(f){
var myindex=f.link.value;

ar= myindex.split(','); // Dissect the value string
$URL= ar[0];
$W= ar[1];
$H= ar[2];
if (ar[0]!= "0"){
if ($win== null || $win.closed){
$win= window.open($URL,"displayWindow",'width='+ $W +',height='+ $H +',resizable=0 scrollbars=no,menubar=no');
}else{
$win.location.href= $URL;
$win.resizeTo($W,$H); // WARNING: ResizeTo will cause an Access Error if the targeted page is not on your server.
$win.focus();
}
}
}
</script>
<head>

<body>
<form name="form2">
<select name="link" onChange="artto(this.form)" class="px9black" style="width: 155px">
<option selected>Select One:</option>
<option value="a.htm,200,300">A</option>
<option value="b.htm,400,600">B</option>
<option value="c.htm,200,100">C</option>
</select>
</form>
</body>