Archive for the ‘Tech’ Category

So you’ve designed your perfect homepage. The only problem is that it doesn’t fit on anyone’s screen but yours. Suddenly you are finding you have to redesign your site so it is more accessable to everyone and your amazing designs and idea’s are laid to waste.

When first building your website you need to decide how wide your going to make it. If its just formatted text going across the screen then you are ok, but for most of us, we need to set a width for our tables and layers which is bound to cause problems somewhere along the line.

100% width

The easier way to make a site fit is to set the width to 100%. It will stretch across any screen so no problems you say. However its not as simple. Designing a site with 100% width is not always that easy as you have to make sure everything will squash down – no point using 100% width if your images won’t let it go down futher than 900 pixels.

You still really need to pick a width as any images and menu’s that make your site wide will set the width for you. People on 640 X 480 screens with browsers in shrunk mode would probably like your site to squash down to about 400 pixels. Test if your site will do that (though don’t worry if it won’t).

100% width works good for sites such as Microsoft.com and Worfolk.biz who have a lot of product information and so use text with can go across the screen and still squash down easily.

700 pixels width

This is the site I use for most of my sites. I use it because I can fit a banner into it and still have room for a 200 pixels wide logo next to it. The only problem with doing this is that its slightly too big for people with 640 X 480 screens and slightly too small for 800 X 600 screens. I consider it a nice balance though.

A lot of sites go for a 800 pixels wide screen so that it wil fit on a 800 X 600 screen now as people using 640 X 480 are become rarer quickly – I’ve been using 1024 X 780 for years now. Ever Yahoo is now to big to fix on a 640 X 480 and has been for a while too.

A fixed width site works well for sites which have content in the right place, all neat and correctly laid out in sections such as Msn.com or Mworld.us.

Other options

MSN use javascript to show hide layers. If you read Java Junky (MXL Magazine column) then you will know what this is about. Bascially if the browsers screen is big enough, they add extra information dowen the left column – Full screen your browser on one of the channels and then shrink it to a fairly small size. Some content should disappear (probably the channels menu) from the right hand side.

They also have a script on their homepage so that it rearrages the content for people with 640 X 480 screens so it fits on them while using up the space nicely on a 800 X 640 screen.

Conclusion

If you site isn’t almost all text then go for a set width such as 700 or 800. If you don’t have any menu bars or extra content down the side then you might even want to go for 600 pixels like Worfolk Online uses (or used to use depending on whether it has changed since I wrote this). Test it out on different screen sizes and see what looks good. Check out what the competition does. When you’ve found something you like – stick with it.

JavaScript allows you to adding programming functions to your web pages. Browsers will read the HTML and interpret the JavaScript. JavaScript can also produce dynamic effects using variables. JavaScript can also react to events, write HTML code and validate data.

The key parts of JavaScript are functions and events. Functions are mini scripts that can be executed by an event such as a timer or a user clicking on a link. Take a look at this basic script that brings up a gray dialog box saying ‘Yay! javaScript Rules!’

<script language="JavaScript">
<!--

function yay() {
alert('Yay! JavaScript rules!');
}

// -->
</script>

The java is in a standard script tag (which you will read about next) and also has comment tags around it. This hides the script from old browsers who don’t understand JavaScript.

In this tutorial I’m going to show you how to create a pop up window using java script. There are many tools to do this but most of them create pop up windows that open when a page loads. These are fine for pop up ads but what do you do when you want to open up a pop up window when a user clicks a link? This tutorial will show you how to write a function to do this.

This will be a function and it will be embedded in a standard java script tag.

<script LANGUAGE="JavaScript">
</script>

Now before we start lets look at the whole source code, then I will explain it all

function launch(){
jim=window.open("http://www.hardwaretutorials.com/","Hardware Tutorials","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")}

Thats the function in full. Lets start at the beginning. The variable name is ‘Jim.’ Inside the window.open part there are all the configurable components of the pop up window. Lets start with the address. In our example I used http://www.microsoft.com but you could relace this with ‘www.yoursite.com’ or ‘information/popuppage.htm’.

The name for the window (the name that will appear before the title appears) for my example is Microsoft. Now is the window settings. You can set the width and the height as well as the top and left margin. You can also choose whether the window is resizable, scrollbars, a menu bar, a tool bar, a status bar and a location bar.

Once you have configured these just put them in a standard tag, in either the body or head tag.

<script LANGUAGE="JavaScript">
function launch(){
jim=window.open("http://www.microsoft.com","microsoft","width=400,height=300,top=0,left=0,resizable=no,
scrollbars=yes,menubar=no,toolbar=no,status=no,location=no")} 
</script>

Thats the full code. Now all you need to do is create a link ‘javascript:launch().’ If you want to change the java script to ‘function whatever()’ instead of function launch(). You must do this if you have more than one pop up scripts on one page as you will need each hyperlink to activate a different pop up script.

This will show you how to make a password page. This should never be used for anything! Ever! It’s purely just to show you how it could be done. But it is literally less lecture than leaving your front door wide open.

In you you put in your password and if it is correct you go the another page. If you are incorrect you go to a wrong password page. Take a look at the script.

<script language="JavaScript">
function passwordOK(anystring) {
anystring = anystring.toUpperCase()

if (anystring == "GREEN" || anystring == "BLUE" || anystring
== "RED" || anystring == "YELLOW") {
/*Add more passwords if you'd like, but ALL PASSWORDS MUST BE IN CAPS!*/
alert('You got it right!')
alert('Now taking you to the hidden page.')
location="page2.htm"
//Change page2.htm to your hidden page
}


else {
alert ("Please enter the CORRECT password next time.")
location="wrongpage.htm"
/*substitute your own wrong page for wrongpage.htm*/
}
}
</script>
<form>
Password:
<input type="password" name="pass" Size="20" onChange="passwordOK(this.value)" />
</form>

As you can see the input box triggers the javascript function ‘passwordOK.’ Below the function name, in the next paragraph and what to do if the password is correct. Below that is the alert if the password is incorrect. Have a play around with the script and see what you can do. The whole thing can be copied in the body tag of your page.