Søg
Avatar billede sthen Nybegynder
06. oktober 2002 - 01:29 Der er 14 kommentarer og
2 løsninger

Bruge forskellige CSS afhængig af skærmopløsningen

Jeg har i øjeblikket et <DIV> tag der ser ud som følger:

<div id='popmenu' class='menuskin' onMouseover='clearhidemenu();highlightmenu(event,"on")' onMouseout='highlightmenu(event,"off");dynamichide(event)'></div>

Men jeg skal kunne anvende forskellige classes afhængig af skærmstørrelsen.

How ???

Sikkert nemt for en Java-haj, men svært for mig.
Avatar billede sthen Nybegynder
06. oktober 2002 - 01:35 #1
Altså hvis skærmopløsningen f.eks. er 800x600 skal jeg bruge class="menuskin" og hvis den er 1024x768 skal jeg måske bruge class="menuskin2"
Avatar billede sukos Juniormester
06. oktober 2002 - 01:45 #2
Og hvad nu hvis brugeren altid har sin history-menu åben? Altså f.eks. er skærmbredden 1024x768, men rent "fysisk" vises kun 800x600 i browseren, fordi history ligger altid der i venstre side?????

Drop det skærmopløsnings-halløj, og lav sider som enten er en fast str. eller automatisk tilpasser sig.

Blot et velment råd! :O)
Avatar billede sthen Nybegynder
06. oktober 2002 - 01:58 #3
Ja det er jo DIN mening, men lige i denne situation SKAL jeg altså have mulighed for det.
Avatar billede jakoba Nybegynder
06. oktober 2002 - 02:13 #4
Det er nogenlunde nemt at vælge stylesheet baseret på selve skærmens størrelse:

et script i head:
<script type='text/javascript'>
if ( window.screen.width < 800 ) {
    document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleLille.css'>");
} else {
    document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleStor.css'>");
}
</script>

Og så er stylesheetet udvalgt efter skærmens størrelse-

------------------

Men som sukos siger er det ret ligegyldigt hvor stor skærmen er. det vigtige er størrelsen på vinduet.

Desværre tillader IE ikka at vi spørger hvor stort vinduet er før EFTER <body-kommandoen. Og samtidig bliver NS og Opera ofte forvirrede hvis man prøver at sætte et stylesheet EFTER <body kommandoen. Så alt ialt bliver der brug for 5 forskellige stylesheets:
    styleNsOpFuldLille.css  // NS, Opera.  fuldstændigt stylesheet for små vinduer
    styleNsOpFuldStor.css  // NS, Opera.  fuldstændigt stylesheet for store vinduer
    styleIePreBodyFelles.css  // IE.  delvist stylesheet for første del af alle vinduer
    styleIePostBodyLille.css  // IE.  delvist stylesheet for sidste del af små vinduer
    styleIePostBodyStor.css  // IE.  delvist stylesheet for sidste del af store vinduer


i head indsættes dette script:

<script type='text/javascript'>
if ( window.innerWidth ) {  // sæt fuldstændig style for Ns, Opera og andre standard browsere
    if ( window.innerWidth < 800 ) {
        document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleNsOpFuldLille.css'>");
    } else {
        document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleNsOpFuldStor.css'>");
    }
} else {          // set partiel style for IE. alt der skal gælde for <body kommandoen
    document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleIePreBodyFelles.css'>");
}
</script>

lige efte <body kommandoen indsætter du endnu et script:

<script type='text/javascript'>
if ( ! window.innerWidth ) {  // set partiel style for IE. alt der skal gælde efter <body kommandoen
    if ( window.innerWidth < 800 ) {
        document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleIePostBodyLille.css'>");
    } else {
        document.write("<LINK REL='STYLESHEET' TYPE='text/css' HREF='styleIePostBodyStor.css'>");
    }
}
</script>

mvh JakobA
Avatar billede =maddog= Nybegynder
06. oktober 2002 - 02:14 #5
du kan sætte class dynamisk med
document.getElementById('popmenu').className='menuskin';
jeg er 100% enig med sukos i at det er ikke blot et spørgsmål om selve resolutionen på skærmen, men også hvilken browser brugeren anvender og hvilke indstillinger han har valgt. den del må du selv rode med.
(jeg sætter en bajer på at du nok skal få hjælp :-)
Avatar billede =maddog= Nybegynder
06. oktober 2002 - 02:15 #6
jakoba kommer selvfølgelig først med en perfekt løsning :-)
Avatar billede jakoba Nybegynder
06. oktober 2002 - 02:20 #7
perfekt og perfekt... efter at have testet at innerWidth ikke findes bruger jeg den alligevel i scriptet efter <body kommandoen :(
den indre if linie der skal være:
    if ( document.body.clientWidth < 800 ) {
Avatar billede =maddog= Nybegynder
06. oktober 2002 - 02:24 #8
ok. en skønhedsfejl i ny og næ :-).
Avatar billede sthen Nybegynder
06. oktober 2002 - 03:06 #9
Ked af at sige det jacoba, men det fungerer ikke med IE.
Det er somom der slet ikke læses Stylesheets ind EFTER <BODY>-tagget.

Den første del af stylesheetet, som indlæses i <HEAD> indlæses fint nok, men 2. del kommer aldrig med.
Avatar billede sthen Nybegynder
06. oktober 2002 - 03:08 #10
=maddog=
Det der med at sætte class dynamisk, kan du ikke lige uddybe det, det lyder da lidt smartere.
Avatar billede sthen Nybegynder
06. oktober 2002 - 03:33 #11
Men jeg humper i seng nu, lad os se om der er kommet mere i morgen eftermiddag.
Avatar billede Slettet bruger
06. oktober 2002 - 09:45 #12
Du kan også bare udskrive div'en:

<script>
klasse = (screen.width > 800) ? "menuskin1024" : "menuskin800";

document.write('<div id="popmenu" class="' + klasse + '" onMouseover="clearhidemenu(); highlightmenu(event,\'on\');" onMouseout="highlightmenu(event,\'off\'); dynamichide(event);"></div>');
</script>
Avatar billede sthen Nybegynder
06. oktober 2002 - 11:49 #13
>> phoenixv

Præcis hvad jeg spurgte efter. Dog en lille skønhedsfejl - du burde have skrevet:

var klasse = (screen.width > 800) ? "menuskin1024" : "menuskin800";

men den var da til at tage at føle på.

Lidt point til jacoba for en god forklaring og et godt forsøg også.
Avatar billede Slettet bruger
06. oktober 2002 - 13:23 #14
Øhh? "var" er da totalt ligegyldigt!
Avatar billede sthen Nybegynder
06. oktober 2002 - 13:52 #15
Ikke desto mindre fik jeg besked om scriptfejl indtil jeg tilføjede var, så sluttede det.
Avatar billede Slettet bruger
06. oktober 2002 - 14:15 #16
Det vil jeg gerne se. Det er kun i meget få tilfælde, at det er nødvendigt at bruge var. Og slet ikke uden for en funktion.
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I går 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »