Archive for the ‘XHTML’ Category

Advance Vista Styled CSS Menu

9

Mar
26

 

After seeing an amazing design tutorial on PSDTUTS for a Vista Style menu design a decided to give it ago and turn their design into reality.  Well I’ve built it and it looks pretty good (see the css vista menu demo) so I thought I would share how I did it with the world.

Advanced CSS Menu

step one

Create a PSD of the menu as details in the PSDTUTS article linked above.

step two

Cut out the images required for the menu design and save them to an images folder at the root of your site.  The required images are as follows:

  • A one pixel wide image of the background of the menu. (nav-bg.gif)
  • A one pixel wide image of the divider (bar) that splits each nav item. (nav-bar.gif)
  • An active state image with the blue glow. Notice this image also has a divider (bar) on the left hand side of this image. This will be important for later on in this tutorial. (active.gif)

CSS Vista Menu

step three

Build the HTML structure:

<div id="main-nav">
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
    <div class="clear-both">&nbsp;</div>
</div>

As you can see above the structure is a simple unordered list of the desired navigation items, contained within a div named "main-nav".

HTML wise that is it really.  Just drop this in to the body of the site.

step four

Now we need to style the menu using the images we previously cut out as detailed below:

body{
    font-family:Arial, Helvetica, sans-serif;
    font-size:75%;
}

#main-nav{
    height:29px;
    float:left;
    background-image:url(../images/nav-bg.gif);
    background-repeat:repeat-x;
    background-position:top left;
    width:100%;
}

The code above sets the default font and font size for the body of the document.  You can use whatever font you desire here or if you only want to apply these font styles to the menu add the font styling to the "#main-nav" style.

The "#main-nav" style sets the height/width of the menu whilst also applying the navigation background to the container.

#main-nav ul,
#main-nav li{
    padding:0px;
    margin:0px;
    list-style-type:none;
}

Next we need to remove the default padding/margin and bullets applied to unordered lists.

#main-nav ul{
    height:29px;
    line-height:29px;
    background-image:url(../images/nav-bar.gif);
    background-position:right;
    background-repeat:no-repeat;
    float:left;
    padding:0px 1px 0px 0px;
    margin:0px 0px 0px 10px;
}

Now we set the height of the ul tag to match the height applied to the "#-main-nav" container whilst also applying the nav divider (bar) image as the background of the ul, positioning it to the right hand side.  Finally we float the ul left which gives a cross browse effect of width auto and pad the right hand side by 1px (This will allow room for the nav divider to show).

#main-nav li{
    height:29px;
    line-height:29px;
    display:inline;
    position:relative;
    float:left;
    width:80px;
    text-align:center;
}

Next we set the height and width of the li tag and float it left forcing each li tag to sit inline with each other.  In this example the width is fixed to 80px but this is very much up to you and your design.   A line-height si also set to equal the applied height forcing the text to vertically align to the middle.

#main-nav li a{
    height:29px;
    width:80px;
    text-align:center;
    float:left;
    background-image:url(../images/nav-bar.gif);
    background-position:left;
    background-repeat:no-repeat;
}

Now we need to style the "a" tag itself.  Again it has been given the same width and height as the li tag and floated left.  This makes sure the whole navigation item is clickable as well as to remove unwanted margins in IE 6.  Next the nav divider (bar) image is added to each "a" tag to complete the dividing pipes look.

#main-nav li a:link,
#main-nav li a:visited{
    color:#FFFFFF;
    text-decoration:none;
}

#main-nav li.active a,
#main-nav li a:hover{
    background-image:url(../images/active.gif);
    background-repeat:no-repeat;
    background-position:left;
}

Finally we need to add the link styling and active/hover states.  The text colour is set to white and link underline removed for all "a" tags and we apply the active image to the active class and "a" tag hover state.

Now all you need to do is check it out in your browser.  Enjoy..

demo

Check out the CSS Vista Menu Demo for yourself.

download

Download the CSS Vista Menu.

Simple 3D JavaScript Engine

2

Nov
06

Carrying on from the theme of developing 3d effects in JavaScript I decided to keep researching flash examples and tutorials, trying to recode them into JavaScript. I was then pointed to another really handy website that has some superb flash examples.

Kirupa had one demo in particular that I wanted to see if I could emulate called Scripting 3D in Flash. This example showed how to create a camera movement in flash giving a feeling of perspective.

Having looked at the code I decided this was most definitely possible in JavaScript and here’s what I came up with…

code

HTML

The HTML as seen below is pretty simplistic.  Firstly we have a sceneContainer that wraps the whole 3D Engine, then we have a scene3D container which acts very much as a view for the the engine as will be described below and finally we have the individual images within the scene, each with an id allowing individual styling.

<div id="sceneContainer">
    <div id="scene3d">
        <img src="director.png" id="joe" />
        <img src="director.png" id="joe2" />
        <img src="director.png" id="joe3" />
        <img src="director.png" id="joe4" />
        <img src="director.png" id="joe5" />
        <img src="director.png" id="joe6" />
        <img src="director.png" id="joe7" />
        <img src="director.png" id="joe8" />
    </div>
</div>

CSS

The CSS details simple styling for the engine.  Points to note are as follows:

  • sceneContainer has a fixed width/height and an overflow of hidden.  This allows us to mask the images as they move back and forth in perspective.
  • Next we have the scene3D positioned absolutely with a width of 100% of it’s container (sceneContainer).  This allows for easy resizing and positioning of the container within the sceneContainer.
  • Finally we have styles for each individual image within the containers.  This allows us to position all the images within the scene3d container.
#sceneContainer{
    border:1px solid #CCCCCC;
    position:absolute;
    width:800px;
    height:500px;
    overflow:hidden;
}

#scene3d{
    position:absolute;
    left:0%;
    width:100%;
}

#joe{
    position:absolute;
    left:0px;
}

#joe2{
    position:absolute;
    right:0px;
}

#joe3{
    position:absolute;
    left:25%;
}

#joe4{
    position:absolute;
    right:25%;
}

#joe5{
    position:absolute;
    left:50%;
}

#joe6{
    position:absolute;
    right:50%;
}

#joe7{
    position:absolute;
    left:75%;
}

#joe8{
    position:absolute;
    right:75%;
}

JavaScript

Lastly we have the JavaScript.  This is strongly based on the kirupa example and works by looping through the images included in the scene and scaling them based on the variables set in the movie.  To achieve the effect of the images zooming in and out we also have to scale and reposition the scene3D container at the same time hiding the overflow within the sceneContainer.

Have a play about with the variables to get to grips with how they control the effect and more over, have fun!

var sceneContainer = document.getElementById(‘sceneContainer’);
var scene3d = document.getElementById(‘scene3d’);

x = 0;
y = 100;
z = 300;

cameraView = new Object();
cameraView.x = 0;
cameraView.y = 0;
cameraView.z = 500;

focalLength = 300;

dir = -1;
speed = 20;

backAndForth = function(){
    cameraView.z += speed*dir;
    if (cameraView.z > 500){
        cameraView.z = 500;
        dir = -1;
    }else if (cameraView.z < 0){
        cameraView.z = 0;
        dir = 1;
    }
    
    var sprites = scene3d.getElementsByTagName(‘img’);
    var spritesLength = sprites.length;
    
    var scaleRatio = focalLength/(focalLength + z – cameraView.z);
    
    for( var i = 0; i < spritesLength; i++ ){
        var sprite = sprites[i];
        
        sprite.style.top = ((y – cameraView.y) * scaleRatio)+’px’;
        sprite.style.width = sprite.style.height = (100 * scaleRatio)+’px’;
        scene3d.style.width = (100 * scaleRatio)+’%';
        scene3d.style.left = ’50%’;
        scene3d.style.marginLeft = ‘-’+(100 * scaleRatio)/2+’%';
    }
    
    
    
};
setInterval(‘backAndForth()’, 30);

demo

Have a look at the Simple 3D JavaScript Engine Demo.

download

Feel free to download the Simple 3D JavaScript Engine Code.

Simple 3D Carousel using Mootools

33

Oct
31

After researching a good method to create a 3D Carousel I came across two resources that intrigued me; firstly GOTOANDLEARN.com which provided an amazing flash 3D Carousel tutorial and then the jQuery 3D Carousel.

3D Carousel

After having a play about with these two examples for a while it got me in to thinking, “how easy it would it be to implement a 3D Carousel myself?“

Well after carrying out some research and using the two above examples as a foundation I created a basic 3D Carousel. This example will be the first instalment in which I demonstrate the basic Carousel and further more advanced tutorials will be added at a later date.

So here we go…

code

html

As can be seen below the HTML is very simple and consists of a main container wrapping several divs with images inside.  That is all that is required at this stage from an html perspective.  Obviously the number of images and the images themselves can be changed here.

<div id="carousel">
    <div><a href="#"><img src="images/dreamweaver.png" /></a></div>
    
    <div><a href="#"><img src="images/director.png" /></a></div>
    
    <div><a href="#"><img src="images/flash.png" /></a></div>
    
    <div><a href="#"><img src="images/freehand.png" /></a></div>
    
    <div><a href="#"><img src="images/swf-player.png" /></a></div>
    
    <div><a href="#"><img src="images/coldfusion.png" /></a></div>
</div>

css

The CSS is also very  simple setting the style attributes for the main container as well as the images width and height within each of their containing divs.  One point to note would be that the width and height of the carousel container should be edited as desired to meet your needs althoug further editing will be needed below as shown.

<style>

    #carousel{
        background-color:#000000;
        width:700px;
        height:400px;
        position:relative;
        border:1px solid #FFFFFF;
    }
    
    img{
        width:100%;
        height:100%;
        border:0px solid #FFFFFF;
    }
    
</style>

JavaScript Variables

This is where understanding is required to set up the carousel. baseSpeed is the initial speed of the carousel, the higher the value the faster it will spin, radiusX and radiusY are the horizontal and vertical radiuses of the carousel so adjust these to effectively change the width and height.

centerX and centerY pinpoint the center of the accordion with in the main container. These will need to be amended if the main containers width and height attributes are amended.

Finally speed is used in conjunction with baseSpeed to set the initial speed of the carousel, although, the speed will be altered depending on the position x of the mouse over the carousel container.

var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;

demo

Have a look for yourself at the Simple 3D Carousel demo.

download

Feel free to download the Simple 3D Carousel.

notes

This is a very basic demo and as such should not be treated as a finished product.  I’m using this article as more of a tutorial to create clear stages between the version above and a far more advanced version that I will release in the not to distant future.

I’m still looking to further improve the smoothness of the carousel and new features such as automatic image reflection and arrows to manually rotate the carousel will be added in future versions.

mootools modules

Core

  • Core

Class

  • Class

Native

  • Array
  • String
  • Function
  • Number
  • Element

Element

  • Element.Event

Window

  • Window.DomReady

YAML a HTML/CSS Template Builder

8

Oct
04

I was recently pointed in the direction of a very cool online app called YAML ("Yet Another Multicolumn Layout") Builder. It’s an online HTML template builder and I have to say it looks pretty good.

Now as I am working on a template builder myself I thought a good place to start would be by reviewing the YAML builder and to decipher the positives and negatives of the application. So here we go:

aesthetics

It has to be said the builder is very aesthetically pleasing with a simple yet satisfying design and very powerful interactive features allowing drag and drop components to help build the template as required.

level of detail

The level of detail at which you can manipulate your desired template is relatively high, however, if your looking to create a very complex template this builder is not for you. Allowing only 0, 2 or 3 column layouts can be quite restrictive although it does allow you to add “column sets” to each column to produce a more precise layout, however, this is not always practical.

The ability to add padded content boxes, content elements (such as h1, h2, p, line, ul) and column sets really enhances the template builders appeal and definitely offers novice template builders a firm foundation from which they can build.

The level at which column and site widths can be edited also works very nicely. The ability to set max and min widths, re-order columns and change the individual column widths add for a satisfying effect.

conclusion

It has to be said the YAML builder is well worth a look to see if it meets your needs. More complex layouts may be a bridge too far for this builder, but I believe with a little extra development this app could be formidable. It does have a very strong foundation, but I would like to see it support more columns and the integration of rows as well. Then there is always the prospect of equal height columns to take it in to the exceptional bracket.

A lot to think about when considering my own template builder, but I can definitely use this as a firm benchmark from which I can weigh my own efforts against.

update

I have just received an email from Dirk Jesse (YAML Builder Developer) and he added the following to my review with regards to the level of complexity:

"Check out the Subtemplates in the "Add Elements" section. These offer much higher flexibility (eg. columns and rows) and can be combined with the exisiting columns. You can also remove all columns and creatve your layout only with the subtemplates. They even can be nested. So, rather complex layouts are possible too."

Well I think that just about caps it off.  What an awesome app.  If anyone uses it let me know how you get on.

Simple JavaScript Idle State using Prototype

7

Oct
03

This is a fairly simple piece of code, however, I decided it was worth putting up on the site for everybody to see.

Anyway the code itself aims to fire a function when there has been no mouse movement for a predefined length of time and reset the count every time the mouse is moved.

code

The code is very simple, therefore, only the JavaScript is worth talking about for this example, so that is going to be the focus of this article.  Have a look for yourself below.

Right then here we go:

JavaScript

var idleTime    = 5000;
var timeOut     = ”;

function init() {
    
    Event.observe(document.body, ‘mousemove’, resetIdle, true);
   
    setIdle();
   
}

function onIdleFunction(){
   
    alert(‘Your browser has been idle for ‘ + (idleTime/1000) +’ seconds.’);
       
}

function resetIdle(){
   
    window.clearTimeout( timeOut );
    setIdle();
   
}

function setIdle(){
   
    timeOut = window.setTimeout( "onIdleFunction()", idleTime );
   
}

Event.observe(window, ‘load’, init, false);

At the top of the code there is a variable called "idleTime", this variable sets the idle state time (in milliseconds) that the browser mouse be idble for, before firing the function.  Change this as you wish.

Next we have the "init" function which is called on page load by an event listener at the bottom of the sample code.  This itself sets a mouse move event listener (which resets the idle state when fired) on the document body and also calls the idle state function.

We then have an "onIdleFunction" which is where you put the code you wish to be fired when the page is idle.  In this example we’re just alerting out that the page has been idle.

Finally we have two functions, resetIdle and setIdle, which really do exactly what it says on the tin.  The first resets the idle state (on mouse movement) and the second sets the idle state.

Well that’s about it so have a look for yourself at the demo and code below.

demo

Feel free to view the Simple JavaScript Idle State using Prototype Demo.

download

Also please have a look at the Simple JavaScript Idle State using Prototype Code.

note

The Idle State at present only uses mouse movement for detect inactivity.  This will be problematic when considering devices that do not have mice (as it will not work), however, the code can be easily adapted to check for other forms of activity.

It is also worth while mentioning that the mouse move event is applied to the document body and therefore you must make sure that the height and width of the body and html are set to 100% for this to work, otherwise the event listener will not work.

« Previous Entries
Next Entries »