4 replies [Last post]
RibTime
Offline
newbie
South Coast, UK
Last seen: 15 years 45 weeks ago
South Coast, UK
Joined: 2004-11-17
Posts: 9
Points: 0

I'm trying to switch css page depending on what size the users screen is set to. Looking round the web I have stumbled on various pieces of javascript that I've cobbled together to give..

var a , Wide;
Wide = screen.width ;
a = document.getElementsByTagName("link")[0] ; a.disabled = true ;
document.write('The screen mode is ==>' + a.getAttribute("title") + '<br><br>') ;

a = document.getElementsByTagName("link")[1] ; a.disabled = false ;
document.write('The screen mode is ==>' + a.getAttribute("title") + '<br><br>') ;

and the HTML is....

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="/Java/ModeBig.css" title="ModeBig" />
<link rel="alternate stylesheet" type="text/css" media="screen" href="Java/ModeSmall.css" title="ModeSmall"/>
<link rel="alternate stylesheet" type="text/css" media="screen" href="Java/Mode800.css" title="Mode800"/>
<link rel="alternate stylesheet" type="text/css" media="screen" href="Java/Mode1024.css" title="Mode1024"/>
<script src="/Java/CssSwitch.js"></script>
<title>Test</title>
</head>
<body><br><br>
Body text goes here!
</body>
</html>

On the way in the first LINK is disabled with "a.disabled=true", which appears to work ok. The next two lines should, or so I thought, turn the css script "ModeSmall" on with the "a.disabled=false" and then load & assign the BODY text with the attributes of the "ModeSmall.css" file.

I've never really written any Java before and would like any advice on what I'm doing wrong or have missed out from the code.

Regards and thanks in advance.

RibTime

Tags:
RibTime
Offline
newbie
South Coast, UK
Last seen: 15 years 45 weeks ago
South Coast, UK
Joined: 2004-11-17
Posts: 9
Points: 0

Help with css Switch

Guys

I'm kinda keen to have any thoughts on why this is not working.

Is it the Java code or maybe even the HTML environment.

Regards and Merry Christmas

RibTime

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 9 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Help with css Switch

I can't speak for everyone here, but personally I would forget about trying to cater for different screen sizes and concentrate on building a site that is either a fixed width or that scales properly within a fluid format. Personally I try to keep my work free of Javascript as it limits accessibility, sometimes crashes browsers, and is no good for corporate networks that disable Javascript as a matter of course.

Life's a b*tch and then you die!

RibTime
Offline
newbie
South Coast, UK
Last seen: 15 years 45 weeks ago
South Coast, UK
Joined: 2004-11-17
Posts: 9
Points: 0

Help with css Switch

RoyTheBoy

Thanks for the reply.

I have just started using css and built a site that has graphic elements, including photo's and recognise that I haven't approached the design in the most flexible way. My easy way out, or so I thought, was to adust the css page according to the users screen size and this is where the JS came in.

Looking through the forums I have seen many excellent designs and hope to use some of the techniques in future web pages of my own.

If anyone has the answer to my JS question I'm still keen to hear the answer.

Regards

RibTime

RibTime
Offline
newbie
South Coast, UK
Last seen: 15 years 45 weeks ago
South Coast, UK
Joined: 2004-11-17
Posts: 9
Points: 0

Help with css Switch

The answer... Laughing out loud

It seems that we need to turn all style sheets off and then just turn on the relevant one.

var a , Wide;

Wide = screen.width ;

for(i=0; i<4 ; i++)
{
a = document.getElementsByTagName("link")[i] ;
a.disabled=true ;
}

if ( Wide <= 640 ) { a = document.getElementsByTagName("link")[1] ; a.disabled=false ; }
else if ( Wide <= 800 ) { a = document.getElementsByTagName("link")[2] ; a.disabled=false ; }
else if ( Wide <= 1024 ) { a = document.getElementsByTagName("link")[3] ; a.disabled=false ; }
else { a = document.getElementsByTagName("link")[0] ; a.disabled=false ; }

I know nothing about JavaScript so the above may be appalling code Laughing out loud but it works. I will implement it and then look to change the css code to implement the recommendations suggested by RoyTheBoy and others.

Regards

RibTime