Avatar billede KLS Novice
22. august 2005 - 18:09 Der er 5 kommentarer og
1 løsning

Floating Banner

Jeg har lige et enkelt spørgsmål

Jeg har brug for et script, som kan vise et banner, som følger med ned når der scrolles på siden, men som samtidig ikke går "ind" på selve indholdet.

Jeg har en side som er 750 pixels bred, men som er centreret.

Det skal så placeres uden for de 750 pixels, men de er jo centeret, og jeg kan ikke lige lure måden at få det til at passe i alle skærm størrelser.

Desuden skal banneret scrolle med ned af siden, når en bruger bladre ned af på denne.

Er der nogle der kan guide eller puffe mig i den rigtige retning ?

Det skal samtidig også kun vises hvis brugerens browser vindue er større end 800 pixels bredt.
Avatar billede skovenborg Nybegynder
22. august 2005 - 21:59 #1
Prøv med:
<script type="text/javascript">
  var elm;
  var maxWidth = 200; // Den maksimale bredde banneret kan have
  var minWindowWidth = 800;
  window.onscroll = function() {
        if (document.documentElement && typeof document.documentElement.scrollTop == "number") {
              elm.style.position = "absolute"; // Sørg for at browsere, som egentlig har position fixed får absolute, hvis de kommer hertil
              elm.style.top = document.documentElement.scrollTop+"px";
        }

  }
  function resizeElm() {
        var w = document.body.clientWidth;
        if (typeof w == "number") {
          elm.style.display = (w < minWindowWidth) ? "none" : "block";
          elm.style.width = Math.min((w-750)/2,maxWidth)+"px";
        }
  }
  window.onload = function() {
        elm = document.getElementById("banner");
        resizeElm();
  }
  window.onresize = resizeElm;
</script>
<style type="text/css">
  .indhold {
      margin:0px auto;
      width:750px;
      height:300px;
      background-color:#f00;
  }
  #banner {
      position:absolute;
      right:0px;
      top:0px;
  }
  html > body #banner {
      position:fixed;
  }
</style>

<div class="indhold">
en masse indhold
</div>
</div>
<img src="banner.png" id="banner">

Testet i Opera, Mozilla og IE og virker her tilfredsstillende (hvis jeg har forstået spørgsmålet).
Avatar billede KLS Novice
23. august 2005 - 07:01 #2
det var næsten rigtigt forstået :D


men selve mit indhold skulle stadig være centreret.

Men nu har jeg lidt at lege med, så jeg kigger lige selv lidt på det, og vender tilbage hvis jeg rammer en stor mur :D
Avatar billede KLS Novice
03. september 2005 - 14:30 #3
Jeg kunne ikke lige få den til dette

men kan det ikke lade sig gøre ved at man finder Centrum af brugerens Browser vindue

Også ligger halvdelen + 20 Pixels til Start punkt, også smider sit layer der ?

og hvis det kan gøres er der så nogen der evt. kan droppe et par lininer, om hvordan jeg evt. gør dette ?
Avatar billede skovenborg Nybegynder
07. september 2005 - 16:46 #4
når du siger centreret mener du så horinsontalt eller vertikalt (eller begge dele). Mit ovenstående script skulle i hvert fald virke vandret, måske bortset fra de 20 pixels mellemrum.

Evt. kunne du vise siden du vil have det implementeret, så er det nok lettere at se hvor du vil have banneret.
Avatar billede KLS Novice
12. januar 2006 - 06:24 #5
Skovenborg smid et svar.

Jeg kan selv rode med det. Takker for hjælpen.
Avatar billede skovenborg Nybegynder
15. januar 2006 - 00:51 #6
i orden :-)
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