Archive for the ‘JavaScript’ Category

Script of the week

None

Feb
15

Script of the week this week goes to the CSS Text Wrapper.   On the website they state " The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website" and I have to say it is very impressive.

The site covers every angle from XHTML with inline CSS, to XHTML with external CSS styles and finally an unobtrusive JavaScript.  This is all neatly created for you on the fly from the website by using their flash tool to sculpt your desired shape.

The image to the left shows just how effective this technique can be producing some superb shapes to enrich your sites design and layout.

Have a look for yourself at the CSS Text Wrapper and if your still not decided why not have a look at the CSS Text Wrapper demo page.

JavaScript Table Row Highlighter Class using Mootools

1

Jan
09

Well Christmas has been and gone (I hope you all had a fantastic Christmas/New Year), and now it’s time to get back down to some work.

I have developed a simple little class to highlight table rows using Mootools and I thought I would share it with the world.

code

As you can see below the HTML code is very basic and uses an ID to define the region which requires highlightling.  In this example an ID of "highlight" has been applied to the tbody.

Finally all that is left is to instantiate the "tableHighlighter" class using the ID of "highlight" to reference the table (or part of) required.

<table>

    <thead>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>

        <th>Five</th>
        <th>Six</th>
    </thead>
    
    <tbody id="highlight">
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>

            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>

        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>

            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>
            <td>100</td>

            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>
            <td>Quaterfold</td>

            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
        <tr>
            <td>1</td>
            <td>40cm</td>

            <td>Quaterfold</td>
            <td>100</td>
            <td><a href="#">1000</a></td>
            <td>3346005</td>
        </tr>
    </tbody>
    

</table>

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’ );
    
</script>

class options

The Hightlighter class comes with several options built in to allow for easy customisation.  These include:

  • rowColourClass – Can be named as you wish and referenced through css to produce your desired results.
  • rowHoverColourClass – Can be named as you wish and referenced through css to produce your desired results.
  • highlightRow – odd or even

An example of how this could be used is as follows:

<script type="text/javascript">
    
    var th = new tableHighlighter( ‘highlight’, {highlightRow: ‘odd’, rowColourClass: ‘myRowClassOne’, rowHoverColourClass: ‘myRowHoverClassTwo’} );
    
</script>

mootools modules

The modules required for this class is as follows:

Core

  • Core

Class

  • Class

Native

  • Array
  • String
  • Function
  • Number
  • Element

Element

  • Element.Event

download

Please feel free to download the JavaScript Table Row Highlighter code.

demo

Have a look for yourself at the JavaScript Table Row Highlighter demo.

JavaScript Request Querystring Function

1

Dec
09

After searching for some time for a good request querystring solution, for JavaScript, I believe I have finally found it.

Netlobo.com have developed a very useful function that breaks the querystring up into parameters using regular expressions.  This enables you to request the individual parameter you require and with very little added weight on the the load time of the page as the code is only 11 lines in total.

Check ou the JavaScript Request Quesrystring function for yourself.

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
« Previous Entries
Next Entries »