/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Problemer med gennemsigtigt lag
Fra : Jesper Stocholm


Dato : 21-08-02 20:30

Jeg har lidt problemer med "lag-rækkefølgen" af de forskellige elementer på
en HTML-side.

Jeg har lavet en "udvidet" ALT-funktionalitet, så man ved at holde markøren
over et billede henter et DIV-lag frem via noget scripting. Dette giver
ingen problemer - bortset fra når dette DIV-lag skal overskygge fx SELECT-
dropdowns etc. Så kommer disse nemlig _forrest_ ... og ikke bag mit DIV-
lag, hvilket jo var meningen. Hvordan laver jeg det, så mit DIV-lag kommer
ovenpå alle elementer - og ikke kun nogle af dem ?

Mit DIV-lag formatteres via CSS således:

..reminderTooltip
{
position:absolute;
font-family: Arial;
font-size: 9pt;
top:0px;
left:0px;
z-index:2;
width: 280;
visibility:hidden;
background-color:#ffffe6;
padding:10px 10px;
border: 1px solid black;
}

Og hentes frem således via scripting:

function showTooltip(tipID,strDir)
set objDiv = document.all.item(tipID)
objDiv.style.visibility = "visible"
mouseX = window.event.x
mouseY = window.event.y
objDiv.style.posleft = mouseX-280
objDiv.style.posTop = mouseY
end function

Hvis det er et problem med mit scripting, så beklager jeg at jeg har postet
i en forkert gruppe - men jeg ville selv skyde på, at det var et CSS-
problem.

Problemet kan ses "live" på http://stocholm.dk/test/edit.aspx



--
Jesper Stocholm
http://stocholm.dk
(der har været ikke-ryger i hele 5 dage)
Svar til gruppen og ikke til mig privat pr. email :|

 
 
Hintzmann (21-08-2002)
Kommentar
Fra : Hintzmann


Dato : 21-08-02 20:50


"Jesper Stocholm" <jespers@stocholm.invalid> skrev i en meddelelse
news:Xns9271DAB0121BAspamstocholmdk@192.38.208.81...
> Jeg har lidt problemer med "lag-rækkefølgen" af de forskellige elementer

> en HTML-side.
>
> Jeg har lavet en "udvidet" ALT-funktionalitet, så man ved at holde
markøren
> over et billede henter et DIV-lag frem via noget scripting. Dette giver
> ingen problemer - bortset fra når dette DIV-lag skal overskygge fx SELECT-
> dropdowns etc. Så kommer disse nemlig _forrest_ ... og ikke bag mit DIV-
> lag, hvilket jo var meningen. Hvordan laver jeg det, så mit DIV-lag kommer
> ovenpå alle elementer - og ikke kun nogle af dem ?

Man kan ikke positionere et almindelig html element oven på en select box,
så det skjules,
da select-box'e er OS controls og ikke "rigtige" html elementer.
Select-box'e "lånes" nemlig fra operativ systemet.

Det eneste der kan "ligge" oven på en select-box er et andet OS controls,
såsom et object eller en selectbox ...

Jeg har følgende forslag til dig:

1) Du kan enten indføre en rutine i din funktion som skjuler alle
select-boxe når dit div element vises.

2) Du kan også lave din "egen" select box via almindelige html elementer og
javascrip som f.eks. http://webfx.eae.net/dhtml/select/jsGenerated.html

3) Eller også kan du smide dit div element over i et andet OS-controls,
f.eks. en iframe eller et popup-vindue.

Håber det kan bruges

Hintzmann






Jesper Stocholm (22-08-2002)
Kommentar
Fra : Jesper Stocholm


Dato : 22-08-02 10:36

Hintzmann wrote in news:ak0qs8$de5$1@sunsite.dk:

> Man kan ikke positionere et almindelig html element oven på en select
> box, så det skjules,
> da select-box'e er OS controls og ikke "rigtige" html elementer.
> Select-box'e "lånes" nemlig fra operativ systemet.

ok ... så det er derfor sider ofte ser forskellige ud hvis man ser dem
via fx en UNIX-terminal eller en Windows-box.

> Jeg har følgende forslag til dig:
>
> 1) Du kan enten indføre en rutine i din funktion som skjuler alle
> select-boxe når dit div element vises.

ok ... det lyder som en god idé ... men hvordan skelner jeg et
SELECT-element fra et andet element med javascript ? Jeg går ud fra, at
du mener, at jeg ved visning af et DIV-lag samtidig gennemgår en løkke,
der løber mine elementer igennem og skjuler de, der er SELECT-elementer
?

> 2) Du kan også lave din "egen" select box via almindelige html
> elementer og javascrip som f.eks.
> http://webfx.eae.net/dhtml/select/jsGenerated.html

det ser squ' meget fancy't ud ... men ikke lige anvendeligt i den opgave
jeg har for mig.



--
Jesper Stocholm
http://stocholm.dk
(der har været ikke-ryger i hele 6 dage)
Svar til gruppen og ikke til mig privat pr. email :|

Hintzmann (22-08-2002)
Kommentar
Fra : Hintzmann


Dato : 22-08-02 11:25

> > 1) Du kan enten indføre en rutine i din funktion som skjuler alle
> > select-boxe når dit div element vises.
>
> ok ... det lyder som en god idé ... men hvordan skelner jeg et
> SELECT-element fra et andet element med javascript ? Jeg går ud fra, at
> du mener, at jeg ved visning af et DIV-lag samtidig gennemgår en løkke,
> der løber mine elementer igennem og skjuler de, der er SELECT-elementer
> ?

Du kan bruge document.getElementsByTagName('SELECT') som returnere et array
af select elementer.
Derefter kan du sætte stylen visibility på dem til at toggle om de skal
vises.
ex.

document.getElementsByTagName('SELECT').style.visibility="visible";
eller
document.getElementsByTagName('SELECT').style.visibility="hidden";

Dette virker i de fleste version 5 browserne og opefter.






Jesper Stocholm (22-08-2002)
Kommentar
Fra : Jesper Stocholm


Dato : 22-08-02 12:45

Hintzmann wrote in dk.edb.internet.webdesign.html:

> Du kan bruge document.getElementsByTagName('SELECT') som returnere
> et array af select elementer.
> Derefter kan du sætte stylen visibility på dem til at toggle om de skal
> vises.
> ex.
>
> document.getElementsByTagName('SELECT').style.visibility="visible";
> eller
> document.getElementsByTagName('SELECT').style.visibility="hidden";

hmmm ... jeg kan ikke helt få det til at virke. Skal jeg løbe igennem det
array jeg modtager - eller kan jeg anvende metoden .visibility direkte på
det hele ? Jeg har forsøgt med:

function hideAll() {
document.getElementsByTagName('select').style.visibility = 'hidden';
}

function showAll() {
document.getElementsByTagName('select').style.visibility = 'visible';
}

men den melder fejl om at

"document.getElementsByTagName(...).style is null or not an object"

Hele HTML-siden med scripts kan ses på http://stocholm.dk/test/visible.aspx



/Jesper Stocholm
http://stocholm.dk

--
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

Hintzmann (22-08-2002)
Kommentar
Fra : Hintzmann


Dato : 22-08-02 13:30

> hmmm ... jeg kan ikke helt få det til at virke. Skal jeg løbe igennem det
> array jeg modtager - eller kan jeg anvende metoden .visibility direkte på
> det hele ? Jeg har forsøgt med:

Det var forkert af mig at vise et eksempel hvor jeg satte stylen direkt på
arrayet. Det kan man ikke.

Du skal selvfølgelig løbe det igennem, som du også selv skriver.

eksempel

aSelect = document.getElementsByTagName('select');
for (var i=0;i<aSelect.length;i++) {
aSelect[i].style.visibility="hidden";
}

Hintzmann



Jesper Stocholm (22-08-2002)
Kommentar
Fra : Jesper Stocholm


Dato : 22-08-02 14:55

Hintzmann wrote in dk.edb.internet.webdesign.html:

> eksempel
>
> aSelect = document.getElementsByTagName('select');
> for (var i=0;i<aSelect.length;i++) {
> aSelect[i].style.visibility="hidden";
> }

jeps ... og det virker perfekt. Jeg kan fortælle, at vbs-ækvivalenten til
denne scriptstump er

sub vhideAll
   for each dims in document.getElementsByTagName("select")
      dims.style.visibility = "hidden"
   next
end sub



Mange tak for hjælpen ...

/Jesper Stocholm
http://stocholm.dk
(der stadig er ikke-ryger)

--
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

Jesper Stocholm (22-08-2002)
Kommentar
Fra : Jesper Stocholm


Dato : 22-08-02 15:56

Jesper Stocholm wrote in dk.edb.internet.webdesign.html:

> jeps ... og det virker perfekt. Jeg kan fortælle, at vbs-ækvivalenten til
> denne scriptstump er
>
> sub vhideAll
>    for each dims in document.getElementsByTagName("select")
>       dims.style.visibility = "hidden"
>    next
> end sub

hmmm ... jeg er nu ikke helt tilfreds med det jeg har fået strikket sammen.
Problemet er, at jeg skal bruge det på nogle redigeringssider, hvor der kan
være en hel del SELECT-boxe - og dermed også en del, der ikke bliver
overskygget af mit DIV-layer. Det giver en forfærdelig masse forstyrrelse,
når hele sidens udseende ændres ved at alle SELECT-boxe pludselig
forsvinder.

Den ene løsning jeg kan se er, at i det jeg gennemgår listen af SELECT-boxe,
så checker jeg samtidig om der er overlap imellem mit DIV-layer og den
enkelte SELECT-box. Hvis det er tilfældet, så skjules den. Jeg synes dog
ikke, at det er en særlig køn løsning. Den anden løsning - som jeg synes er
kønnere men som jeg ikke er klar over om den kan lade sig gøre [1] - er via
CSS at sætte en property i en class på mine SELECT-boxe der siger, at den
altid skal være bagerst ... altså noget i retning af

"always-on-top : false"

Men kan man det ?

Ellers modtages forslag med kyshånd.

[1] Undskyld mit sprog ... jeg kan godt se, at denne sætning ikke ligefrem
er noget kønt syn.



/Jesper Stocholm
http://stocholm.dk
(der stadig er ikke-ryger)

--
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

Hintzmann (22-08-2002)
Kommentar
Fra : Hintzmann


Dato : 22-08-02 16:25

> "always-on-top : false"
>
> Men kan man det ?

Det er z-index du leder efter, men som sagt i mit første indlæg så er
selectbox'e os-controls så det virker ikke.

Se problemet beskrevet her:
http://www.webreference.com/dhtml/diner/seethru/

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

Søg
Reklame
Statistik
Spørgsmål : 177511
Tips : 31968
Nyheder : 719565
Indlæg : 6408590
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste