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 wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Attach stylesheet depending on screen size 1

Status
Not open for further replies.
Nogi

Nogi

Technical User
Dec 10, 2004
132
BE
I have found a script on the net that attaches a stylesheet to an .html document depending on the screen size of the user.

Exactly what i needed, but unfortunately, not working.

I've pasted it in the head of my html:
Code: 
var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth-16;
  winH = window.innerHeight-16;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}
if (winW <= 1600)  {
  document.write('<link rel="stylesheet" type="text/css" href="1600.css">');
}
if (winW <= 1280)  {
  document.write('<link rel="stylesheet" type="text/css" href="1280.css">');
}
if (winW <= 1024) {
  document.write('<link rel="stylesheet" type="text/css" href="1024.css">');
}
if (winW <= 800) {
  document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
if (winW <= 640) {
  document.write('<link rel="stylesheet" type="text/css" href="640.css">');
}
// End -->
</script>

Is there anyone who can help me out getting this script to work?
 
Sort by date Sort by votes
- How are you running this script?

- How are you including it?

- Why do you only support Netscape and IE (i.e. you have no default resolution)?

- Do you actually have an open script tag?

- Do you really need this solution? Could you not rework your pages to be a bit more fluid (of course, if this is to load different size background images, then ignore this!)

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
i'm actually quiet a script-newbie. I've been searching the net for a fluid-kinda screen resize thing, but what i found was way over my head.

I'm currently using a script that chooses a background image depending on the users' screensize, and that works.

Now trying to reset my table to the necessary % so as to be able to make it show correct on every screen size.

If you have other options, please let me know, but as for now it's way to difficult for me to accomplish otherwise.
 
Upvote 0 Downvote
You've not sais how you are including or running this script, or if your markup is correct. Perhaps you could do this - it would make it easier to debug.

You might also consider changing the size detection - at present, you are going on browser size, not screen size. Is this what you really want to do?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
No, the idea is getting the screen size correct, but since i could find anything about this..

What i've done is just add this script in the header of the html.

Now you ask, maybe i should try to add it after the body tag...
 
Upvote 0 Downvote
OK - let's try wording it another way. Can you show the exact code you are using to include your script on the page. You're still not giving answers to my questions in any detail.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
sorry for my answers.

This is what i post on my page in the <head> section

Code: 
<script style="javascript/text" language="javascript">

var winW = 0, winH = 0;

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth-16;
  winH = window.innerHeight-16;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}
if (winW <= 1600)  {
  document.write('<link rel="stylesheet" type="text/css" href="1600.css">');
}
if (winW <= 1280)  {
  document.write('<link rel="stylesheet" type="text/css" href="1280.css">');
}
if (winW <= 1024) {
  document.write('<link rel="stylesheet" type="text/css" href="1024.css">');
}
if (winW <= 800) {
  document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
if (winW <= 640) {
  document.write('<link rel="stylesheet" type="text/css" href="640.css">');
}
// End -->
</script>
 
Upvote 0 Downvote
OK - the script tag is totally incorrect (you have "style" instead of "type", and an incorrect type at that), which explains a lot. I can't believe the site you got it from are giving away such bad code.

Unless you are really worried about people with v3 browsers visiting your site, I would change that whole script section to this:

Code: 
<script type="text/javascript">
<!--
	var winW = 1024;	// assume a default resolution of 1024x768
	if (!isNaN(screen.width)) winW = screen.width;

	if (winW <= 640) {
		document.write('<link rel="stylesheet" type="text/css" href="640.css">');
	}
	else if (winW <= 800) {
		document.write('<link rel="stylesheet" type="text/css" href="800.css">');
	}
	else if (winW <= 1024) {
		document.write('<link rel="stylesheet" type="text/css" href="1024.css">');
	}
	else if (winW <= 1280)  {
		document.write('<link rel="stylesheet" type="text/css" href="1280.css">');
	}
	else {
		document.write('<link rel="stylesheet" type="text/css" href="1600.css">');
	}
//-->
</script>

It removes the browser detection, it will work in more than just IE and NN, it assumes a default width of 1024 is the browser doesn't support the screen object, and it puts the resolution checking in the correct order (it was back-to-front the way you had it).

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
One thing - the script I've given you assumes that the link entries you had were correct for your DOCTYPE (vis-a-vis closing the tags). If they are not, you will need to change them.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Wow Dan, this does more then i would expect.

Thanks alot for your help, and again my excuses for my previous incomplete answers.

Thanks & have a great new year!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
739
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
784
JScannell
JScannell
TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
236
TheLazyPig
TheLazyPig
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
308
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top