Tag Archives: web

UNd web Template

After a break of 3 months, where I was very busy with my internship at Accenture as a Business Intelligence consultant, I’ll try to post more frequently on this blog. To start here’s a brand new template I made, pretty clear without any fancy effects. Use it for free!

Below is a preview of the template and links to download it:

Sad grey: css3 template

Here is a brand new blog template.
I tried some features of CSS3 which mean you won’t be able to have the same render with navigators that does not fully support CSS3 yet.

This version of CSS really ease the development of webdesign:

  • Include custom fonts
  • Rounded corners
  • Text’s shadows
  • Multiple backgrounds images
  • And many more…

I am thrilled about all of these and I hope that we will be able to use CSS3 as soon as possible. You can take a look at that blog template I was talking about earlier:

Create your first jQuery plugin

In this article I will show you how to create a simple jQuery plugin menu.
First of all, check this demo so you know where we are heading to: smoothymenu plugin.

As you can see, we will create a plugin to render a menu with fading effect on its items.
The first step to create your plugin is to download the latest jQuery library at jquery.com.

Now you can create a new JavaScript file, this file will contain the main function of our plugin (our plugin will also use a CSS file). To declare a plugin function in jQuery you have to use this syntax:

jQuery.fn.smoothymenu = function() {}

Before we get started with the Javascript let’s take a look at an HTML example file. By doing this we can define the basic structure of our menu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SmoothyMenu Jquery plugin</title>
	<link href="css/smoothymenu.css" rel="stylesheet" type="text/css" media="screen"></link>
	<script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="lib/jquery/smoothymenu.jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('ul#menu').smoothymenu();
		});
	</script>
    </head>
    <body>
        <h1>SmoothyMenu Jquery plugin</h1>
 
	<ul id="menu">
		<li>
			<a href="#">Home</a>
		</li>
		<li>
			<a href="#">Contact</a>
		</li>
		<li>
			<a href="#">About</a>
		</li>
	</ul>
    </body>
</html>

As you can see I apply my plugin on a list with an id. Now we can write our plugin, the first step is to retrieve the element we will work with. In or case the list, to do that you can create a variable:

var menu = $(this);

After that, we want to apply some styles to our menu so we will programmatically add a class to the menu. This class is in our CSS plugin file and will be provide with the JavaScript file (of course the end user will be able to customize the CSS to match his needs).

menu.attr('class', 'smoothymenu');

Here is the trick to create the fade in/out: we add a block to each menu item, if the mouse if out of the item it will be not visible, when the user will hover an item we will fade it in and vice-versa.

/* Append the specific effect block to each menu items. */
menu.find('li').append('<div class="hover-effect"></div>');
 
/* Apply an effect on the hover of an element of the menu. */
menu.find('li').bind('mouseover', function(){
	$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
});
 
/* Apply an effect when the mouse is out of an element of the menu. */
menu.find('li').bind('mouseout', function(){
	$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
})

Ok we are done, of course you can add parameters to your function and do more complexes operations.
I tried to keep it it simple in this example, to sum up here is the whole smoothymenu plugin function:

jQuery.fn.smoothymenu = function()
 {
 	var menu = $(this);
 
	/* Define the class of the menu */
	menu.attr('class', 'smoothymenu');
 
	/* Append the specific effect block to each menu items. */
	menu.find('li').append('<div class="hover-effect"></div>');
 
	/* Apply an effect on the hover of an element of the menu. */
	menu.find('li').bind('mouseover', function(){
		$(this).find('div.hover-effect').stop().fadeTo('fast', 1);
	});
 
	/* Apply an effect when the mouse is out of an element of the menu. */
	menu.find('li').bind('mouseout', function(){
		$(this).find('div.hover-effect').stop().fadeTo('fast', 0);
	})
 };

You can download the sources right here: smoothymenu jquery plugin sources (see the demo).

References’ basis in PHP

The first step is to answer the following question: What are references? In PHP references are a way to access to the content of a variable by others names. We will briefly cover the three different kind of references available in PHP.

1. References as a function’s parameter

By default, PHP handle the variables you send to a function locally, what I mean is what is in the function stay in the function. By passing a reference you will make your local function variable referencing to the variable in the calling scope of your application. Here is a short example with and without references.

<?php
/**
 * Using references
 */
function foo(&$var){
     $var++;
}
$a=5;
foo($a);
echo($a); //Will display 6
?>
<?php
/**
 * Without references
 */
function foo($var){
     return $var++;
}
$a=5;
$a=foo($a);
echo($a); //will display 6
?>

2. Return by references

Another case is to return a reference. But you have to be very careful with this one because with some tricky code you can access to the private attributes of a class and indeed modify their values.
Here is a classic use of a return reference:

<?php
class Personne {
    public $age = 22;
 
    public function &getAge() {
        return $this->age;
    }
}
 
$obj = new Personne();
$myAge = &$obj->getAge(); //$myAge is a reference to $obj->age, which is 22.
$obj->age = 18;
echo $myAge; //will display 18
?>

And now we will see that we can modify a private attribute by using a return reference:

<?php
class Personne {
    private $age = 22;
 
    public function &getAge() {
        return $this->age;
    }
    public function __toString(){
        return $this->age;
    }
}
 
$obj = new Personne();
$myAge = &$obj->getAge();
$myAge = 897; //the private attribute $age has been modified
echo($obj); //unfortunately it will display 897 
?>

3. Assign by references

The last case and the easiest is the assignment. It is done just like that:

<?php
$a =& $b;
?>

Which means that $a and $b reference to the same content.

In conclusion, references might seems pretty useless with these examples but it is actually wise to use some of them when you are working on a complex software architecture with a lot of objects using others objects. It is also nicer to avoid the $var=foo($var).