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?
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
27. september 2005 - 14:39
#1
F.eks. <table style="width:100%"> <tr> <td id="leftTD" style="width:120px;background-color:#77f;"> </td> <td id="midtTD" style="width:1024px;background-color:#f0f;"> </td> <td id="rightTD" style="width:120px;background-color:#ff0;"> </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>
27. september 2005 - 14:40
#2
if(screen.width<1024) document.getElementById("leftTD").style.display=document.getElementById("rightTD").style.display="none";
27. september 2005 - 14:45
#3
-- men det er nok ikke fedt at fyre den før onload forekommer i dokumentet !-)
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
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 !-)
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
27. september 2005 - 15:20
#7
if(document.documentElement.clientWidth < 1024){
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
27. september 2005 - 15:31
#9
hov, i Firefox og Opera virker det, men ikke i IE og Netscape :o( /Goose
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'; } }
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 !-)
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
27. september 2005 - 16:43
#13
Velbekomme '-)
27. september 2005 - 17:09
#14
-- og tak for point ;~}
Vi tilbyder markedets bedste kurser inden for webudvikling