/    Sign up×
Community /Pin to ProfileBookmark

OnLoad Stylesheet Switching?

Copy linkTweet thisAlerts:
May 08.2007

Hi.. I’m new to these forums so please be gentle ?
I’ve been given the task of creating a Ecommerce site for a new London based clothing distributor.. and I’m basically trying to build this myself from the ground up.

Basically I want this site I’m producing to use a different stylesheet depending upon the users resolution, I am trying to use JavaScript to detect the user’s resolution.

At present I have tried a few different methods including a Javascript redirect to specific pages, however this would mean a different html page for each resolution.. which would be a messy way of working.
So I figure that having multiple stylesheets configured to specific resolutions would be the way to go.

I am aware that you can assign an “onclick” event to switch to a different stylesheet.. but is there a way of doing this automatically uopn loading?

I have viewed many websites and posts across forums regarding this.. but my Javascript knowledge is very low.. could someone explain how to do this?
I’m not asking for the answer.. but the method required.

Thanks for your time,

Ray

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JUDMay 08.2007 — Name your stylesheets [B]"800_600.css", "1024_768.css"[/B] etc. and then do something like this:

[code=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
// <![CDATA[
var w = screen.width;
var h = screen.height;

<!-- <link rel="stylesheet" href="stylesheets/800_600.css" media="screen" /> // -->
document.writeln('<link rel="stylesheet" href="stylesheets/' + w + '_' + h + '.css" media="screen" />');
// ]]>
</script>
</head>

<body>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@Chandler_90authorMay 08.2007 — Excellent!

So this therefore instructs the JavaScript to actually write the stylesheet title dependent upon width and height values.

I had thought about how I was going to get JavaScript to select automatically.. Never thought about coding it to actually write the filename.

I'll give this a shot soon and report back.

Thanks for your time!
Copy linkTweet thisAlerts:
@gainoverMay 08.2007 — [code=php]
<link rel="stylesheet" type="text/css" href="style1.css">

<script>
//check browser
function isIE(){var Ka=navigator.userAgent.toLowerCase();var rt=Ka.indexOf("opera")!=-1;
var r=Ka.indexOf("msie")!=-1&&(document.all&&!rt);return r;}

function changePageStyle(url){var mycss;
if(isIE()){mycss=document.styleSheets[0];mycss.href=url;}
else{mycss=document.getElementsByTagName("link")[0];mycss.setAttribute("href",url);}
}
</script>
<!-....->
<body>
<input type="button" value="change the style of site" onclick="changePageStyle('style2.css');"/>
[/code]

I have run this script success in IE and FF and I hope it's your need !

My English is bad ,so I can't express what I want to say !
Copy linkTweet thisAlerts:
@Chandler_90authorMay 08.2007 — 

I have run this script success in IE and FF and I hope it's your need !

My English is bad ,so I can't express what I want to say ![/QUOTE]

Gainover,&#24863;&#35613;&#20320;&#30340;&#24544;&#21578;. &#36889;&#26159;&#38750;&#24120;&#26377;&#29992;&#30340;. &#24076;&#26395;&#20320;&#20497;&#26159;&#20013;&#22283;&#20154;&#25110;&#25105;&#21487;&#33021;&#35258;&#24471;&#20687;&#30333;&#30196;!

&#25105;&#32232;&#30908;&#30340;ASP&#30340;&#36889;&#20491;&#32178;&#31449;.. &#20294;&#25105;&#26371;&#36889;&#20491;&#30446;&#37636;&#20379;&#26085;&#24460;&#20351;&#29992;,&#22914;&#26524;&#25105;&#20351;&#29992;PHP&#30340;&#26410;&#20358;!

jud&#30340;&#26041;&#27861;&#20855;&#26377;&#24456;&#22823;&#30340;&#21162;&#21147;.. &#25105;&#24456;&#24863;&#35613;&#20320;&#30340;&#25237;&#20837;!

JUD's method has worked great.. and I am thankful for all your inputs!

I'll keep you guys up to date on how I progress with the site.. I have done college projects on this sort of stuff.. but have not actually built a commecial site yet!

Wish me luck.. thanks again!

Ray
Copy linkTweet thisAlerts:
@gainoverMay 08.2007 — ? ? I can know what you have written in English , I just trouble in translating chinese to English!? ? ?
Copy linkTweet thisAlerts:
@Chandler_90authorMay 08.2007 — :D :D I can know what you have written in English , I just trouble in translating chinese to English!:D :D :D[/QUOTE]

Ah.. ok ?

Thanks again tho!
×

Success!

Help @Chandler_90 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...