Javascript
8 practical tips to make your web pages faster
Yahoo’s Exceptional Performance team has compiled a list of 34 best practices to have faster web pages. In this post I’ll show you 8 tips which helped me to get a B grade in YSlow! for web pages that I develop. Currently YSlow’s web page analysis is based on 13 identified basic rules that affect [...]
AJAX image cropper with YUI and PHP
This post will show you how to build an AJAX crop image tool using the image cropper control from YUI library and PHP.
Demo
Download sample file
The ImageCropper Control from the YUI library gives you an interactive interface for getting the dimensions to crop an image and using these dimensions in PHP, we can do some cropping.
The [...]
Show/hide containers by only adding CSS classes without writing javascript code (YUI-based)
This post will show you how to add the collapse/expand functionality in your HTML pages, perfect for FAQs by only adding two class names to your existing page and including the scripts below. Of course it’s all YUI-based and also a demo of the fantastic YUI selector utility.
Demo of the toggler
Download the javascript file
What does [...]
nouzil.com - a new Mauritian portal on the web (YUI-based)
I came to know the existing of a new Mauritian portal via Avinash called nouzil (which means our island in creole) and I must say at first look it reminds me of Netvibes a lot. I think the nouzil.com team picked up some bits and pieces from Netvibes.com.
Anyway, looking behind the scenes I notice that [...]
YUI-based alert box - replace your ugly javascript alert box
This tutorial will explain how you can override the default alert box of your browser, without modifying your existing code and by adding 2 lines of javascript code.
Demo of the alert box
Download javascript file
Those 2 famous lines
After downloading the package and extracting it to your folder, add the following lines at the end of your [...]
Geolocate your visitors with PHP (part 2)
In the first part of this series I showed how you could get the country of a visitor via his IP address. Now with this precious information, I’ll show you how to map the visitor visually on the world map using Google Maps.
Sample preview.
You must sign up for a Google Maps API key if you [...]
Expanding/collapsing javascript menu
In this post I’ll show you how to create an expanding/collapsing menu like Slashdot left menu used to be, using the YUI library and Dav Glass YUI effects widget.
Preview of the script we are going to build.
The HTML markup for our menu is :
<div id="menu"><h1 id="menu-title">Menu</h1><div id="menu-links"><ul><li>Home</li><li>About</li><li>CSS</li></ul></div></div>
We use 2 div tags, one for holding the [...]
YUI-based numeric stepper widget
Since I had some problems with YUI slider, I decided to write a YUI-based numeric stepper that allows users to select values within a predefined range.
To instantiate the widget include the following files :
<!– CSS –>
<link rel="stylesheet" type="text/css" href="stepper/stepper.css" />
<!– Dependencies –>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!– Stepper source file –>
<script type="text/javascript" src="stepper/stepper-min.js"></script>
Then place your stepper in your [...]
10 starting signs of a good web developer (php version)
Nowadays many people call themselves PHP programmers / web developers as soon as they know a bit of Frontpage or using Dreamweaver to generate the code for them. But are they really good web developers? Here’s my top 10 characteristics of good web developers, feel free to comment.
1. Ability to hand code
Instead of using an [...]
Simple YUI Cookie example - javascript text magnifier for your page
Since YUI 2.5.0 there’s the Cookie utility and at this time of posting, it’s still in beta version.
I’ll show you how we can use this simple utility to write a small javascript app.
The piece of code we will be writing, using the YUI library (my favorite), will allow users to increase/decrease their font size for [...]
Categories
