Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

swap the CSS fille based on screen size > Revisited - help pls 1

Status
Not open for further replies.
webseo

webseo

Technical User
Mar 24, 2005
4
US
Hello all,

I just found this site while I was searching for a solution to a problem. I am trying to switch CSS style sheets based on browser width.

I found this post by BlindPete faq215-4537 > which seemed like the answer I was looking for. I'm not very good at javascript and I get an error when I run this script.

Script:
<html>
<link href="manager.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
if (screen.width < 1024)
link = document.getElementsByTagName( "link" )[ 0 ];
link.href = "manager800.css";
</script>
<head>

Error is:
Line: 22
Char: 5
Error: 'link' is undefined
Code: 0
URL: location of the file

Line 22 = "link = document.getE......" line

Could someone explain this error and tell me how to fix it? I changed the href paths to my actual CSS files/paths.

I have another question. I looked at several other scripts elsewhere that were much more complicated, but several of them suggested using the property "window.screen.availWidth" instead of "screen.width" to resize based on browser window size instead of monitor size. Is this correct?

Thanks in advance! Looks like you have a great place here.

martin
(webseo)
 
Sort by date Sort by votes
Hi,

This code works in my browser. Which browser/version are you using to test?

Try the following:

<html>
<link href="manager.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
var link;
if (screen.width < 1024) {
link = document.getElementsByTagName( "link" )[ 0 ];
link.href = "manager800.css";
}
</script>
<head>
 
Upvote 0 Downvote
1. That brackets and 0 are completely uncomprehensible. Try:
Code: 
    link = document.getElementsByTagName("link");
2. I guess availWidth is better, since it takes into account any side toolbars user might have open and browsers not being maximized.
 
Upvote 0 Downvote
Thanks for the prompt replies.

spazdragon, I am trying this in IE6 and Firefox and I get the same basic errors in each.

When I try your code the error changes to: link is null or not an object (on line #23 because of inserting the var link; line).

Vragabond, I tried to take off the [0] on both scripts and still get the original error on BlindPete's version and the error above on spazdragon's version, with and without the [0].

Any other suggestions?

Thanks again!

martin
(webseo)
 
Upvote 0 Downvote
How about if you try a different approach?
Code: 
<html>
<link href="manager.css" rel="stylesheet" type="text/css" id="csslink" />
<script type="text/javascript">
  if (screen.availWidth < 1024)
    link = document.getElementById("csslink");
    link.href = "manager800.css";
</script>
<head>
 
Upvote 0 Downvote

I would say that you DO need the square brackets, as getElementsByTagName will always return a collection, even if only one element is returned.

You might want to try waiting until your code has loaded before using the code, however. It may well be that the link line is not parsed and entered into the DOM until after you are trying to access it.

I would also avoid using the name "link", just in case there is a reserved word issue. You also have your code outside the "head" section, no closing "head" tag, and an opening "html" tag with no closing "html" tag. You also have no brace after your if statement, so the last line will get executed even if link is never set to anything. Putting all that together, try something like this:

Code: 
<html>
<head>
	<link href="manager.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript">
	<!--
		function switchCSS() {
			if (screen.width < 1024) {
				var myLink = document.getElementsByTagName('link')[0];
				if (myLink) myLink.setAttribute('href', 'manager800.css', 0);
			}
		}
	//-->
	</script>
</head>

<body onload="switchCSS();"></body>
</html>

I can confirm that this works for me when I change my screen resolution.

Hope this helps,
Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
Upvote 0 Downvote
Thanks for these other suggestions.

I tried BillyRayPreachersSon's script and it doesn't produce an error. Now I need to tweak the CSS and see if I can make the switching work.

I'll report back..thanks again!

martin
(webseo)
 
Upvote 0 Downvote
I think that I am correct in saying that how you determine the width depends on which browser you are using and the presence or absense of a doctype. AFAIK this works in all situations.

Code: 
 var w=0;  
 w = document.getElementsByTagName('html')[0].clientWidth;
 if(w==0){w = window.innerWidth}
 if(w==0){w = window.outerWidth}
 if(w==0){w = document.body.clientWidth}

Clive
 
Upvote 0 Downvote
Thanks again for all the help. I have got BillyRayPreachersSon's script to work fine, no errors and the CSS stylesheet switches when I change my screen resolution.

I have tried all three properties (is that the right term?): window.screen.availWidth, screen.availWidth, and screen.width and the script acts the same. That is I have to change my screen resolution to initiate the switch. That's great and helps me with my immeditate situation. What I was originally looking for was that when the user resizes their browser window, that the script would kick in at < 1024 (or whatever).

Is that what CliveC's script will do? Clive, your demo example is very interesting and I will check it out further later today.

Thanks again and any other pointers are much appreciated.

martin
(webseo)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
817
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top