Avatar billede goose Nybegynder
27. september 2005 - 14:28 Der er 13 kommentarer og
1 løsning

Vis kun tabelceller hvis skærmen er stor nok

Jeg har en side som er bygget op i en tabel med 3 kolonner.

leftTD
midtTD
rightTD

Nu vil jeg så gerne skjule leftTD og rightTD hvis brugernes tilgængelige skærmareal er mindre en 1024 i bredden.

Skal helst virke cross-browser.

Hvordan gør jeg det?
Avatar billede roenving Novice
27. september 2005 - 14:39 #1
F.eks.

<table style="width:100%">
  <tr>
    <td id="leftTD" style="width:120px;background-color:#77f;">&nbsp;</td>
    <td id="midtTD" style="width:1024px;background-color:#f0f;">&nbsp;</td>
    <td id="rightTD" style="width:120px;background-color:#ff0;">&nbsp;</td>
  </tr>
</table>

<script language="javascript" type="text/javascript">
window.onload = function(){
  if(screen.availWidth < 1024){
    document.getElementById('leftTD').style.display = 'none';
    document.getElementById('rightTD').style.display = 'none';
  }
}
</script>
Avatar billede mm12010 Nybegynder
27. september 2005 - 14:40 #2
if(screen.width<1024) document.getElementById("leftTD").style.display=document.getElementById("rightTD").style.display="none";
Avatar billede roenving Novice
27. september 2005 - 14:45 #3
-- men det er nok ikke fedt at fyre den før onload forekommer i dokumentet !-)
Avatar billede goose Nybegynder
27. september 2005 - 14:52 #4
roenving >> skal den være i HEAD eller efter BODY?

skal der ligeledes være noget BODY onload eller lign for jeg kan ikke få det til at virke?

/Goose
Avatar billede roenving Novice
27. september 2005 - 15:05 #5
Eksemplet burde virke uden problemer, men det forholder sig ikke til browser-vinduets bredde, men skærmens tilgængelige bredde !-)

-- så hvis du skal teste den, skal du sætte tallet, der sammenlignes med, lidt højere end din egen skærmbredde ...

-- og hvis du skal gøre efter browserens bredde skal vi have fat i andre værdier !-)
Avatar billede goose Nybegynder
27. september 2005 - 15:10 #6
Nåee, men det skulle helst være efter browserens bredde, det var det jeg mente med brugerens tilgængelige skærmareal :o)

/Goose
Avatar billede roenving Novice
27. september 2005 - 15:20 #7
if(document.documentElement.clientWidth < 1024){
Avatar billede goose Nybegynder
27. september 2005 - 15:28 #8
hmm, så fjerner den mine tabelceller selvom skærmen køre 1280*768 ...

<script language="javascript" type="text/javascript">
window.onload = function(){
if(document.documentElement.clientWidth < 1024){
    document.getElementById('leftTD').style.display = 'none';
    document.getElementById('rightTD').style.display = 'none';
  }
}
</script>

/Goose
Avatar billede goose Nybegynder
27. september 2005 - 15:31 #9
hov, i Firefox og Opera virker det, men ikke i IE og Netscape :o(

/Goose
Avatar billede roenving Novice
27. september 2005 - 15:42 #10
I FireFox og Netscape kører den samme renderingsmaskine, Gecko ...


-- men denne fik jeg til at virke i alle mine browsere:

window.onload = function(){
  var winWidth = window.innerWidth ? window.innerWidth : document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
  if(winWidth < 1024){
    document.getElementById('leftTD').style.display = 'none';
    document.getElementById('rightTD').style.display = 'none';
  }
}
Avatar billede roenving Novice
27. september 2005 - 15:44 #11
-- og det skal tilføjes, at den første udgave virkede uden problemer i IE, men det kan være at det er en forudsætning, at man benytter sig af en fuldt kvalificeret doctype, som der er på mine standard-dokumenter !-)
Avatar billede goose Nybegynder
27. september 2005 - 16:35 #12
Det hjalp på det hele, havde lige fortrængt din kæphest med korrekt doctype :o)

Smid et svar roenving.

/Goose
Avatar billede roenving Novice
27. september 2005 - 16:43 #13
Velbekomme '-)
Avatar billede roenving Novice
27. september 2005 - 17:09 #14
-- og tak for point ;~}
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