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.
Comment/Reply (w/o sign-up)
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!
Comment/Reply (w/o sign-up)
cmatcmextra
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?
Comment/Reply (w/o sign-up)
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.
Comment/Reply (w/o sign-up)
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.
Comment/Reply (w/o sign-up)
rvovk
Aug 6 2005, 01:46 PM
Howcome is that, Tyssen, not being worried about JS being turned off?
Comment/Reply (w/o sign-up)
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.
Comment/Reply (w/o sign-up)
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.
Comment/Reply (w/o sign-up)
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 =)
Comment/Reply (w/o sign-up)
FeedBacker
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
Comment/Reply (w/o sign-up)
Similar Topics
Keywords : css, javascript, combined, dynamic, layout, css, files, site
- Deny Or Grant Users Access To Files Of Choice (vista)
Uses Bat Files To Deny Or Grant People Access To Files (3)
[aef] Most Recent Topics Listing Mod
on your Web-site pages (2) Assuming that you have an AEF Forum software installed on your Hosting Account, and that you need
to display a list of the most Recent Topics to be display, say, on your Index page, then read this
Tutorial. To begin, Define the variables that you need to connect to the Database and also define
the URL to the Forum in the prescribed format as follows: CODE //define db information here
DEFINE ('DB_USER', ' '); // required info DEFINE ('DB_PASSWORD',
' '); // required info DEFINE ('DB_HOST', 'localhost'); // required....
How To Create Pdf Files Using Free Tool
Introduction to use a free tool to create PDF file (10) Now, that you don't need to have expensive software like Acrobat to create PDF. All you need is
Microsoft Office and a software name doPDF. You can download the freeware from
http://www.dopdf.com/download.php After downloading dopdf.exe, follow the instruction below 1.
Double click to install it, as display at image 1.jpg, choose a language and click OK 2. You will
see 2.jpg click next 3. Click I accept the agreement see 3.jpg, click next 4. Now you will see
4.jpg, select the folder to install it and click next 5. When seeing 5.jpg, This is the folder group
in Star....
Create Dynamic Html/php Pages Using Simple Vb.net Code
Taking your application data, and creating a webpage for others to vie (1) This example will show you how use a string in VB to create PHP code. In order to do this, you need
a string to store your PHP page and a function that I will list at the bottom of the page for you to
put in a module. This code is written in VB.NET Public Sub CreatePage(ByVal HTMLTitle As
String, ByVal HTMLText As String, ByVal HTMLFileName As String) Dim strFile As String '
---------------------- ' -- Prepare String -- ' ---------------------- strFile = "" '
-------------------- ' -- Write Starter -- ' -------------------- strFile = " " ....
Clearing Your Ie Tif
Clear your Temporary Internet Files on IE (0) -Welcome to: Clearing your Internet Explorer Temporary Internet Files Tutorial-!
Attention!: As some of the members on here may know, it is possible to clear your Internet Explorer
Temporary Files. I have searched this entire Tutorials subforum to find a topic already made, and I
have found nothing. This tutorial I did NOT find this on Google, or any other search engine. I
always find this out for myself. Lets start: Ok, first we open up Internet Explorer, then we
click "Tools"...then we click on "Internet Options...". On the Main page "General" we l....
How To Download Any Flv Files From Any Sites
(7) Now you can download any flv files from any websites!! People often know how to download youtubes
clip, but not from other sites. In this tutorial you will need a tool name Moyea FLV Downloader, it
is free and you can download it at http://www.flvsoft.com/download_flv/ This is the best tool i
have meet up with to download flv files in any site. Since it can detect flv files, and list it, you
can download it as you want, so no more favourite clips goes away from your sight and now you have
it on your own hard drive! 1. Run moyea flv downloader see 1.jpg 2. At the left....
Lesser Known Useful Javascript Features
(2) Variables Javascript assigns every variable a type which changes as we assign different
values to the variable. We can get the type of a variable using the ' typeof ' operator.
For eg., CODE var hello = "Welcome to Trap17"; var year = 2008; alert(typeof hello );
alert(typeof year ); The above lines will output the type of the first variable 'hello'
as String and the second variable 'year' as Number . The types of Javascript variables
are Boolean, Function, Number, Object and String . A variable with no explicitly assigned v....
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 := StrToInt(EditB.Text); 7. 8. ....
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 Game. Next, we will need to make a form,
t....
Make A Moderately-secure Password System Using Javascript
using file redirection to hide the password. (11) 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 relative....
Simple Javascript And Password System
How to protect your pages with password (10) 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 //
processdownloads.p....
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 Ok lets start CODE p { font-family: "Tahoma";
font-size: 9; color: "red"; } So when you come to put in CODE Hi! The text will
appear red and will be in Tahoma. I will now just show you how to change the background colour of
the text. CODE span.hilightred {background-color: "red";} span.hilightblue {backgrou....
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 Attrib +s +h....
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 (9) This is pretty simple but very useful if you don't want people to swear. We will be using
str_replace for this. CODE 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 str_replace("swear", "replacement"); str_replace("swear", "replacement");
str_replace("swear", "replacement"); str_replace("swear", "replacement"); ?> Ok, but how do you
get it to work on your page now? Well, save that file as wordfilter.php and use CODE ....
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 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 is the tag, we'll need now (sorr....
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....
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 (11) 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 unlink("....
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 (21) 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 (43) 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 ....
How To: Change An Image When A User Clicks On It
using both php and javascript (12) How To: Change An Image When A User Clicks On It using both php and javascript - a powerful
combination I have seen quite a few how tos offering a method of doing this but none of which
resembled my method of making use of both php and javascript. This code is fairly repetitive and
most of the functions are easy to pick-up if you haven't heard of them before. Here it is...
Create your two images. Call them anything you like, you'd just need to change their filenames
in $imgano $imgayes. In fact with this script you can easily create more than one pair....
Image Preloader With Progress Bar Status
Pure Client-Side JavaScript tested in 4 Browsers! (28) 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 it all ....
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!!! (19) 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 // Prank Place
Forum Index Please enter your username and password to log in.
Username: Password:
Log me on automatically each visit:
I forgot my password You can test this out on my....
Changing A Dynamic Ip
How to change your dynamic IP. (22) 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. (29) 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 $qid = "Quiz ID-00"; ?>
Username: 1.) Question number one is? Answer1 Answer2 2.) Question number two is?
Answer1 Answer2 3.) Question number three is? Answer1 Answer2 4.) Question num....
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 $Name = $_POST ; $Subject
= $_POST ; $Email = $_POST ; $Site = $_POST ; $Message=$_POST ; $align = $_POST ; $to = "$EmailTo";
$subject = "$Subject"; $body = "$Message\n\n\n$Site\nBy: $Name"; $headers = "From: $Email\n";
mail($to,$subject,$body,$headers); // After they've clicked "Send", this is whe....
Looking for css, javascript, combined, dynamic, layout, css, files, site
|
Searching Video's for css, javascript, combined, dynamic, layout, css, files, site
See Also,
|
advertisement
|
|
