10 Auto Complete Ajax Scripts
0In 2005 when Google implemented Google Suggest, Ajax took off. Every web developer was trying to duplicate what Google accomplished. Its now 2008 and there are tons of ways to accomplish Google Suggest. Below is a list of 10 Auto Complete Scripts with various frameworks. The list below is in no particular order.
- jqac - Is jQuery plugin for autocomplete. jqac is very easy to implement and has a scrollable suggests list. It also allows for multiple suggests support and is tested in all major browsers.
- AutoComplete (for Prototype) – This is a script built for the prototype framework and it allows multiple column support. It also is a very nice style built with it.
- YUI Autocomplete – This script is built with the Yahoo! UI Library. The AutoComplete features navigation of the suggestion box via up/down arrow keys. It is very easy to configure with the
New Feature in Google Search Results
0Sitelinks are the links shown below some of the sites in our search results, these links are known as sitelinks. Sitelinks are meant for the visitors or online searchers for easy navigation. Sitelinks are additional links Google sometimes generates from site contents in order to help users navigate your site. Google generates these sitelinks periodically from your site’s contents.
Great CSS Techniques and the Simple Truth Behind Them
0There is a simple recipe to judge CSS techniques: Does the method in question require HTML additions and modifications beyond introducing certain IDs or classes?
If yes, the technique is likely to be not very elegant, in fact, it might be inadvisable, depending on the strictness you’re applying. Personally, I tend not only to assess these techniques as “inferior†but even to avoid and discourage to use them, and both theory as well as practice show that you’re in fact better off looking for alternative solutions since formatting induced HTML changes do not only mean less good code but also certain problems concerning maintainability.
However, it is nice to talk about about problems in a quick, concise manner, but two examples will probably strengthen the argument:
- Questionable: Nifty Corners.
-
The initial proposal for rounded corners asked for the following (or similar)
Really simple autosuggest component using PHP and MySQL
0After several requests I published this simple “PHP component”, ready to use, to implement a search form with an autosuggest feature using PHP and MySQL. For all ajax beginners this is the most simple way to implement it (just with 8Kb) and the only thing you have to do is modify some parameters. Take a look at this post for all related infos.
Download Autosuggest PHP component
Before to start
Before to start, take a look at content of package:
In detail:
- autosuggest.php include a form to search something into your database.
- ajax_framework.js enables ajax functionalities
- search.php contains a standard query to looking for something into some DB table
- config.php includes DB connection parameters
Ok. Now?
Step 1: include autosuggest.php
Create a new PHP page (for example index.php) in the same folder (don’t change it, More >
Rounded Corner Input Form
0I was involved in a project for re-design a web page that required to create a rounded form. After googling, i did not find any satisfying result, more of them offer a mozilla CSS technique and its only working on Firefox and Mozilla (Gecko) Browser, so I try to make a simple rounded corner input form.
The idea is so simple, to put the rounded background behind the form, and make the
invisible by removing the border and adjusting the background. So what you see is only the rounded background, simple isn’t it?
Okay, lets get it on…
To make round a fixed width form, I put
into
.
Now, what you need is a rounded image with a view of css code. I made an image in transparent GIF below:
And the code:
input
Creating Progress Bar with CSS
0How far did you go? How many space left to use? These questions can be answered by a single of graphic called “progress bar” or even “quota bar”. Famous free email service such Yahoo!Mail or Gmail use this feature to warn their users how many quota left to use. You can build progress bar using a simple css code and few images. Look at this working example, nice isn’t it?. How? Lets move on…
First, you need two image to use as a bar frame and a progress bar.
progress.png / Progress Bar
Create the images above with the same dimensions each other and the same positions of the object drawn inside, to make your css job more easier.
Now, go on to the HTML Code:
Rethinking CSS Image Replacement
0When I say CSS image replacement, I mean taking a page element that isn’t normally an image and turning it into an image. This is a very common trick and popular because of it’s semantic meaningfulness and SEO benefits. A common place to use this is with a header tag.
The OLD Way
CSS-Tricks
h1.main-logo { width: 350px; height: 75px; background: url(images/header-image.jpg); text-indent: -9999px;}PROBLEM:If you turn CSS off, this will just degrade into text. Not a bad thing, but just because someone has their CSS turned off doesn’t necessarily mean they want their images turned off too.
The NEW Way
WHY THIS IS BETTER:With CSS turned off you can still display an image. With CSS and images turned off, you will get the ALT text from the image. You can even use a different image inside than you More >
Make Printable Page using CSS Print Properties
0CSS has done it again, with a single file of CSS a complicated page layout turns to a simple, clear, and friendly for printing purposes, but sadly the properties are not fully supported by recent browsers. Some days ago, I created a print version page for a client, and I would share the experiences in this post.
Include the Print Version
You can make a css file for the print-version style, such print.css and call it to your page with a single line:
If you are lazy enough to create a new file, you can write directly into the same css file as the layout managed. @media make you able to do this:
@media print {
/*Your CSS for Print Goes Here*/
body {
margin: 1cm; /*Set the margin*/
background: none;
}
#banner {
display: none;
}
/*End of CSS for Print*/
}
If you don’t have More >