Examples on PHP, MySQL, JavaScript, MooTools and CSS

MooHover is a MooTools 1.2 JavaScript class that replaces regular links and form buttons with hover effect transition between two different images, giving a flash like aspect to links and/or button and submit form inputs. This plugin is intended to be a stylish replacement of the CSS hover declaration. If JavaScript is by some reason disabled or not working, the page will display the default instance of the elements replaced.

The effect is obtained by wrapping each element into a container div having as background image the default button instance and then playing with the element opacity that has the hover instance as background image.

All CSS styles are external and the HTML code on page is minimal, meaning that only links and buttons are present, without any additional containers for them.

The script is approximately 800 bytes in size compressed using Yahoo’s YUI Compressor. Also, it allows some parameters to be set when creating an instance, mainly for the purpose of letting the user use any CSS classes he/she might need, without changing the HTML source:

• container: the element containing the anchors or buttons replaced (default:document)
• className: the hover class (default:MooTrans)
• defaultClass: the default button class (default:default)
• duration: the hover effect duration in ms (default:400)
• transition: the hover effect transition (default:Fx.Transitions.Sine.easeOut)

…view full post

SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel.

It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.

There are several options inside the plugin that you can set up in order to obtain the desired effect:

• visible: number of visible images ( default:5 )
• showControls: either to show the back-forward buttons ( default: 1 )
• autoSlide : automatically slide the images from your photo gallery ( in milliseconds to set the interval – default:0 )
• transition: the transition you want to use when sliding
• currentElement: the element currently selected. If you need to start the slider with a specific image, set this with the image number-1 ( default:0 )
• thumbsContainer: the id of the thumbnails/images container
• elementScrolled: the id of the container of thumbsContainer variable
• overallContainer: the id of the elementScrolled variable

…view full post

This image zoom script is developed having as inspiration the similar type of image zoom created in flash that usually displays a small thumbnail showing the region zoomed on it and a bigger image that displays the region showed on the thumbnail. I’ve seen this kind of approach used mainly on e-commerce shops that needed to present a more detailed image of a product.

This particular image zoom is developed using MooTools 1.2 and it’s just for demonstration purposes since I never needed such a script in any of my projects. Any help or suggestions on making it more robust would be very appreciated.

In order to work properly, the two images (the thumbnail and the corresponding large image) must be proportional in size. When moving the zoomed area on the thumbnail, the script calculates the position on the zoomed image that it should display so it’s very important that the dimensions are proportional. The two images are located in the pictures directory, into different folders: the thumbnail’s folder is pictures/thumb and the larger image is in pictures/big.

The JavaScript is structured as a class and all CSS styles are mainly external and can be maintained from the stylesheet. …view full post

I suck at flash. Well, maybe not quite suck ( I started learning FLEX ) but I’m not that proficient yet. Luckily this guy knows what he’s doing . I absolutely love what he’s done with SiFR. And, as I stated in previous posts on this blog, I also love MooTools. So I thought to give it a try and mix the two. Keep reading to see what I’ve achieved.

Please note that the script below works only with sIFR 2.0.7.

For those of you that may not know, SiFR is a very clever way to substitute HTML titles (h1, h2…) with pretty looking flash titles right after the page loads. Brilliant idea giving the fact that pure HTML titles look like crap no matter how much styling you put on them. What you do is basically take the SiFR.fla source file, embed in it your own font, generate the .swf file and start using it. …view full post

The other day I found myself in the positions of accepting the challenge of modifying the aspect of an input type=file”. What could I do? I work with a crazy designer (just kidding, he’s actually very skilled at what he does). I thought it wouldn’t be a big deal but the solution took me a little over two hours to develop (I was thinking when I started that it would take maybe at most half hour).

What I had to create was this:

The website was developed using MooTools 1.2, so I wanted to develop a solution based on this framework. After surfing the net to see what others have done to solve this, I got a couple of ideas about what problems I’d have to solve. …view full post

I’ve been using Mootools for some time by now but this is my first article on it. For those of you that don’t know what Mootools is, I’ll tell you only this: It’s my life saver when it comes to JavaScript. The moment I found out it exists, I started using it and enjoyed every moment. Go check the official page for more details.

In this example I will present you a very easy, unobtrusive way to create a drop down menu. We will need the Mootools core build and the Fx.Slide component found in the More Builder. …view full post

I’ve been programming using PHP and MySQL for about 4 years by now. One thing that I’ve always hated was to write code. Don’t get me wrong, I love coding, what I hate is writing in 10 lines what I could do in 5. Besides the fact that is a terrible waste of time and effort, when I was put in the position of revising the code at a later time (to make changes or just for the sake of improving the code) I found myself in trouble trying to understand what the hell I was thinking back then. Another scenario is when someone else is taking what you started ( I know this because I had to take on someone else’s projects ).

Giving this, why not spend a little time thinking first and then start coding? Below are a few things I’ve found out with time. …view full post

Usually in a Flash gallery the images are shown using an XML file generated by the server (in our case using PHP). So, how do you create that XML file used to output the contents of your images folder?

Starting with PHP 5, we have some new tools added that ease out work. One in particular is of interest and that’s SimpleXML. In plain english, it offers the possibility to convert XML to an object and that may be used later in the code with simple array iterators. More than that, it can also output XML valid code to generate XML files.

For this example, besides SimpleXML, we’ll need one more thing: a way to read the folder containing the images. And for that we have readdir. So the process will go like this: first we need to read the entire directory with readdir() and after that we need to generate the XML output using SimpleXML. Remember, SimpleXML is available in PHP starting with version 5, so make sure you have it installed on your server.

To check your PHP server version, simply create a file called phpinfo.php and inside it put only this: <?php phpinfo(); ?> – after that, upload the file on your web hosting service. Open your favourite web browser and point it at this file ( www.mywebaddress.com/phpinfo.php ). The first this you’ll see will be the server version ( something like PHP Version 5.x.x ). Remember to delete the file after you’re done. …view full post

While performing a search, it’s ofter very useful to highlight in different colors, backgrounds or styles the search keywords in the results returned. This keeps focus on the keywords and helps scan the page faster to find the more relevant results.

But how exactly can that be done? As a basic idea, the following code ( a PHP class ) practically takes as parameters the text that needs to be highlighted and the particular keywords that need to stand out. Using a regular expression, every keyword in the text is replaced with a span HTML element having different styles applied according to the keyword it matches.

Please remember that the code below is just an example, it can be and should be extended; I’m only presenting it for demonstration and “how to” purposes. …view full post

From time to time there is a task that needs to be accomplished and it’s a quite difficult one. When that happens and the deadline is tight it’s a very good solution to search the web for what you need. Below, I’ll put some good stuff I found on the web. …view full post