Avatar billede limemedia Nybegynder
02. november 2002 - 11:01 Der er 18 kommentarer og
1 løsning

Positionering af Layer - også ved scroll

Jeg har kodet lidt på en side, hvor jeg vil "klistre" et layer til bunden af browser vinduet. Det går også fint (testet i IE6, NN7 og Moz1.1). Men scroller man på siden, flytter layeret sig - jeg vil gerne forhindre dette - så effekten er som at have frames (bare uden frames *g*)

Eksemplet ligger her (uden scroll)
http://ljweb.dyndns.org/test/bottombar.html

Og koden jeg har lavet her
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>TEST</title>
<meta name="Author" content="Lars B. Jensen, LJ Webnologics">
<meta name="Copyright" content="Lars B. Jensen, LJ Webnologics">

<style type="text/css">
<!--
    .copyright {
        color: #ffffff;
        font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size : 10px;
        padding : 1px 4px 0px 4px;

    }

    #copyright {
        position: absolute;
        top: 500;
        left: 0;
        width: 760;
        height: 20;
        clip: rect(0px 760px 20px 0px);
        visibility: hidden;
        background-color: #123456;
        layer-background-color: #123456;
        z-index: 5;
    }
-->
</style>

</head>

<body>

<div name="copyright" id="copyright">
    <table width="760" height="20" border="0" cellspacing="0" cellpadding="0" align="left">
    <tr>
    <td width="500" valign="middle" class="copyright">TEST</td>
    <td width="260" valign="middle" align="right" class="copyright">TEST</td>
    </tr>
    </table>
</div>

<script language="JavaScript" type="text/javascript">
<!--
    // Identify the browser
    op = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1) ? true : false;
    ns = (document.layers && !op) ? true : false;
    ie = (document.all && !op) ? true : false;
    dom = (document.getElementById || op) ? true : false;

    // Find dimensions
    winW = (ie) ? document.body.offsetWidth-20 : window.innerWidth;
    winH = (ie) ? document.body.offsetHeight-4 : window.innerHeight;

    // Get the style object
    obj = (ie) ? document.all['copyright'].style : document.getElementById('copyright').style;
   
    // Set the layer style
    obj.top = winH-20;
    obj.visibility = 'visible';
//-->
</script>

</body>
</html>

Hvad skal jeg søge på i google for at finde noget om emnet, eller har du en løsning ?
Avatar billede limemedia Nybegynder
02. november 2002 - 11:02 #1
Tillægsspørgsmålet; virker ovenstående i Opera ?
Avatar billede limemedia Nybegynder
02. november 2002 - 11:17 #2
Skal jeg virkeligt ud i løsninger ala http://pastelhorn.com/project/js/scrollspy ?
Avatar billede pelkjaer Nybegynder
02. november 2002 - 11:29 #3
Din løsning virker også i Opera, men ikke i NN4 (er måske heller ikke så vigtigt)

Ud af mine snippets har jeg sat denne sammen:
http://peterelkjaer.dk/exp/botlayer.html

Den virker i NN4 også.
Avatar billede limemedia Nybegynder
02. november 2002 - 11:55 #4
Kigger på din løsning (skal nok forkortes lidt :D)... Ad NN4, jeg har længe designet til den browser men er nu gået væk fra den. Der er for mange tweaks og hacks til at jeg vil tilfredsstille de 2 brugere der stadig bruger den
Avatar billede limemedia Nybegynder
02. november 2002 - 11:57 #5
virker ikke, ligger jeg 100x a<br> ind og på den måde forcer en scrollbar, kan jeg scrolle layeret væk fra bunden - meningen er at den netop skal være klistret til bunden uden "svinger i valsen"
Avatar billede pelkjaer Nybegynder
02. november 2002 - 11:58 #6
Jeg er også selv gået væk fra den - mente bare at du ikke var:)

Ja scriptet burde forkorted en del, det kan du selv gøre.
Som det er nu kan det bruges til mange andre ting også :)
Avatar billede pelkjaer Nybegynder
02. november 2002 - 11:58 #7
2 sek
Avatar billede pelkjaer Nybegynder
02. november 2002 - 12:08 #8
Nope - jeg tror du skal ud i noget ala http://pastelhorn.com/project/js/scrollspy

Der er jo ligesom ikke så mange andre muligheder når det skal kunne scrolle.

ikke engang en

div {
bottom: 0px;
left: 0px;
}

virker :)
Avatar billede pelkjaer Nybegynder
02. november 2002 - 12:37 #9
Tjek igen

Nu virker det i IE, NN4, NS6 og Opera6

Der manger bare et "reload ved resize" til NN4 og Opera
Avatar billede limemedia Nybegynder
02. november 2002 - 12:42 #10
ja, jeg må lære at leve med at den flimrer .... hvorfor synes jeg efterhånden jeg render panden mod muren i flere programmeringssprog med "nåååhr, det kan man ikke"

tak alligevel - du bekræftede min formodning
Avatar billede pelkjaer Nybegynder
02. november 2002 - 12:43 #11
Ellers er der jo altid frames :)
Avatar billede limemedia Nybegynder
02. november 2002 - 12:44 #12
and that is not an option here :)

vil herren have nogle point til samlingen ?
Avatar billede pelkjaer Nybegynder
02. november 2002 - 12:45 #13
Næ, den løsning jeg endte op med havde du jo allerede selv :)
Avatar billede limemedia Nybegynder
02. november 2002 - 12:52 #14
ok... ellers må du sende en skriftlig klage i 3 kopier med frankeret svarkuvert
Avatar billede pelkjaer Nybegynder
02. november 2002 - 12:52 #15
Det bliver sq' for dyrt når det skal helt til solen rige =oD
Avatar billede limemedia Nybegynder
02. november 2002 - 12:54 #16
ja nemlig :) men nu er jeg snart på visit i dk igen
Avatar billede pelkjaer Nybegynder
02. november 2002 - 12:55 #17
Kun visit eller permanent?
Avatar billede limemedia Nybegynder
02. november 2002 - 13:00 #18
visit for at prøve at gøre det permanent...
Avatar billede limemedia Nybegynder
02. november 2002 - 13:53 #19
jeg endte med denne løsning indtil videre...

<script language="JavaScript" type="text/javascript">
<!--
    function setPosition() {
        // Find dimensions
        winH = (ie) ? document.body.offsetHeight-4 : window.innerHeight;
        winH += document.body.scrollTop;
       
        // Set the layer style
        obj.top = winH-20;
        obj.visibility = 'visible';
       
        // Set the timer for next check in 10ms
        setTimeout("setPosition()", 10);
    }

    // Identify the browser
    op = (navigator.userAgent.toLowerCase().indexOf("opera")!=-1) ? true : false;
    ns = (document.layers && !op) ? true : false;
    ie = (document.all && !op) ? true : false;
    dom = (document.getElementById || op) ? true : false;

    // Get the style object
    obj = (ie) ? document.all['copyright'].style : document.getElementById('copyright').style;

    // Start the setPosition loop :)
    setPosition();
//-->
</script>
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