rvovk
Aug 5 2005, 08:06 PM
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: CODE <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.jsCODE // JavaScript Document
if (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://rvovk.computinghost.com/godba1/This is their new site, where I used fixed width: http://rvovk.trap17.com/godba/Enjoy this tutorial, suggestions welcomed.
Reply
mayank
Aug 6 2005, 04:57 AM
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!
Reply
electriic ink
Aug 6 2005, 05:10 AM
QUOTE(rvovk) 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: HTML <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?
Reply
rvovk
Aug 6 2005, 09:02 AM
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.
Reply
Tyssen
Aug 6 2005, 01:04 PM
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.
Reply
rvovk
Aug 6 2005, 01:46 PM
Howcome is that, Tyssen, not being worried about JS being turned off?
Reply
Saint_Michael
Aug 6 2005, 03:26 PM
well js is another source of chewing into bw and also it slows the load up time as well.
Reply
Tyssen
Aug 7 2005, 06:00 AM
QUOTE(rvovk @ Aug 6 2005, 11:46 PM) 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.
Reply
Adamrosso
Aug 7 2005, 08:49 PM
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 =)
Reply
iGuest
May 26 2008, 12:54 PM
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
Reply
Recent Queries:--
dynamic layout html - 1.86 hr back. (1)
-
css javascript layouts - 10.16 hr back. (1)
-
javascript layout - 1.77 hr back. (3)
-
load different css for different resolution - 21.21 hr back. (1)
-
javascript resolution track and change css - 25.08 hr back. (1)
-
javascript layouts - 1.52 hr back. (4)
-
javascript dynamically change css file included - 27.73 hr back. (1)
-
javascript dynamic layout - 40.83 hr back. (2)
-
javascript screenwidth - 41.50 hr back. (1)
-
multiply layout css codes - 42.25 hr back. (1)
-
javascript setting css files hidden - 61.39 hr back. (1)
-
css prompt javascript replacement - 70.95 hr back. (1)
-
multiply layout - 84.67 hr back. (1)
-
css dynamic sites - 98.34 hr back. (1)
Similar Topics
Keywords : css, javascript, combined, dynamic, layout, css, files, site
- Lesser Known Useful Javascript Features
(2)
Debug Exe Files
How to debug an exe file. (4) Think that we have written a program, and some codes are wrong. We can go back to compiler and
change the code, and compile again. But I will show you how to correct our mistakes without using
the compiler. Let's start: I have written a program in Delphi. Let's see my mistake. I
have created a form like this. After this I wrote the codes in the Compare Button click as
below. CODE 1. procedure TForm1.ComparebuttonClick(Sender: TObject); 2. var
3. a,b:integer; 4. begin 5. a := StrToInt(EditA.Text); 6. b :....
How To Make An Ultimate Game List.
If you're making a site on video games or such. (0) Hello. I am BuBBaG. You can call me Bubba for short. I'm going to show you how to make an
Ultimate Game List. First off, we need to make a database, we are going to call this database
`my_db`, leave out the `'s. Inside that database we will need to create a table
called `ugl'(Ultimate Game List, duh). To make the table, simply enter this in the Syntax.
CODE CREATE TABLE ugl ( System char(50), Game char(50), ) In the
above code, it is stating we are creating a table called ugl, with two columns, System, and Gam....
Make A Moderately-secure Password System Using Javascript
using file redirection to hide the password. (4) JavaScript is very handy at making forms, allowing for much more customization and easier ways to
send data. So making Login forms using JavaScript may seem to many to be a very feasable idea.
However, JavaScript is very bad at protecting Passwords, as since the passwords are not encypted and
the whole JavaScript code is in the page, a person could just view the Page Source and find out
everything. Even if you use an external JavaScript, it would still be poor as the file name for the
external JavaScript would still be revealed. But I have an answer! There is a rela....
Simple Javascript And Password System
How to protect your pages with password (6) The quickest way to get a password protection system up and running is to use a Prompt box in
JavaScript that has a title like "Enter your Email Address". Only you and the relevant users know
what the password should be, could even be one each, that can be sorted out at the next page then
pass the "input" directly through the url by changing the .href, like
http://www.iSource.net.nz/users/?leTmeIn= The page that then processes this should also check for
the referring page, and three fails from an IP if you like the php (the next page): CODE
<?php // processdo....
Download Files Off Esnips.com
even now that the download button is gone! (0) hey everyone, i am sure that many of you may have heard of esnips , which is basically online file
storage/sharing. you can now find almost any file imaginable on esnips, and in many ways it is
better than rapidshare. previously, once you are signed in to esnips, you were able to download any
esnips file via a button only viewable to members. back then, there was a method to download any
file without even signing in. then, probably due to legal issues, users were able to choose whether
or not people could download their files. the hack mentioned above, though, still....
Simple Stylesheet Tutorial
Stylesheet embedded in your site. (2) Hi - ill show you how to make a simple style sheet that will be embedded into your site. OK make
sure your site is set up already (like the standard tags) To start and end off a stylesheet you
need to do the following CODE <style type="text/css"> </stlye> Ok
lets start CODE <style type="text/css"> p { font-family: "Tahoma";
font-size: 9; color: "red"; } </style> So when you come to put in
CODE <p>Hi!</p> The text will appear red and will be in Tahom....
How To Hide Your Important Files And Folders
In Ms. Windows, Without Using Programmes. (7) Most of people share their computers with others -family, mates, buddy or whoever- and that sharing
threatens their secrets and private file to be revealed, letting some people to know things they
shouldn't know.. My Securing Way: Operation - Camouflage Use an Icon
Editor to generate a 1x1 Transparent Icon and Save it .. > 1 Open CMD.. Start >> Run or Press
WindowsLogo+R.. Lets Say you wanna hide a Folder named " secure " and it's located in
E:\folder\ so Write E: and Press Enter then Write Cd folder and Enter then At....
How To Set Up A Bookmarking System On Wii
Use your favorite social bookmarking site. (0) This is a simple tutorial on a way to set up a bookmarking system on your Wii with greater stroage
than the Favorites. It is more complicated than the Favorites and requires manual URL typing. Well
let's dive on in. Items Required Nintendo Wii Internet Channel 3 Empty Favorites Internet
Connection An account on a social bookmarking site I will be using delicious as an example.
delicious Ok, if you do not have an account, read on. If you do have an account, go to the
{account} section. Ok, first you need to register an account. This can be done by clicki....
Create A Google Seach Result Page Embed Within Your Site Page.
(12) Create a google seach result page embed within your site page. It is easier to create
web page that embeded the google search result in it. The first step is to go to google apply an
account for the google ad-sense. After that login to you account and choose the create ad-seach
option. Most of time the google search box give all we have the great and powerfull seach ability.
But, have you think every time users get seach with it. They do redirected to another page that is
not within you site. It is easier to create web page that embeded the google sea....
Php Word Filter
Have you accidently sworn on your site? Or do you want to keep visitor (7) This is pretty simple but very useful if you don't want people to swear. We will be using
str_replace for this. CODE <?php str_replace ("curseword,
"replacemet"); ?> Thats pretty simple, just fill in the curse word and the
replacement, and then repeat... heres what it would look like full size: CODE <?php
str_replace("swear", "replacement"); str_replace("swear",
"replacement"); str_replace("swear", "replacement");
str_replace("swear", "....
Create A Simple Html Editor With Php And Javascript
(3) Ok, I will teach you how to create a simple HTML editor that runs online with buttons that add HTML
tags. Before we start: You should have basic knowledge of these languages. HTML/XHTML
Javascript PHP You will need Ability to use filesystem functions. Chmodding abilities
Features of Editor Online PHP safe Full HTML support A Few Bad Features Can only create new
documents or overwrite Fairly unsafe Now we are ready to begin. The PHP Script This will be
our PHP script that we will use to make the file. Make a file called save.php Here is the....
Nice Clean Php Layout Coding.
Learn a nice neat way to code your layouts with php (7) There are basically two main ways to code your php. Method 1) Creating a php document with an html
look. The you throw in include tags all over the place. Its unorganized, and you have lots of stray
files hidden in folders and scattered in your base directory. Its difficult to organize, and you
make mistakes easily. Example: This document would be called index.php Whatever
Banner or something Some content here. Mostly along the lines of You might ask what
the problem was? Well, those include tags tend to multiply, and so do all those unne....
Faux Ajax Loading - Css Only
Pretend your site is Ajax based (3) Link: http://www.jlhaslip.trap17.com/samples/misc/ajax/index.html Check that out. The first page
has information and the second and has the actual example of its use with sample CSS code. I find
that when you visit a site which has a slow server and attempt to view 'large' Image files,
it is pretty boring to sit and stare at a blank screen, so this little snippet of code can be used
to give the visitor something to see to indicate that the image is being downloaded. I built a
small animated gif that sits in the background of the space allocated for the image....
Dynamic Signature - Yet Another Way To Do It
Create dynamic sigs for multiple users using .htaccess and RewriteRule (0) Ever since I connected a program I made in Visual Basic to MySQL database, I had an idea to create
some sort of a status page... And I did that, where I updated my connection status every 60 seconds,
updated my Winamp playlist, and several other interesting things... Then, I figured I could create
an image, and display all that info, and show it on forums, as a signature... And I made a great
PHP script, that look real fancy, and does the job perfectly... So, I was adding the reference to
http://status.galahad.trap17.com/stat.php to all the forums... BUT (there's ....
Javascript Scroll Bar
A scroll bar for your webpage using javascript (13) In this tutorial I will show you how to create two buttons in the bottom left of the screen that,
when hovered over, will scroll the page. Now to start with, we must create a our buttons, the first
line will create a div element, or block. Using blocks you can position items anywhere on a page.
We use the ID property just to let us know what the block is used for, as for the first block, its
obvious that it contains the vertical buttons and the second two blocks contains the horizontal
buttons. The style property of the div tag tells the browser how to draw it, in the....
Simple Scripts In Html And Javascript
Things like BackgroundColorChanger and so (7) like in the topic, here is a description how to change the Backgroundcolor "On The Fly", by klicking
on a button or radio-box first, we ned the html-and body-tags, create a new html-file on your
desktop and write the following: QUOTE <script language = "JAVASCRIPT">
browser interpretation: html - tag means "hey, browser, here comes HTML" in the body-tag you define
the looking of your site. you can add things like "bgcolor" for the background, "text" for the
textcolor and link / alink / hlink / vlink to define the linkcolor ( ) the scripttag i....
How To Fix Problems With Shareaza
ONLY for people to download LEGAL files with. (1) Can't run shareaza and surf the internet at the same time? There could be two
problems: Your uploads are killing your downloads and/or you are using Windows 95/98/ME. If you
are uploading constantly and havent limited the bandwidth then it is likely that you are killing
your download speed which is affecting your ability to surf the web and do other tasks. If you
are uploading lots and download speeds are suffering: Start Shareaza. Click on the Tools menu,
then click Shareaza Settings. In the box that just popped up, there is a list of men....
Flatfile User Login/signup
Uses text files only (compatable with forums and message system) (24) With this tutorial, you will learn how to create a textfile login script. This user membership
script is for use also with my forums and message system scripts. I will also give you the scripts
to make it so that people can change their profiles. Ok, The first thing we need to do is make the
database. To do this, create a blank text file called 'userdata.txt' , make sure it is ALL
LOWER-CASE. Edit this file and put
'**username|##|password|##|email|##|rank|##|userid|##|name|##|picture**'. This will not be
used, however it will give you an idea of how the....
How To: Make A Simple Php Site
Making one file show up on all pages using php (21) I have looked all over the site and could not find anything that was like this simple, or just like
this at all.. For some people i know that you are using a basic HTML site...and having a big menu
if you want to add somthing you have to go into every one of the pages and add or remove or edit
what you want to do, but with somthing verry simple all you would have to do is edit one file, and
all of the pages that have the PHP script on them would suddenly change to what that one file is.
So to start off if you are planning on using this little tirck, the page that you a....
Delete Files And Directories Using Php
following up from creating and writing (7) How To Delete Files and Directories follow up from creating them Hello all and
welcome to my second tutorial involving file management. In my previous tutorial , I explained how
to create, write and read files. In this tutorial I'll explain how to remove the files and
directories you took so long to create. I did not explain last time how to create directories as I
did not know, now I do, you can use the mkdir() function. Now with this tutorial.... Removing
Files Removing files can easily be done with the unlink() function: CODE <? un....
Phpbb Forum Site Transfer
How to do it, step by step instructions (20) I'm sure many of you out there have used phpBB at some point. To those who enjoy running forums
and online communities, specifically supporting phpBB, I am about to tell everyone how to restore
the forums database from one website, to another. This is presuming you do not have any mods or
hacks installed. Some of you may find this information useful. Here is the scenario: Let's say
you have forums running phpBB version 2.0.17 (currently the latest one). You have decided that you
want to move your forums to a whole new URL and provider, and as an added bonus, ch....
How To Read And Write Files Using Php
php :: reading and writing files (20) How To Read And Write And Files a simple trick using php For this script all you need is a
php enabled server, a text document and a basic understanding of php itself: Beginning Create a
text file called name.txt in any directory. Change the file permissions to 777 Create a empty
php file in the same directory. You are now ready to begin reading and writing your files. If you
just want to read the file scroll straight down to Reading the File else read through the whole
tut /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' /> ....
How To Make A Very Simple Wap Site
A quick tutorial about WML language (40) WAP Site Tutorial : How to Make A Wap site? Before We begin.. Defination from the
Web about Wap. QUOTE WAP is an open international standard for applications that use
wireless communication . Its principal application is to enable access to the Internet from a
mobile phone or PDA .A WAP browser provides all of the basic services of a computer based web
browser but simplified to operate within the restrictions of a mobile phone. WAP is now the
protocol used for the majority of the world's mobile internet sites, known as WAP sites ....
Image Preloader With Progress Bar Status
Pure Client-Side JavaScript tested in 4 Browsers! (22) Tutorial: Image Preloader with Progress Bar, by Rob J. Secord, B.Sc. (SystemWisdom)
Description : A Tutorial for a Client-Side Image Preloader with Dynamic Real-Time Progress Bar
Indicator written in JavaScript! Tested to work with 4 Major Internet Browsers: Firefox, MSIE,
Netscape, Opera (Complete sample solution provided at end of tutorial, just put it on your
web-server, add your images and go!) Intended Audience : Beginner to Intermediate Web
Developers. Although this tutorial will cover some advanced aspects of JavaScript, I will try to
explain....
Checking The Web Site Speed
(10) Did you taking too much time to access your favorite sites? Probably the problem is on the server
used by those sites. To make sure that is the problem, use Windows PING facility. Ping is a small
program, which sends a 32-bit signal to the Web site server. Next, Ping record the time needed by
the server to answer it. To activate Ping: Click on the Start-Run menus, type command, and then
click OK. Type PING "site name" in the MS-DOS prompt window, for example PING www.yahoo.com. In a
moment, the result will appear on the screen. A result less than 300ms is normal spee....
How To Put A Phpbb Login Box On Your Main Site.
Code and .php included!!! (18) I have included my coded file with this... Ok here is the code. CODE // //Create login area,
replace the phpBB2 in /phpBB2/login.php with your forum's //directory // <form
action="/phpBB2/login.php" method="post" target="_top"> <table
width="25%" cellspacing="2" cellpadding="2" border="0"
align="center"> <tr> <td align="left"
class="nav"><a href="/phpBB2/index.php" class="nav">Prank Place
Forum Index</a></td>....
Changing A Dynamic Ip
How to change your dynamic IP. (18) In this tutorial I will tell you how to change a dynamic IP if you have Windows XP. First of all go
to - Start >> Run - and type 'cmd'. A window with a black background and grey text. In
this window type 'ipconfig' and text should come up saying: IP Address ............. *IP
HERE* Subnet Mask ................ *SUBNET MASK HERE* Default Gateway .......... *DEFAULT GATEWAY*
Write this down on a bit of paper on in notepad. You will need them later. Now type
'ipconfig/release' - this will terminate your internet connection - but don't g....
Php Quiz Script
Make quizzes for your site. (20) Hello all, A little bit back I decided to make a quiz scriptjust out of no where lol. However it
doesnt do anything special but I am going to make an email mod for it so that it will email results
to your email address. So here is the basis of it. INSTRUCTIONS: Open a new page in your text
editor and paste in the following code. CODE <?php $qid = "Quiz ID-00"; ?>
<html> <head> <title><? echo "Gamers Pub $qid";
?></title> </head> <body> <p><h3><? echo "....
Php Emailer/contact System
An email or contact system for your site (20) Hello all, Here is an easy Emailer or Contact system that allows visitors or members of your site
to email you just by filling out a form. So here is what you need to do to set it up. First open up
a new page in your text editor and paste in the following code. CODE <?php $Name =
$_POST['Name']; $Subject = $_POST['Subject'];
$Email = $_POST['Email']; $Site =
$_POST['Site']; $Message=$_POST['Message'];
$align = $_POST[&#....
Looking for css, javascript, combined, dynamic, layout, css, files, site
|
|
Searching Video's for css, javascript, combined, dynamic, layout, css, files, site
|
advertisement
|
|
