Avatar billede larsande Nybegynder
31. marts 2006 - 10:35 Der er 10 kommentarer og
1 løsning

Ændring af style på en dropdown (select)

Hej

Jeg kunne godt tænke mig at kunne markere et felt som der skal gøre noget aktivt på, ved at lave røde stiplede linjer rundt om feltet. Dette kan man eks gøre på et almindeligt tekstfelt ved at skrive følgende:

field.style.borderColor="red";
field.style.borderStyle="dashed";

Dette virker ikke på drowdowns. Er der nogen som har et godt forslag til hvad jeg kan gøre (jeg har ladet mig fortælle, at man kan gøre det ved at ændre på layer, eller lægge et ekstra layer på, men jeg har ingen ideer om hvordan...).


Jeg har lavet et lille test eksempel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>
<INPUT type="text" name="testField" size="20" onChange="redLines(this)">
<BR>
<select name="selectA"  id=selectA onChange="redLines(this)"><option value="545">Row 1</option><option value="851">Row 2</select>
</P>
<script>
function redLines(field) {
    field.style.borderColor="red";
    field.style.borderStyle="dashed";
}
</script>
</BODY>
</HTML>
Avatar billede davidfossil Nybegynder
31. marts 2006 - 11:27 #1
Spørg Microsoft - det burde virke, og virker også i fx FF og Opera :)
Avatar billede mclemens Nybegynder
31. marts 2006 - 11:46 #2
godt spørgsmål...

OT:  border defineringen kan forkortes til en linje:
function redLines(field) {
    field.style.border="dashed red";
}
Avatar billede mclemens Nybegynder
31. marts 2006 - 13:40 #3
efter lidt surf tror jeg ikke man kan ændre stylen...
men så kan vi da bare fuske lidt :P

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.imgbuttom{position:absolute;right:0;top:0;width:20px;}
.dropdownbox{position:absolute;z-index:1;width:100px;display:none;border:4px dashed red;background-color:white;}
</style>

<script type="text/javascript">
<!--

function setvalue(newvalue) {
current=document.getElementById("dropbox1inp");
current.value=newvalue;
current.style.border="4px dashed red";
}

function switchdis(){
if(document.getElementById("dropbox2").style.display!="block"){
  document.getElementById("dropbox2").style.display="block";
}else{
  document.getElementById("dropbox2").style.display="none";
}
}

window.onload=function(){
document.getElementById("dropbox2").style.top=document.getElementById("dropbox1").offsetTop;
document.getElementById("dropbox2").style.left=document.getElementById("dropbox1").offsetLeft;
}

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


<body>

<form method="POST" action="#">
<br><br><br>
testtesttesttesttesttesttesttesttesttesttesttesttesttest

<div id="dropbox2" class="dropdownbox">
  <div onclick="switchdis();setvalue('Hejsa,');">1. værdi</div>
  <div onclick="switchdis();setvalue('nåh...');">2. værdi</div>
  <div onclick="switchdis();setvalue('virker det?');">3. værdi</div>
</div>

<div style="position:relative;width:150px;" id="dropbox1">

  <input type="text" id="dropbox1inp" name="nametilinputtet" size="13" onkeyup="this.value='';" onmouseover="style.cursor='pointer';" onclick="switchdis();" style="width:100px;display:block;padding:0px;margin:0px;">

  <a href="java script: switchdis();" class="imgbuttom" >(img)</a>
</div>

testtesttesttesttesttesttesttesttesttesttesttesttesttest
<br><br><br>
</form>

</body></html>
Avatar billede mclemens Nybegynder
31. marts 2006 - 13:42 #4
scripts kan godt gøres lidt
kortere og mere dynamiske så
de kan bruges til flere input's ...
(ikke online igen før iaften ...)
Avatar billede mclemens Nybegynder
31. marts 2006 - 13:57 #5
<a href="java script: switchdis();" class="imgbuttom" >(img)</a>
er beregnet til at indeholde en lille <img...
med et billede af en skifte knap ligesom på normale dropdowns...
width og height på divs skal nok rettes til afhængig af siden :P
Avatar billede larsande Nybegynder
03. april 2006 - 09:18 #6
en ok løsning mclemens, defor får du pointene
Avatar billede larsande Nybegynder
03. april 2006 - 09:21 #7
-
Avatar billede larsande Nybegynder
03. april 2006 - 09:28 #8
Det med point kan jeg sgu ikke finde ud af, hvordan giver jeg dig pointene mclemens, jeg tror jeg kom til at give dem til mig selv.
Avatar billede mclemens Nybegynder
03. april 2006 - 09:29 #9
?
Avatar billede mclemens Nybegynder
03. april 2006 - 09:29 #10
lige meget :)
- rart du kunne bruge det :)
Avatar billede mclemens Nybegynder
03. april 2006 - 09:31 #11
p.s.: m.h.t. point så når man skal give point beder man personen om at ligge et svar... herefter får man en mulighed på siden for at klikke på personens navn og herefter godkend ... så får personen pointene :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester