---

-eller er der efterhånden nogen, der har fundet en work-a-round???

Jeg taler her om formatering af browse-knappen alene, mens tekstfeltet
forbliver som det er...

/Anders
--
Anders Lau Mandsholm
Aabyhoej, Denmark
www.mandsholm.dk

---

Som du nok har fundet ud af så er browse knappen til input feltet file
anderledes end almindelige html-elementer.

Man kan style den lidt men det ser ikke ens ud i de forskellige browsere.

<input type="file" style="background: #eef; border: 3px double #00f;
height: 32px; font: italic bold 24px/24px Courier,monospace;">

Som du kan se af ovenstående kan man ikke bruge background på knappen
(Jeg har kun testet i MSIE6), men man kan godt give den en "pæn" border
og en højde samt formatere lidt af teksten på knappe.

Hvis ovenstående ikke er nok har jeg en anden ide.

Du positionere en ny knap oven på den gamle browse knap.

Det kræver at du ved helt præcis hvor du har begge knapper.

Den nye knap skal så have en z-index højere end input file feltet.
Du kan lave den nye knap enten via <input type="button"> eller en <div>
style den som du vil evt. med et lille browse ikon på knappen.
Ved <div> knappen skal der også laves en tryk effekt, men det må du selv
lige rode med.

Den gamle knap/input felt giver du et id, så du kan få fat i det.

Ved eventen handlere onclick på den nye knap køre du følgende:
document.getElementById('navnetpåinputfeltet').click();

Det virker... men er dog lidt besværlig.

Hintzmann

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Hehe besværligheder kan man hurtigt komme ind i hvis man vil style <input type=file>

Min første tanke var også at lægge en ny knap eller gif hen over den anden, men mon
ikke at der er en mere elegant måde at gøre det på; hvis man nu laver et alm. text input
felt og en knap eller gif og så via javascript finder browse vinduet frem og ligeledes
via javascript putter den fremfundne sti ind i text input feltet.

Om det kan lade sig gøre ved jeg ikke på stående fod.

Og skulle vi ikke lade os der er bare en lille smule interesserede i en fiks løsning på
problemmet futte over i dk.edb.internet.webdesign.clientside og diskutere hurh det
kan lade sig gøre.


Med venlig hilsen

Frank B. Daugaard
Web Designer

"Hintzmann" <nospam@please.dk> skrev i en meddelelse news:ah3po2$oi0$1@sunsite.dk...
Som du nok har fundet ud af så er browse knappen til input feltet file
anderledes end almindelige html-elementer.

Man kan style den lidt men det ser ikke ens ud i de forskellige browsere.

<input type="file" style="background: #eef; border: 3px double #00f;
height: 32px; font: italic bold 24px/24px Courier,monospace;">

Som du kan se af ovenstående kan man ikke bruge background på knappen
(Jeg har kun testet i MSIE6), men man kan godt give den en "pæn" border
og en højde samt formatere lidt af teksten på knappe.

Hvis ovenstående ikke er nok har jeg en anden ide.

Du positionere en ny knap oven på den gamle browse knap.

Det kræver at du ved helt præcis hvor du har begge knapper.

Den nye knap skal så have en z-index højere end input file feltet.
Du kan lave den nye knap enten via <input type="button"> eller en <div>
style den som du vil evt. med et lille browse ikon på knappen.
Ved <div> knappen skal der også laves en tryk effekt, men det må du selv
lige rode med.

Den gamle knap/input felt giver du et id, så du kan få fat i det.

Ved eventen handlere onclick på den nye knap køre du følgende:
document.getElementById('navnetpåinputfeltet').click();

Det virker... men er dog lidt besværlig.

Hintzmann

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP ???
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

On Wed, 17 Jul 2002 16:51:11 +0200, "Frank B. Daugaard"
<fbd@oncable.dk> wrote:

>Min første tanke var også at lægge en ny knap eller gif hen over den anden, men mon
>ikke at der er en mere elegant måde at gøre det på; hvis man nu laver et alm. text input
>felt og en knap eller gif og så via javascript finder browse vinduet frem og ligeledes
>via javascript putter den fremfundne sti ind i text input feltet.

Det lyder "fremkommeligt" at positionere en ny knap ovenpå den
originale, men løsning 2 - hvis mulig - lyder smartere.

>Om det kan lade sig gøre ved jeg ikke på stående fod.

Jeg er desværre ikke velbevandret ud i JavaScript, så jeg kan ikke
bidrage, men jeg er ikke mindre interesseret af den grund!!!

>Og skulle vi ikke lade os der er bare en lille smule interesserede i en fiks løsning på
>problemmet futte over i dk.edb.internet.webdesign.clientside og diskutere hurh det
>kan lade sig gøre.

Det ville være spændende, hvis det var noget, nogen vil kigge på!! Af
sikkerhedsmæssige årsager, kan man jo sagtens forestille sig, at der
går lang tid, før der kommer en officiel løsning på problemet i HTML
og CSS-standarderne.

/Anders

/Anders
--
Anders Lau Mandsholm, Åbyhøj
www.mandsholm.dk

---

ok Anders tog mig på ordet og førte denne diskussion herover

Jeg har kigget lidt nærmere på det og er foreløbig kommet frem til følgende kode
som stadig er lidt snyd, da <input type=file> stadig eksisterer i html form, dog
skjult via css - så vis nogen lige ved hurh man skaber et "virtuelt" <input type=file>
via JavaScript vil det kunne gøre kunststykket helt perfekt.

Men altså her er et eksempel, om end ikke helt perfekt, så er det muligt at style
knappen og tekst input feltet hver for sig ved at tilføje en classe usw. hvilket jeg
ikke har gjort - det bør interesserede selv kunne hitte ud af - ellers så er der nok
en eller anden som lige smider et eksempel op

--- kode herfra ---
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title> Cheating the input type=file </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
..hideme {visibility: hidden;}
</style>

<script language="JavaScript">
<!--

function showThePath(){
alert('Sti til filen er: '+document.forms[0].filepath.value);
}

function doBrowse(){
document.forms[0].inputfile.click();
doPastePath();
}

function doPastePath(){
document.forms[0].filepath.value = document.forms[0].inputfile.value
}

//-->
</script>

</head>
<body>

<h3>Test af &lt;input type=file&gt; der kan styles</h3>

<form action="JavaScript:showThePath();">

<input type="text" name="filepath"><input type="button" value="Find filen" onclick="JavaScript:doBrowse();">
<input type="file" name="inputfile" class="hideme"><br>

<br>
<input type="submit" value="OK">&nbsp;<input type="reset" value="Fortryd">

</form>

</body>
</html>

---

hmm - af en eller anden grund er man nød til at clicke to gange på <ok> efter
at have "browset" sig frem til en fil - det går jo ikke...



Med venlig hilsen

Frank B. Daugaard
Web Designer


"Frank B. Daugaard" <fbd@oncable.dk> skrev i en meddelelse news:3d375313$0$56248$edfadb0f@dspool01.news.tele.dk...
ok Anders tog mig på ordet og førte denne diskussion herover

Jeg har kigget lidt nærmere på det og er foreløbig kommet frem til følgende kode
som stadig er lidt snyd, da <input type=file> stadig eksisterer i html form, dog
skjult via css - så vis nogen lige ved hurh man skaber et "virtuelt" <input type=file>
via JavaScript vil det kunne gøre kunststykket helt perfekt.

Men altså her er et eksempel, om end ikke helt perfekt, så er det muligt at style
knappen og tekst input feltet hver for sig ved at tilføje en classe usw. hvilket jeg
ikke har gjort - det bør interesserede selv kunne hitte ud af - ellers så er der nok
en eller anden som lige smider et eksempel op

--- kode herfra ---
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title> Cheating the input type=file </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
..hideme {visibility: hidden;}
</style>

<script language="JavaScript">
<!--

function showThePath(){
alert('Sti til filen er: '+document.forms[0].filepath.value);
}

function doBrowse(){
document.forms[0].inputfile.click();
doPastePath();
}

function doPastePath(){
document.forms[0].filepath.value = document.forms[0].inputfile.value
}

//-->
</script>

</head>
<body>

<h3>Test af &lt;input type=file&gt; der kan styles</h3>

<form action="JavaScript:showThePath();">

<input type="text" name="filepath"><input type="button" value="Find filen" onclick="JavaScript:doBrowse();">
<input type="file" name="inputfile" class="hideme"><br>

<br>
<input type="submit" value="OK">&nbsp;<input type="reset" value="Fortryd">

</form>

</body>
</html>

---

>hmm - af en eller anden grund er man nød til at clicke to gange på <ok> efter
>at have "browset" sig frem til en fil - det går jo ikke...

ok så er den fixet

og jeg har lige føjet lidt kommentarer med så de fleste har mulighed for at se
hvad det er der foregår - og fjernet en unødvendig funktion


Med venlig hilsen

Frank B. Daugaard
Web Designer

Note: er ikke testet i andet end IE6 - endnu...

--- kode herfra ---
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title> Cheating the input type=file </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
..hideme {visibility: hidden;}
</style>

<script language="JavaScript">
<!--

// Funktion der kaldes når formen blever "submittet"
function showThePath(){
// Viser blot den sti brugeren har browset sig frem til i en alertbox
alert('Sti til filen er: '+document.forms[0].filepath.value);
}

// Her det hele sker: Funktionen der "klikker" på browse knappen og
// sender stien til det tekst felt brugeren kan se.
function doBrowse(){
// Klik på den gemte browse knap
document.forms[0].inputfile.click();

// Indsæt stien i tekst felt
document.forms[0].filepath.value = document.forms[0].inputfile.value

// Sætter fokus på ok knappen, så brugeren kan aktivere formen
// ved at trykke på <enter>
document.forms[0].submit.focus();
}


//-->
</script>

</head>
<body>

<h3>Test af &lt;input type=file&gt; der kan styles</h3>

<!-- Formen der på "submit" aktiverer javascript funktionen -->
<form onsubmit="JavaScript:showThePath();">

<!-- Det nye tekst input felt som kan styles -->
<input type="text" name="filepath">

<!-- Den nye knap som kan styles -->
<input type="button" value="Find filen" onclick="JavaScript:doBrowse();">

<!-- Det skjulte input felt -->
<input type="file" name="inputfile" class="hideme">

<br>
<br>

<!-- Standard submit og reset knapper -->
<input type="submit" name="submit" value="OK">&nbsp;<input type="reset" value="Fortryd">

</form>

</body>
</html>

---

OK - det er jo egentlig rimmeligt skod - for det virker ikke i Netscape 4, Netscape 6
Mozilla 1 eller Opera 6 - æv altså...


Med venlig hilsen

Frank B. Daugaard
Lettere desillusioneret Web Designer

---

noget af forklaringen ligger jo nok her: http://developer.irt.org/script/1485.htm der siger:

--- quote ---
In Internet Explorer 4+ the click() event on an input field with type="file" will simulate a
click on the Browse... button, as expected.

However, in Netscape 3+ browsers the click() event on this same field will NOT simulate
a click on the Browse... button. Instead, it will simulate a click INTO the input's textfield.

The browse... button object is apparently not exposed at all.
--- end quote ---

men spørgsmålet hænger jo stadig lidt i luften om det er muligt at lave et virtuelt
<input style=file> element i JavaScript som man kan simulere klik på eller noget
derhenaf...


Med Natlige hilsen

Frank B. Daugaard
Web Designer


"Frank B. Daugaard" <fbd@oncable.dk> skrev i en meddelelse news:3d3759e8$0$56265$edfadb0f@dspool01.news.tele.dk...
OK - det er jo egentlig rimmeligt skod - for det virker ikke i Netscape 4, Netscape 6
Mozilla 1 eller Opera 6 - æv altså...


Med venlig hilsen

Frank B. Daugaard
Lettere desillusioneret Web Designer