Avatar billede simseboii Nybegynder
22. oktober 2008 - 19:58 Der er 28 kommentarer

Bar som på Facebook

Hej.

Jeg vil gerne lave en bar i bunden af siden, som Facebook har det nu.
Selve baren har jeg fået placeret. Du kan se hvordan, i slutningen af min tråd.

Mit problem er, at jeg gerne vil have lavet, så man kan trykke på noget af det tekst, som står i baren, og så skal der komme et lille vindue frem ovenfor - præcis som der gør på Facebook.
Til jer, som ikke ved, hvordan det fungerer på Facebook er her et billede:

http://www.snuzzer.dk/facebookbar.gif

Jeg laver selve baren sådan her:

<div id="bar"><div id="bar_container"><div style="text-align:right;">Online</div></div></div>

Og så har jeg selvfølgelig et stylesheet:

html.use_scroll_wrapper
{
    overflow: hidden;
}

#bar
{
    width: 100%;
    height: 23px;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 3;
    background-image: url('images/bar.gif');
    background-position: center;
    background-repeat: no-repeat;
}

#bar_container
{
    text-align: center;
    position: relative;
    top: 8px;
    font-size: 10px;
    width: 980px;
    align: center;
}

Er der nogen, som har et bud?

På forhånd tak.
- Simon Støvring
Avatar billede roenving Novice
23. oktober 2008 - 16:11 #1
-- og du har ikke sagt ja til at installere noget, da du oprettede facebook-profilen ?-)
Avatar billede simseboii Nybegynder
23. oktober 2008 - 21:40 #2
Nej, det har jeg ikke.
Avatar billede olebole Juniormester
23. oktober 2008 - 22:11 #3
<ole>

simseboii >> billedet kan ikke rigtig bruges til noget, når du beskærer, som du gør. Det er f.eks. ikke til at se, hvor den ligger. Prøv at uploade et lidt mere brugbart billede  =)

/mvh
</bole>
Avatar billede simseboii Nybegynder
24. oktober 2008 - 09:19 #4
olebole -> Ja, det kan jeg godt se. Jeg har smidt et nyt op, men jeg hasr stadig sløret navnene på siden. Det synes jeg er mest rimeligt.

Billedet kan stadig findes på:
http://www.snuzzer.dk/facebookbar.gif
Avatar billede micc Nybegynder
24. oktober 2008 - 13:34 #5
Jeg er ikke helt med på hvad for en div der skal trykkes på og hvad for en der skal komme frem, så jeg kan lige give en generel forklaring. Placer følgende i html'en:
<div id="button" onclick="displayElement(document.getElementById('container'))">tryk her</div>
<div class="hide" id="container">Indhold ...</div>

og følgende i css'en:
.hide {
  display: none;
}

og følgende i sidens javascript-del:
function displayElement(element) {
  element.className = (element.className == "hide" ? "" : "hide");
}

Så bliver container-div'en synlig/usynlig hver gang der trykkes på button-div'en. Er det noget i retning af det du er ude efter?
Avatar billede simseboii Nybegynder
24. oktober 2008 - 16:43 #6
micc -> Jeg har rodet lidt med det, og det virker umiddelbart som en god løsning, men der er stadig nogle fejl.

Eksempelvis virker det ikke i Internet Explorer, men det virker fint i FireFox.

Når jeg bruger to tabs, så reagerer det meget underligt.

Jeg har lagt det op til test her:
http://snuzzer.dk/bar/

Der er en del kode at ligge op, så kan I ikke kigge i kildekoden i stedet? Det er måske også nemmere at se tingene der.

Og her er et link til stylesheetet:
http://www.snuzzer.dk/bar/stylesheet.css
Avatar billede micc Nybegynder
24. oktober 2008 - 17:31 #7
Umiddelbart så har du et div-starttag for meget i denne sektion:
<div class="hide" id="online_tab" style="position:relative;left:780px;">
<div style="width:202px;background-image:url('images/tab.gif');text-align:left;">
  <div style="position:relative;top:9px;left:12px;">
  <span style="font-weight:bold;">Online</span><br />
  Kevin<br />
  SnuZZer<br />
  ZaKKo<br />
  Funny-Man<br />&nbsp;
  </div>
<div style="width:202px;height:3px;background-image:url('images/tab_bottom.gif');"></div>
</div>



Desuden så brokker min browser sig over følgende:
"align is an unknown property"
Line 34:
  align: center;

Og din stylesheet reference:
<LINK REL="Stylesheet" HREF="stylesheet.css" TYPE="text/css">
skal være med små bogstaver.

Jeg tror det vil virke efter hensigten (i hvert fald i Firefox) hvis du retter de ting.
Avatar billede micc Nybegynder
24. oktober 2008 - 17:35 #8
rettelse: du behøver vist ikke have små bogstaver i stylesheet referencen; jeg troede bare et kort øjeblik at du havde en XHTML doctype.
Avatar billede simseboii Nybegynder
24. oktober 2008 - 18:19 #9
micc -> Det hjælper på det. Nu er det hele bare rykket. På én måde i FireFox og på en anden i Internet Explorer.

Et helt andet problem er, at tabsne gerne skulle lukke, når en anden åbnes. Så man kun kan have én åben. Jeg tror, det kommer til at fungere bedst, og så er jeg også fri for at de "stabler" sig ovenpå hinanden, hvis man trykker på både "Bogmærker" og "Online".
Avatar billede micc Nybegynder
24. oktober 2008 - 20:00 #10
Prøv med følgende i javascript-delen:


var currentVisibleElement = null;

function displayElement(element)
{
    if (element == null) {
        element.className = "";
        currentVisibleElement = element;
    }
    else if (element == currentVisibleElement) {
        element.className = "hide";
        currentVisibleElement = null;
    }
    else {
        currentVisibleElement.className = "hide";
        element.className = "";
        currentVisibleElement = element;
    }
}
Avatar billede olebole Juniormester
25. oktober 2008 - 00:07 #11
<ole>

En ting, man bør være opmærksom på, er, at skift af CSS-klasse ofte performer ganske elendigt. Det medfører ofte opløsning i yderst komplekse arve-/kaskaderegler - og ofte giver browseren op og genberegner hele dokumentet.

Derfor betaler det sig ofte at skifte de enkelte CSS-properties på elementet i stedet.

/mvh
</bole>
Avatar billede micc Nybegynder
25. oktober 2008 - 00:26 #12
@olebole
Interessant information. Ved du om der er udsigt til forbedringer på området eller om problemet i sin natur er for komplekst til at blive løst?

Ulempen ved at skifte en css-property direkte er selvfølgelig at man så skal lagre elementets oprindelige display-værdi så man kan skifte den tilbage til det rigtige - medmindre selvfølgelig at man ved at alle elementer der er omfattet af funktionen er ens på det punkt.

Så med olebole's betragtning i mente kunne man godt ændre det til:


var currentVisibleElement = null;

function displayElement(element)
{
    if (element == null) {
        element.style.display = "block";
        currentVisibleElement = element;
    }
    else if (element == currentVisibleElement) {
        element.style.display = "none";
        currentVisibleElement = null;
    }
    else {
        currentVisibleElement.style.display = "none";
        element.style.display = "block";
        currentVisibleElement = element;
    }
}
Avatar billede olebole Juniormester
25. oktober 2008 - 00:53 #13
Du kan bare sige:
    ELEMENT.style.display = "";

Så vender det tilbage til sin 'default tilstand'.

Der er nok ikke håb om forbedringer. Det kan i sin natur være en yderst kompleks opgave at regne ud, hvad en ændring af en klasse kan betyde for arv under det ændrede niveau i DOM-træet. Det sker ikke altid, og indehaveren af quirksmode.org har da også lavet en ofte refereret 'test', som kun består af ét enkelt eksempel med en ekstrem simpel struktur, der performer fint.

I den anden ende har både roenving og jeg flere gange lavet realistiske test, som snøvlede helt op til mere end et sekund med at rendere. Virkeligheden er som så ofte mere kompleks, end den umiddelbart ser ud til  =)
Avatar billede olebole Juniormester
25. oktober 2008 - 01:11 #14
- men kan vi mon ikke blive enige om, denne altid vil udløse en fejl, når if-betingelsen er opfyldt?

    if (element == null) {
        element.style.display = "block";
        currentVisibleElement = element;
    }

- og det vil denne også, hvis currentVisibleElement endnu ikke er sat - eller sat til null:

    else {
        currentVisibleElement.style.display = "none";
        element.style.display = "block";
        currentVisibleElement = element;
    }

Det kan rigtig ofte betale sig at teste sine forslag  ;o)
Avatar billede olebole Juniormester
25. oktober 2008 - 01:11 #15
- eller kunne overskue dem selv  =)
Avatar billede micc Nybegynder
25. oktober 2008 - 01:22 #16
Jeg ville testet det hvis jeg ikke havde været på vej ud af døren på det tidspunkt. :) Jeg valgte at poste koden alligevel, idet den jo netop var så nem at overskue, at kun 'typos' ville kunne ødelægge det. ;)

Men der sneg sig alligevel en tastefejl ind kan jeg se (teknisk set vel en copy-paste fejl). Der skal naturligvis stå:

var currentVisibleElement = null;

function displayElement(element)
{
    if (currentVisibleElement == null) {
        element.style.display = "";
        currentVisibleElement = element;
    }
    else if (element == currentVisibleElement) {
        element.style.display = "none";
        currentVisibleElement = null;
    }
    else {
        currentVisibleElement.style.display = "none";
        element.style.display = "";
        currentVisibleElement = element;
    }
}
Avatar billede micc Nybegynder
25. oktober 2008 - 01:34 #17
"Du kan bare sige:
    ELEMENT.style.display = "";

Så vender det tilbage til sin 'default tilstand'."
Tak for den reminder. Den åbenlyst smartere løsning havde jeg glemt alt om i mine overvejelser. I så fald er den eneste faldgrube hvis man ønsker en anden 'default' end den sædvanlige 'default' (display:block; på et <img> under strict fx), men generelt burde det jo ikke være nødvendigt, eller tilrådeligt, at 'ændre' på display's default-værdier.

Dermed er min funktion faktisk mere anvendelig end jeg umiddelbart havde tiltænkt. :)
Avatar billede olebole Juniormester
25. oktober 2008 - 01:36 #18
Du er simpelthen ikke værd at spilde tid på:
    http://www.eksperten.dk/spm/850028#rid7239956

Alle dine dårlige undskyldninger skjuler intet! Du er transparent som velpudset bøhmisk krystal! Kun en absolut JS-newbie kan ikke se den åbenbart indlysende fejl i:

    if (currentVisibleElement == null) {
        element.style.display = "";
        currentVisibleElement = element;
    }
Avatar billede olebole Juniormester
25. oktober 2008 - 01:38 #19
Sorry, jeg fik kopieret fra den forkerte - men meningen burde være tydelig. 'Seriøs' og 'kodepuritaner' er komplet umuligt at forbinde med din person!
Avatar billede micc Nybegynder
25. oktober 2008 - 02:09 #20
Koden jeg skrev i 25/10-2008 01:22:49 virker fint for mig i praksis og har den funktionalitet som simseboii bad om.

Re: din personlige hetz mod mig, så vil jeg foreslå at du begrænser den til den anden tråd, da denne tråd bør være dedikeret til at svare på de stillede spørgsmål.
Avatar billede roenving Novice
25. oktober 2008 - 09:32 #21
Og den simple udgave af en show-hide-ting:

var oldElm = null;

function showHide(elm){
  var oldDisp = elm.style.display;
  if(oldElm)
    oldElm.style.display = "";
  elm.style.display = oldDisp != "block" ? "block" : "none";
  oldElm = elm;
}
Avatar billede olebole Juniormester
25. oktober 2008 - 16:58 #22
Jeg hetzer absolut ikke mod nogen! Jeg påpeger blot, at der ikke er tale om uheldige enkelttilfælde - men et let genkendeligt mønster  ;o)
Avatar billede simseboii Nybegynder
25. oktober 2008 - 19:12 #23
Så! Det ser faktisk ret godt ud nu! Jeg savner dog én ting. Hvis jeg kan bede om mere? I har været til stor hjælp!

Er det besværligt at lukke tabsne, hvis der klikkes udenfor dem? Som det er nu, så klikker man på knappen en gang mere for at lukke tabben.

Hvis ikke det er alt for kompliceret, er det så en, som ved, hvordan det kan laves?
Avatar billede zips Juniormester
25. oktober 2008 - 19:19 #24
Blot til info, så er den bar i har lavet i toppen på IE6 :)
Avatar billede olebole Juniormester
25. oktober 2008 - 20:35 #25
Ja, det er en del mere besværligt. Der er to løsninger, man somregel bruger i den situation:

1) Du lægger et element mellem selve dokumentet og tabben. Det gøres ved at give dem forskelligt z-index. Så strækker du elementet til at dække hele viewporten og tager højde for evt. scroll af siden. På elementet lægges en onmousedown handler, som lukker tabben og skjuler trigger-elementet.

2) Du lægger en onmousedown handler på dokument objektet, som lukker tabben. Det kræver, du sørger for dine events i tabben og baren ikke bobler op gennem DOM hierakiet og udløser event'en.

Begge dele kræver en hel del hensyntagen til browserforskelle og kræver en del arbejde  ;o)
Avatar billede simseboii Nybegynder
26. oktober 2008 - 14:49 #26
zips -> Det er noget møg.
Så er spørgsmålet, om vi stadig bør optimere til Internet Explorer 6.0? Hvis vi bør - har du så et bud på, hvordan det kan fikses?
Jeg er rigtig dårlig til det med at optimere til et utal af browsere.

olebole -> Det virker som en rigtig god løsning. Jeg har lige testet det, men jeg kan kun få det til at virke til FireFox. Har du en idé til, hvordan jeg kan få det til at virke i Internet Explorer?

Her er koden:

<script language="javascript">
var oldElm = null;

function displayElement(elm)
{
  if(elm=="none")
  {
    oldElm.style.display = "";
  }
  else
  {
    var oldDisp = elm.style.display;
    if(oldElm)
      oldElm.style.display = "";
    elm.style.display = oldDisp != "block" ? "block" : "none";
    oldElm = elm;
  }
}

function tabclosing()
{
  document.getElementById("close").style.width = document.documentElement.clientWidth + "px";
  document.getElementById("close").style.height = document.documentElement.clientHeight + "px";
}
</script>

<body onLoad="tabclosing();" onResize="tabclosing();">
Avatar billede simseboii Nybegynder
28. oktober 2008 - 21:32 #27
*BUMP* Jeg ved godt, at jeg har spurgt om meget, og jeg er virkelig glad for jeres hjælp - mange tak skal I have, men kan jeg få en eller anden til at hjælpe med mit problem i ovenstående kommentar?
Avatar billede zips Juniormester
28. oktober 2008 - 22:13 #28
Desværre kan jeg ikke hjælpe da jeg ikke ved nok om javascript til at kunne udtale mig :)
Mit indlæg var ren info :)
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