Css And Javascript Combined For Dynamic Layout use of different CSS files at same site

[rvovk 0]

This tutorial is meant for people that are dealing with problems while coding their site at 100% of width. Important notice: Some people has JavaScript disabled, so they will not be able to load CSS file (take this in account when creating your website).

 

How this script works. In the HEAD of your HTML document will apply this command, so variable.js file will be load at start:

 

<script type="text/javascript" src="variable.js"></script>

In browser JavaScript file variable.js is loaded. This Javascript file consist of this parameters, copy this code and name it variable.js

 

// JavaScript Documentif (screen.width < 1024) {	document.write('<link rel=stylesheet type="text/css" href="layout800.css">');}if (screen.width >= 1024) {	document.write('<link rel=stylesheet type="text/css" href="layout1024.css">');}if (screen.width >= 1280) {	document.write('<link rel=stylesheet type="text/css" href="layout1280.css">');}if (screen.width >= 1600) {	document.write('<link rel=stylesheet type="text/css" href="layout600.css">');}

As we see this file has parameters for screen width, browser sees which resolution are you using and according to that proper layout CSS file is choosen.

 

layout800.css >>for resolution equal or smaller then 800px of width

layout1024.css >>for resolution equal or bigger then 1024px of width

layout1280.css >>for resolution equal or bigger then 1280px of width

layout1600.css >>for resolution equal or bigger then 1600px of width

 

Now you must write layout CSS files for every resolution where you can define bigger or smaller fonts, width and heights of columns and so, depending on resolution. Everything, html files, CSS files and javaScript file are installed in same directory on your server, or choosing your relative paths, if you defined any.

 

Working site that was made with this tutorial for dynamic CSS is: http://forums.xisto.com/no_longer_exists/

This is their new site, where I used fixed width: http://forums.xisto.com/no_longer_exists/

 

Enjoy this tutorial, suggestions welcomed.

[mayank 2]

well thanks for this nice tutorial and i would like to mention that your site is also really great....especially i loved your menu system...that is really good.i loved the photographs as well...i was not able to read what was written there as i only understand english and think that is having a diff. language.hope to see some more photographs!

[electriic ink 1]

Important notice: Some people has JavaScript disabled, so they will not be able to load CSS file (take this in account when creating your website).

These people you still need to provide for, so here's the code which you should add after the </script> tag to cater for people with javascript-disabled browsers:

<noscript>
<link href="layout1024.css" rel="stylesheet" type="text/css">
</noscript>

The 1024x768 screen setting is gonna be made the default when the next version of windows comes out so I would choose that to be the default for people who have javascript disabled but you can change that.

People who write in xhtml should put a forward slash before the closing bracket, shouldn't they?

[rvovk 0]

Mayank, yes I know, it would be nice to have this site in English, cause it is really good. I am working on this site for one year or little more now. Even though I don't get payed for it I love working on this project. Website building is hobby for me On this site you have also MP3 section, this is about Brassband from Crnomelj, Slovenia, the nicest area in SLovenia were I lived for 5 years.Cmatcmextra, thanx for making my code even better. But I believe that people are still using Windows 98 and XP is worldwide, so I guess 800px width should be standard in future. You will never be able to make universal width for everyone, but 8oopx isn't bad at all, I like this width most on 1280*1024 monitors.

[Tyssen 0]

If your site is in PHP or ASP, you wouldn't have to worry about JS being turned off. But really, that's why I do nearly all my sites for a maximum width of 800px - its too much additional work otherwise.

[rvovk 0]

Howcome is that, Tyssen, not being worried about JS being turned off?

[Saint_Michael 3]

well js is another source of chewing into bw and also it slows the load up time as well.

[Tyssen 0]

Howcome is that, Tyssen, not being worried about JS being turned off?

What I meant was that you'd do the scripting in ASP or PHP and then it would still be served whether JS was on or not.

[Adamrosso 0]

Yes your website is really nice. Your talented with CSS. Anywho, this tutorial is great. I needed this, as i did not know how to expand my layouts to be 100%. I tried tables but that failed too =(. Anywho, thanks for this great tutorial =)

[iGuest 3]

dynamic the dynamic resolution to css

Css And Javascript Combined For Dynamic Layout

 

Well I will be using only stylesheet, in that as the resolution of users laptop or pc changes the style should be changed according with resolution I mean the width ,please help me on this topic

 

-reply by bala