Jump to content
xisto Community
Sign in to follow this  
rvovk

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 :D 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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 =)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.