Category: mootools

Create A MooTools Slider With Spanning Element

10 September, 2008 | mootools | No comments

The MooTools slider is a good little application, and creates a reliable means of adding in a slider tool to a site. However, one thing that the MooTool slider is missing is a block that covers what is on the left hand side of the slider, before the handle.

Before we go into to how to create the tool, I have created an example of the slider. The colours are deliberately garish in order to show the different elements of the slider.

Create a page with the following HTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="./script/mootools.js"></script>
<link href="./style/slider.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="track1">
<span id="track1span"></span><div id="handle1"><img src="./style/slider/handle.png" id="handle1Image" alt="Drag Me" /></div>
</div>
<p id="test"></p>
<script type="text/javascript" src="./script/slider.js"></script>
</body>
</html>

The slider element has the following structure.

div <- container for the slider
---span <- the span element
---div <- handle
------img <- image to make the handle pretty

You will need to download the MooTools library to run this tool.

Create a style file (called slider.css in a directory called style) and add the following content.

#track1{
 width:500px;
 padding:0;
 margin:0;
 height:18px;
 background-color: #09f;
}
 
#handle1{
 padding:0;
 margin:-20px 0 0 0;
 width:18px;
 height:18px;
}
 
span#track1span{
 display:block;
 padding:0;
 margin:0;
 background-color: #222;
 height:18px;
 width:50%;
}

Now for the important part of the script. Create a file called slider.js in the script directory and add the following code in. I have put lots of comments in here to make it clear what each line is doing.

// set up track array
var handleArr = new Object();
handleArr["track1"]=250; // set initial value
 
// set up effects for the slider
var track1Span = new Fx.Style($('track1span'),'width',{duration:0});
 
var slider1 = new Slider($('track1'),$('handle1'),{
 steps:500, // there are 250 steps in the track
 offset:0, // offset of zero fits the handle into the track
 onChange: function(pos){
 track1Span.set(pos);
 handleArr['track1'] = parseInt(pos); // store position
 updateTestDiv(); // run function to do something
 }
}).set(handleArr["track1"]); // set initial position
 
// function to update test tag with handle position
function updateTestDiv(pos){
 $('test').innerHTML = handleArr['track1'];
}

All that this slider does is update a p tag with the id of test with the current position of the slider handle.

The ideal thing about this script is that it is fairly easy to add more tracks into it, you just need to duplicate the code slightly to create variables for slider2 and so on.

Insert Random Data Into Rabid Ratings

24 April, 2008 | MySQL, mootools | No comments

Rabid Ratings is a neat ratings script written with the Mootools JavaScript framework that makes adding a rating function to any site very easy. The only problem is that when you first install the script it looks like no-one has ever visited your site to leave a rating. To combat this you can create lots of phony data that makes it look like your site is well visited and interesting. One way to do this is by getting lots of people to vote on every rating on the site. However, a much easier way is to do this with a few handy MySQL commands.

The following query will create a random vote of between 50 and 100 for each rateable value.

INSERT INTO rabid_ratings (ratable_id, ip_address, rating, timestamp)
SELECT rabid_ratables.id AS ratable_id,CONCAT(FLOOR(1 + (RAND() * 255)),'.',FLOOR(1 + (RAND() * 255)),'.',FLOOR(1 + (RAND() * 255)),'.',FLOOR(1 + (RAND() * 255))) AS ip_address,FLOOR(50 + (RAND() * 51)) AS rating,NOW() AS timestamp
FROM rabid_ratables
ORDER BY RAND();

Test this data with the following:

SELECT ratable_id,count(ratable_id),ROUND(SUM(rating)/count(ratable_id)) AS vote FROM rabid_ratings GROUP BY ratable_id ORDER BY vote DESC;

The only problem with this is that all of the ratings have the same amount of votes, which makes it look very contrived. Even though it is, we don’t want to make it look like that. The solution to this is to delete a random number of votes for each ratable value. The only problem is that you can’t use the RAND() function within the LIMIT clause of a MySQL statement. So therefore you can use the following bit of PHP to delete a random number of votes.

echo 'DELETE FROM rabid_ratings WHERE ratable_id = 1 ORDER BY RAND() LIMIT '.rand(1,100).';';

By incorporating this into a mysql_connect() function call you can run it for every rateable value and make it look like some items have more votes than others.

Highlight Area With mootools

10 February, 2008 | mootools | No comments

Creating a simple highlight effect is quite easy when you use the JavaScript framework mootools.

The first thing to do is grab the mootools library from the site and link it in your web page. You can select different components with mootools, but if you grab the whole thing you can start to play with whatever you want. Put this line of code in the head section of your web page.
<script type="text/javascript" src="mootools.js"></script>

For this example I want the highlight to occur when the page has finished loading. So I use the window.addEvent function to add an action for the ‘domready’ event to the window object of the page. Like this.

window.addEvent('domready', function(){
  alert('dom ready');
}

The next step is to create the highlight. This is done by creating a Fx.Styles object and then chaining the colour change. First we change it to black, and then we use the chain command and add another colour change back to white. You can change this to any colour that you like. The duration is also set in the first section of the chain so that it immediately turns to black and then fades slowly to white. Place the following code in the head section underneath the mootools include.

<script type="text/javascript">
window.addEvent('domready', function(){
  var fx = new Fx.Styles($('test'),{duration:2000,wait:false});
  fx.start({
    'duration':0,
    'background-color':'#000'
  }).chain(function(){
    this.start({
    'background-color':'#fff'})
  });
});
</script>

The final step is to create the element that will be used by the script. You can use any element that is visible on the screen (even the body) but for this example we will use a paragraph.

<body>
<p id="test">wibble wibble</p>
</body>

This effect can be used on any web page where you want to draw the users attention to something. This might be an updated section of the page, or a text area on a form.

The reason I have used the Fx.Styles object is so that it is easy to extend the functionality of the highlight. If you also wanted to change the colour of the text along with the background you only have to add in the relevant styles.