You are not logged in! If you have not registered yet then click here to join the community!

TOLRA Community Forums


Go Back   TOLRA Community Forums > Web Development > JavaScript

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 06-11-2011, 11:40 PM
clicken clicken is offline
Junior Member
 
Join Date: Nov 2011
Posts: 2
Screen.width Stylesheet - scripts don't work

I was looking for the info at this link
forums. tolranet.com/f-web-design-15/t-selecting-style-sheet-based-screen-width-33.html
it was in a 2007 post at WebProWorld in this thread webproworld. com/webmaster-forum/threads/60782-Fixed-or-Variable-Width-Layouts - but the page the tolranet link targets is blank. (?)

So,
I am having trouble getting a working script, for a screen.width stylesheet.

I have tried four different scripts so far and they either do nothing or all css style disappears or the alignment on a form gets messed up (which is odd considering that the only change for testing the script is a change in font color). :sigh: I have tried with the scripts in the <head> and then the <body> and then as an external .js file.

The site is a CMS site, if that should matter or not.
It is using a strict DOCTYPE, so if I remember correctly the script needs to be in an external file. Confirm?


Can someone recommend a script? it can't use "alternate stylesheet" because IE doesn't support it.
Reply With Quote
Sponsored Links
  #2  
Old 09-11-2011, 01:52 PM
Paul's Avatar
Paul Paul is offline
Moderator
 
Join Date: May 2006
Location: UK
Posts: 568
Blog Entries: 3
Hi clicken,

The post is now at http://forums.tolranet.com/showthread.php?t=33 the forum used to use a SEO mod but it was more trouble than it was worth.

It should still work.
Reply With Quote
  #3  
Old 11-11-2011, 06:16 AM
clicken clicken is offline
Junior Member
 
Join Date: Nov 2011
Posts: 2
Thanks Paul,

As I was searching for a solution for the scripts not working in IE, I came across a thread where it was suggested to try switching to compatibility mode.

After switching, the code worked however my menu drop down wouldn’t work. So I switched back out of the compatibility mode.

The strange thing is that after switching back the code was still working. I don’t understand it and guess it doesn’t matter why; the important thing is that I was able to move forward. I only mention it here incase others find it helpful.

The following code works and the good thing about it is that the document.write is only written once rather than for each resolution.

Code:
<script type="text/javascript">

var css = "";

if (screen.width <= 800) css='style1.css';

else if ((screen.width >= 801) && (screen.width <= 1279)) css='style2.css';

else css='style3.css';
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />");


</script>
Reply With Quote
Reply

Bookmarks

Tags
screenwidth, scripts, stylesheet, work

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:10 AM.