Drop Down Menu??? [Archive] - Lissa Explains it All: Web Design Forums

knudddel

10-06-2003, 07:56 PM

I decided to try out something new but it doesn't work! It's:

I'm trying for a new design and I've got a background image. The whole design is not made for 800x600 now, but for the 1024x768
I made an Image on which i want to place Iframes on top. I hope I'm allowed to place the link, because I guess my description is someow confusing: Looks like this (http://www22.brinkster.com/meerca/news.html)
Anyway, when you take the drop down menu and go on The Bored it opens up in a new window. But I want it to open in the white window below!!!
Plus actually the iframe should just show the BG because it's a document with the <BODY BGCOLOR="transparent"> tag. I'm somewhat helpless, so plse help!!!

Here's the code:

<HTML>
<HEAD>
<TITLE>The Bored</TITLE>
</HEAD>
<body background="tabackground.gif" bgcolor="#000000">

<style type="text/css">
BODY{Cursor:crosshair};A:HOVER{Cursor:e-resize; }
--></style>
<STYLE type="text/css">

</STYLE>
<style type="text/css">
a:link,a:visited{color:black;font:9pt verdana}
a:active{color:black;font:9pt verdana}
</style>
<style type="text/css">
a:hover{background:url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);border:2px dotted black}
</style>
<style type="text/css">
td,p,body{color:white;font:7pt verdana}
</style>

<form name="a294" >
<select name="a969" size="1" style="background-color:#FFFFFF" onChange="displaydesc(document.a294.a969.selectedIndex)">
<option value="#">Select</option>
<option value="enter.html" target="content">The Bored</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.a294.a969.selectedIndex)"><br>
<span id="descriptions" align="left" style="font:bold 9px Verdana">
</span>
</form>

<script>

/***********************************************
* Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var textdisplay=new Array()
textdisplay[0]=""
textdisplay[1]=""

function jumptolink(what){
var selectedopt=document.a294.a969.options[what]
if (document.getElementById && selectedopt.getAttribute("target")=="content")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

function displaydesc(which){
if (document.all)
descriptions.innerHTML=textdisplay[which]
else if (document.getElementById)
document.getElementById("descriptions").innerHTML=textdisplay[which]
}

displaydesc(document.a294.a969.selectedIndex)

document.a294.a969.options[0].selected=true

</script>

<div id="content" style="position: absolute; width: 10; height: 10; left: 165; top: 220" src="clear.html"><iframe width=795 height=450 name="content" frameborder="NO" noresize allowtransparency="true" style="filter:chroma(color=#FF0000)"></iframe></div>

</BODY>
THANKS LOADS!!!

toolman

10-06-2003, 08:01 PM

I don't think you can target DIVs so your best bet is to use an iframe.

knudddel

10-06-2003, 08:07 PM

Now I did it with Iframes and it still doesn't work:

<HTML>
<HEAD>
<TITLE>The Bored</TITLE>
</HEAD>
<body background="tabackground.gif" width="1100" height="768" bgcolor="#000000">

<style type="text/css">
BODY{Cursor:crosshair};A:HOVER{Cursor:e-resize; }
--></style>
<STYLE type="text/css">

</STYLE>
<style type="text/css">
a:link,a:visited{color:black;font:9pt verdana}
a:active{color:black;font:9pt verdana}
</style>
<style type="text/css">
a:hover{background:url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);border:2px dotted black}
</style>
<style type="text/css">
td,p,body{color:white;font:7pt verdana}
</style>

<form name="a294" >
<select name="a969" size="1" style="background-color:#FFFFFF" onChange="displaydesc(document.a294.a969
a969.selectedIndex)">
<option value="#">Select</option>
<option value="enter.html" target="content">The Bored</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.a294.a969.selectedIndex)"><br>
<span id="descriptions" align="left" style="font:bold 9px Verdana">
</span>
</form>

<script>

/***********************************************
* a969 down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var textdisplay=new Array()
textdisplay[0]=""
textdisplay[1]=""

function jumptolink(what){
var selectedopt=document.a294.a969.options[what]
if (document.getElementById && selectedopt.getAttribute("target")=="content")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

function displaydesc(which){
if (document.all)
descriptions.innerHTML=textdisplay[which]
else if (document.getElementById)
document.getElementById("descriptions").innerHTML=textdisplay[which]
}

displaydesc(document.a294.a969.selectedIndex)

document.a294.a969.options[0].selected=true

</script>

<iframe style="position: absolute; width: 795; height: 450; left: 165; top: 220" name="content" frameborder="NO" noresize allowtransparency="true"></iframe>
<BR>
<BR>
<BR>
<BR>
</BODY>

kittycat

10-06-2003, 08:44 PM

You have (in the opening select thing):
onChange="displaydesc(document.a294.a969
a969.selectedIndex)"

And I think it should be
onChange="displaydesc(document.a294.a969.selectedIndex)"

Does that make a difference?

And this doesn't really have anything to do with the drop down menu, but in your body tag, you should get rid of the width and height attributes, and the CSS should be in the head section.

knudddel

10-07-2003, 05:57 AM

Ok I did that, but it still doesn't work. It looks like this:

<HTML>
<HEAD>
<TITLE>The Bored</TITLE>

<style type="text/css">
BODY{Cursor:crosshair};A:HOVER{Cursor:e-resize; }
--></style>
<STYLE type="text/css">

</STYLE>
<style type="text/css">
a:link,a:visited{color:black;font:9pt verdana}
a:active{color:black;font:9pt verdana}
</style>
<style type="text/css">
a:hover{background:url(http://www.boomspeed.com/spacefreak/bg/rainbow.gif);border:2px dotted black}
</style>
<style type="text/css">
td,p,body{color:white;font:7pt verdana}
</style>

</HEAD>
<body background="tabackground.gif" bgcolor="#000000">

<form name="a294" >
<select name="a969" size="1" style="background-color:#FFFFFF" onChange="displaydesc(document.a294.a969.selectedIndex)">
<option value="#">Select</option>
<option value="enter.html" target="content">The Bored</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.a294.a969.selectedIndex)"><br>
<span id="descriptions" align="left" style="font:bold 9px Verdana">
</span>
</form>

<script>

/***********************************************
* a969 down menu w/ description- Â© Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var textdisplay=new Array()
textdisplay[0]=""
textdisplay[1]=""

function jumptolink(what){
var selectedopt=document.a294.a969.options[what]
if (document.getElementById && selectedopt.getAttribute("target")=="content")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

function displaydesc(which){
if (document.all)
descriptions.innerHTML=textdisplay[which]
else if (document.getElementById)
document.getElementById("descriptions").innerHTML=textdisplay[which]
}

displaydesc(document.a294.a969.selectedIndex)

document.a294.a969.options[0].selected=true

</script>

<iframe style="position: absolute; width: 795; height: 450; left: 165; top: 220" name="content" frameborder="NO" noresize allowtransparency="true"></iframe>
<BR>
<BR>
<BR>
<BR>
</BODY>

Please, can anyone help me some more? I just can't figure it, because I can't write stuff like that :(((

MaGiCSuN

10-07-2003, 06:42 PM

i'm crazy that im going to help you but o well:

Last modified June 10th, 03' for ability to open links in new window.

that's what it says on the site. From that i think that that menu only is able to open into NEW windows, but don't target to iframes or frames. what you use in your code is a normal drop down menu. To target it you should use an drop down menu that target's frames. Now that is the problem, since i have no idea how to make it work with the other coding... i played a bit with it but no luck

so my advice is to search for another or similar script that DOES target :)

Love,
Mirna

knudddel

10-07-2003, 06:51 PM

Oh thanks! OK, I'll not be impatient in future :.(