Notifikationer

Markér alle som læst Log ud

nickclausen Nybegynder

19. maj 2003 - 16:14 Der er 15 kommentarer og
1 løsning

Skygge på dropdown-menu

Hej.

Jeg har en side med en dropdown-menu:
http://www.simpsons.frac.dk

Er der nogen der ved hvor jeg kan få skygge på de bokse, som dropper ned? Et godt eksempel er http://www.frip.dk.

På forhånd tak!

Synes godt om

roenving Novice

19. maj 2003 - 16:24 #1

Jeg går ud fra, at dine dropdowns er <div>, så kan du opnå effekten med en tilpasning af den tilpasning vi fik lavet i http://www.eksperten.dk/spm/353510

-- prøv og se, om det ikke er det, du har brug for -- så kan vi lige rette til ...

hth
jes

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 16:33 #2

Det ser rigtig fornuftigt ud! Kan bare ikke liige få det til at virke.
http://www.simpsons.frac.dk <- Prøv Vis Kilde og se hvad jeg gør galt, så er jeg fri for at skulle give dig hele kilde koden.

Synes godt om

roenving Novice

19. maj 2003 - 16:42 #3

Der skal tilrettes, så der henvises til div og ikke tables -- og så skal vi have samlet onload sammen, så ikke to forskellige funktioner forsøger at overtage den ... -- øjeblik, så kommer jeg med en tilretning til funktionerne ;-)

Synes godt om

roenving Novice

19. maj 2003 - 16:47 #4

Selve shade-funktionerne:

<script type="text/JavaScript">
var startOpacity = 25; // Sæt selv start-opaciteten
var d=document;
function gA(o,tN){return o.getElementsByTagName(tN)}
function pI(s){return parseInt(s)}
function doShade(divs) {
var w, h, a, offset, opac, cont = (d.all)? divs.parentElement : divs.parentNode;
w=pI(divs.offsetWidth); h=pI(divs.offsetHeight);
a = new Array();
var steps = (d.all && !window.createPopup)? 1 : 4; // Antal skygge-steps
for (var i=1; i<steps+1; i++) {
offset = i + "px";
opac = startOpacity / i;
a[a.length] = '<img class="shader" src="test_img/t.gif" ';
a[a.length] = 'style="width:'+w+'px;height:'+h+'px;left:'+offset+';top:'+offset+';z-index:'+i+';';
if (d.all) a[a.length] = 'filter:alpha(opacity='+opac+')">';
else a[a.length] = '-moz-opacity:'+(opac/100)+'">';
}
cont.innerHTML += a.join("");
}

function initShadeDIVs() {
if (d.layers) return;
var aDiv = gA(d,"div");
for (var i=0; i<aDiv.length; i++) {
if ( aDiv[i].className=="shadeDIV" ) doShade( aDiv[i] );
}
}
//window.onload = initShadeTBLs; <<disabled, da der også er en anden funktion i onload
</script>

----------------------------------
For læselighed har jeg også rettet:

.shadeDIV {
position: relative;
left: 0px;
top: 0px;
z-index: 5;
background-color: #ffffff;
}

----------------------------------
Og så skal din body-tag ændres til:

<body onload="start();initShadeDIVs()">

-- som du måske kan se, har jeg for læselighed forsøgt at konsekvensrette

Prøv ...

Synes godt om

roenving Novice

19. maj 2003 - 16:51 #5

I linjen:

a[a.length] = '<img class="shader" src="test_img/t.gif" ';

kan du selv sætte din shade.gif ind -- det funker uden - men bliver en del flottere, hvis du giver det en farve, som er mørkere end det du skal skygge -- jeg prøvede det på et tidspunkt med en rød -- mulighederne er mange ...

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 16:58 #6

Hvor skal jeg sætte de forskellige class=""'er ind henne?
Altså, hvilke TABLE-tags og hvilke DIV-tags skal være fx. class="shadeDIV"?

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 17:00 #7

Hvis vi tager mit første DIV-layer som eksempel:

<! -------- DIV LAYER 1 ------- >

<div class="shadeHolder" id="Layer1" style="border-width:1px; border-color:black; border-style:none; width:100px; height:191px; position:absolute; left:246px; top:125px; z-index:1; background-color: none; overflow: hidden" onMouseOver="big('Layer1')" ; onMouseOut="small('Layer1')">

<div align="center" class="shadeHolder">

<a style="cursor: default;" href="menu1.html"><img src="pics/tom.gif" border=0 height=30></a>

<br>
<table width=100% style="border-collapse: collapse;" border=0 bordercolor=black cellpadding=0 class="shadeDIV">

<tr>
<td><IMG src="pics/over.gif"></td>
</tr>

<tr>
<td bgcolor="6090C0" style="padding-left: 4px; padding-top: 1px; padding-bottom: 1px;" onMouseOver='this.style.backgroundColor="#5084B8";' onMouseOut='this.style.backgroundColor="#6090C0";'><a href="personer.htm" target="main" class="top-link">Personerne</a></td>
</tr>
<tr>
<td bgcolor="6090C0" style="padding-left: 4px; padding-top: 1px; padding-bottom: 1px;" onMouseOver='this.style.backgroundColor="#5084B8";' onMouseOut='this.style.backgroundColor="#6090C0";'><a href="episoderne.htm" target="main" class="top-link">Episode Guide</a></td>
</tr>

<tr>
<td bgcolor="6090C0" style="padding-left: 4px; padding-top: 1px; padding-bottom: 1px;" onMouseOver='this.style.backgroundColor="#5084B8";' onMouseOut='this.style.backgroundColor="#6090C0";'><a target="main" href="sendetid.htm" class="top-link">Sendetider</a></td>
</tr>

<tr>
<td><IMG src="pics/bund.gif"></td>
</tr>

</table></div>

</div>

Er class'erne så rigtigt sat ind?

Synes godt om

roenving Novice

19. maj 2003 - 17:04 #8

Nej ...

du skal beholde de divs du har i forvejen, for de bruges til noget i forhold til menuen (-- det har jeg ikke kigget igennem/efter ;-)

og så indsætte nye divs for hver af dem du har *uden* om, så (den anden):

<div class="shadeHolder>
<div id="Layer2" style="border-width:1px; border-style:none; width:100px; height:164px; position:absolute; left:367px; top:125px; z-index:1; background-color: #none; border: 1px none #none; overflow: hidden" onMouseOver="big('Layer2')" ; onMouseOut="small('Layer2')">

<div align="center">

<a style="cursor: default;" href="menu2.html"><img src="pics/tom.gif" border=0 height=30></a>

<br>
<table width=100% style="border-collapse: collapse;" border=0 bordercolor=black cellpadding=0>

<tr>
<td><IMG src="pics/over.gif"></td>
</tr>

<tr>
<td bgcolor="6090C0" style="padding-left: 4px; padding-top: 1px; padding-bottom: 1px;" onMouseOver='this.style.backgroundColor="#5084B8";' onMouseOut='this.style.backgroundColor="#6090C0";'><a href="bag/Matt.htm" target="main" class="top-link">Matt Groening</a></td>
</tr>
<tr>
<td bgcolor="6090C0" style="padding-left: 4px; padding-top: 1px; padding-bottom: 1px;" onMouseOver='this.style.backgroundColor="#5084B8";' onMouseOut='this.style.backgroundColor="#6090C0";'><a href="bag/stemmer.htm" target="main" class="top-link">Stemmerne</a></td>
</tr>

<tr>
<td><IMG src="pics/bund.gif"></td>
</tr>

</table></div>

</div></div>

Vi skulle jo nødig komme til at ændre det, som findes i forvejen '-)

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 17:10 #9

Selvfølgelig ;-)
Nu har jeg sat det ind på layer 1 og 2, og mener det er sat rigtigt ind, men det ser bestemt ikke ud til at virke. http://www.simpsons.frac.dk

Synes godt om

roenving Novice

19. maj 2003 - 17:22 #10

Den kommer med en ustyrlig mængde fejlmeddelelser, måske kommer det fra, at jeg glemte at overholde standarden ;-|

en div _skal_ nemlig have en id, så:

<div id="shade2" class="shadeHolder>

-- jeg kan ikke gennemskue, hvorfor den ellers skulle komme med tåbelige fejlmeddelelser

-- iøvrigt holder dine dropdowns jo kun, hvis browseren understøtter document.all , som er en M$-opfindelse, men det er du forhåbentlig klar over ...

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 17:27 #11

Det ser altså ikke ud til at virke :-\

Kender du nogle lignende dropdowns som ikke kræver at browseren understøtter document.all og hvor man også kan indstille skyggerne ?

Synes godt om

roenving Novice

19. maj 2003 - 17:28 #12

-- arh -- et lys gik op for mig:

da dine dropdowns synlighed i forvejen kontrollerer divs inde i, så sæt skygge-magerne indeni ... måske forhindrer størrelsen dem i at fungere, men det skal da prøves ... prøver lig på skrivebordet ...

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 17:34 #13

okay :-)

Synes godt om

roenving Novice

19. maj 2003 - 17:36 #14

-- og så fandt jeg ud af, at jeg totalt havde overset noget, nemlig:

<! -------- DIV LAYER 1 ------- >

<div id="Layer1" style="border-width:1px; border-color:black; border-style:none; width:100px; height:191px; position:absolute; left:246px; top:125px; z-index:1; background-color: none; overflow: hidden" onMouseOver="big('Layer1')" ; onMouseOut="small('Layer1')">
<div id="shade1" class="shadeHolder>
<div class="shadeDIV" align="center">

-- jeg kunne overhovedet få noget frem ved hjælp af Skrivebordet, så jeg har ikke kunnet prøve, men prøv ovenstående -- og husk at sætte forskellig id på shadeholders: shade1, shade2 m.m.m.

Synes godt om

nickclausen Nybegynder

19. maj 2003 - 17:59 #15

Jeg har prøvet det ved Layer 1. Nu virker dropdowneffekten, men stadig ingen skygge: http://www.simpsons.frac.dk

I mine menudivs? Der er ikke flere divs, kun dem i starten, som du har skrevet der.

Synes godt om

nickclausen Nybegynder

26. maj 2003 - 15:43 #16

svar

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS