homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Different CSS files for different detected screen width
javascript help needed!

 5:38 pm on Sep 24, 2007 (gmt 0)


As suggested in this thread [webmasterworld.com...] , I would like to use Javascript to detect the browser width and use alternative css properties for certain elements on smaller screens.

I am very much a beginner when it comes to javascript and would appreciate any help that can be leant in helping me to achieve what I want.




 5:30 pm on Sep 25, 2007 (gmt 0)

I have found this code:

if (screen.width < 1024)
link = document.getElementsByTagName("link")[0];
link.href = "size800.css";

Is there a better way to do it?


 5:51 pm on Sep 25, 2007 (gmt 0)

As I say I'm a javascript noob, so it took me a while but it was very easy in the end.. i found that:

if (screen.width < 800)
document.write('<'+'link rel="stylesheet" href="http://www.domainname.com/css/smallscreen.css" />');

works well. It goes after the proper stylesheets in the head.

The smallscreen.css just has a few styles defined that overwrite the main ones, and I have a <noscript> section that also loads smallscreen.css, for those without javascript.

I'd be keen to hear if anyone knows how to do it better though.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved