Avatar billede breon Nybegynder
16. maj 2005 - 18:31 Der er 17 kommentarer og
1 løsning

spørgsmål til Oleboles skygge kode

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> TITLE </title>

Nedenstående kode har tidligere været nævnt et par gange, og den fungerer da også upåklageligt. Men jeg har lige et par spørgsmål.

1. Kan man få skyggen til at falde mod venstre i stedet for højre?

2. I denne linie "var steps = (d.all && !window.createPopup)? 1 : 4; // Antal" - Hvad betyder 1 tallet?

Grunden til at jeg spørger er, at jeg ønsker en skygge som den her: http://www.brianborup.dk/shadow/shadow2.gif, altså en mere centreret skygge der blot falder lidt ud og nedaf.

Oleboles nedenstående kode giver denne skygge: http://www.brianborup.dk/shadow/shadow1.gif

-------------------------

<META NAME="Keywords" CONTENT="olebole,http://www.eksperten.dk/spm/342379">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadeHolder {
    position: relative;
}
.shadeTBL {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}
.shader {
    position: absolute;
    background-color: #000080;
}
</style>
<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(tbl) {
    var w, h, a, offset, opac, cont = (d.all)? tbl.parentElement : tbl.parentNode;
    w=pI(tbl.offsetWidth); h=pI(tbl.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="spacersort.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 initShadeTBLs() {
    if (d.layers) return;
    var aTbl = gA(d,"TABLE");
    for (var i=0; i<aTbl.length; i++) {
        if ( aTbl[i].className=="shadeTBL" ) doShade( aTbl[i] );
    }
}
window.onload = initShadeTBLs;
</script>
</head>
<body>

<div class="shadeHolder">
    <table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur<br>
            adipisicing elit, sed do eiusmod tempor incididunt<br>
            ut labore et dolore magna aliqua.</td>
    </tr>
    </table>
</div>

</body>
</html>
Avatar billede roenving Novice
16. maj 2005 - 18:38 #1
-- øv, jeg fik det første spørgsmål den anden dag, men kan sæ'fø'li' ik' finde den ...

-- den anden sætter værdien til 1, hvis det er en opera, som kommer forbi, så ole har måske opdaget noget, som den tolker anderledes !-)
Avatar billede thesurfer Nybegynder
16. maj 2005 - 18:39 #2
#2 (2. I denne linie "var steps = (d.all && !window.createPopup)? 1 : 4; // Antal" - Hvad betyder 1 tallet?)

Variablen steps' værdi sættes til 1, hvis d.all er true/sand og window.createPopup er false/falsk.. værdien sættes til 4, hvis det er modsat..
Avatar billede roenving Novice
16. maj 2005 - 18:39 #3
Vil du rent have den til at gå mod højre ?-)

-- for så skal du bare indsætte et minus i denne linje:

        a[a.length] = 'style="width:'+w+'px;height:'+h+'px;left:-'+offset+';top:'+offset+';z-index:'+i+';';
Avatar billede thesurfer Nybegynder
16. maj 2005 - 18:43 #4
Hmm.. hvordan kan "d.all && !window.createPopup" betyde Opera..?
"document.all" er IE, no?
Avatar billede roenving Novice
16. maj 2005 - 18:47 #5
document.all er IE OG Opera !-)

-- men .createPopup er kun IE 5.5+, så den vil si IE 5 og ældre fra samt Opera ...
Avatar billede breon Nybegynder
16. maj 2005 - 20:07 #6
Er det muligt at få den til både at falde mod højre og venstre? Ellers havde jeg tænkt evt. at ligge to DIVs oven på hinanden, hvor skyggerne falder modsat.
Avatar billede breon Nybegynder
16. maj 2005 - 20:09 #7
Hvis værdien sættes til 1 når det er en Opera browser, vises skygge effekten så ikke i 4 steps som i IE?
Avatar billede roenving Novice
16. maj 2005 - 20:23 #8
Både højre og venstre, men kun nedad:

a[a.length] = 'style="width:'+(w+2*i)+'px;height:'+h+'px;left:-'+offset+';top:'+offset+';z-index:'+i+';';

Både højre og venstre og både opad og nedad:

a[a.length] = 'style="width:'+(w+2*i)+'px;height:'+(h+2*i)+'px;left:-'+offset+';top:-'+offset+';z-index:'+i+';';
Avatar billede olebole Juniormester
16. maj 2005 - 20:25 #9
<ole>

Ja, jeg er egentlig ikke længere så voldsomt stolt af browser-checket, men det gør sådan cirka, hvad det skal  :)

Da Opera ikke kan håndtere opacity, laves der kun én opac skygge på 1px's bredde

/mvh
</bole>
Avatar billede roenving Novice
16. maj 2005 - 20:25 #10
-- og nej, det gør den så ikke, måske kan ole svare på hvorfor ...

-- forklaringen er måske at IE 5- (og måske Opera) ikke forstår nogle af tingene som bruges, men så i hvert fald får noget minimalt med !-)
Avatar billede breon Nybegynder
16. maj 2005 - 20:33 #11
Jamen det er jo fantastisk, nu fik jeg skyggen præcis som jeg ville have den: Både Højre, venstre og nedad. Jeg havde forsøgt at lave det med billeder, men det blev slet ikke lige så godt, måske fordi jeg bruger en gradient i baggrunden. Scriptet her laver tilgengæld en ret flot skygge.

Nu er der ikke så mange point på højkant her, men roenvig og olebole smid et svar. I må så deles om pointene, da I jo begge svarede på mine spørgsmål.
Avatar billede roenving Novice
16. maj 2005 - 20:38 #12
Velbekomme '-)
Avatar billede roenving Novice
16. maj 2005 - 20:40 #13
-- og PS! Du ved vel godt at du kan afsætte flere point, hvis du har den lyst ?-)

-- færre point laves ved selv at beholde nogen, men 'Afsæt flere point' findes under 'Funktioner' oppe til venstre !-)
Avatar billede breon Nybegynder
16. maj 2005 - 20:45 #14
Jeg tænkte at svarene til mine spørgsmål ville være forholdsvis nemme, og at det blot var min mangel på js færdigheder der var problemet, så derfor valgte jeg blot at give standard point for et "let" spørgsmål. Men jeg vidste faktisk ikke at man kunne tildele flere point til et spørgsmål, så tak for den information også :-)
Avatar billede olebole Juniormester
16. maj 2005 - 20:51 #15
Mit bidrag til tråden var _yderst_ beskedent, så jeg springer over denne gang, tak  ;o)
Avatar billede breon Nybegynder
16. maj 2005 - 20:54 #16
Ok, så går pointene til roenvig. Men tak for hjælpen til Jer begge.
Avatar billede roenving Novice
16. maj 2005 - 20:54 #17
Tak for point ;~}
Avatar billede olebole Juniormester
16. maj 2005 - 21:05 #18
- selvtak  ;o)
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