background preloader


AutoCompleter Tutorial As always, links to a demo and ZIP at the bottom, Enjoy! I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)! And so we begin:JavaScript JS Explaniation Ok, the above code it the guts to the script, this allows us to hook into the rpc.php file which carries out all the processing. The Lookup function takes the word from the input box and POSTS it to the rpc.php page using the jQuery Ajax POST call. IF the inputString is ’0′ (Zero), it hides the suggestion box, naturally you would not want this showing if there is nothing in the text box. to search for. ELSE we take the ‘inputString’ and post it to the rpc.php page, the jQuery $.post() function is used as follows… $.post(url, [data], [callback]) PHP Explaination Related:  Ajax

An AJAX Click to Appreciate Badge Martin Angelov When you publish something online, there are not that many ways to determine whether people like what you have to say. Comments, the cornerstone of blogging, are too demanding, and users often prefer not to post one. Today we are implementing such a badge, which you can include in every page of your website with a bit of jQuery magic. The Database Schema The script we are doing today uses two tables. Table Schema appreciate_pages The hash field holds an MD5 sum of the URL of the page. Table Schema appreciate_votes The appreciate_votes table contains the IP of the person that has voted (in the form of an integer), and the id of the page from the appreciate_pages table. You can create these two tables by running the code from tables.sql in the SQL section of phpMyAdmin from the downloadable archive, part of this tutorial. Step 1 – XHTML Lets start with the XHTML part of the tutorial. page.html <! In the page above, you can see that I am including two stylesheet files. Step 2 – PHP

Contextual Slideout Tips With jQuery & CSS3 Martin Angelov By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips. Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. The idea The main idea is to create an easily configurable set of contextual slideouts. To create a slideout element, you need to include a regular paragraph p tag to the page. Contextual Slideouts Step 1 – XHTML Now lets take a look at the structure of the paragraph tags you should add to the page, and how they are configured. demo.html As you can see, each of the tags contains a style, a class (optional) and a title attribute. slideout markup Structure of the Slideout Step 2 – CSS

html - JavaScript to add dynamic rows for submission returns only first row of data Ajax example - staff directory search with PHP &amp; C# ASP.Net Ajax in a nutshell is a set of technologies which allow for partial page updates without requiring the whole page to refresh after communication with the server. Usually when a visitor is on a webpage and clicks a link or a button the whole page is reloaded (and the browser window goes white) before the user can see the updated page back, however with Ajax the user could see the specific results of the link/button click almost immediately as only the relevant section of the page is updated. What Ajax (the frontend) updates the page with is usually based on what it passes to the server (backend). Ajax uses Asynchronous communication to allow this type of update to a page. Asynchronous communication in this context basically means that the loading of data/information (for example results from an SQL Query) for display in a specific section of the web page does not interfere with the normal loading of the web page and thus the page will not freeze or go white as is normally the case. <!

Simple AJAX Commenting System Martin Angelov This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON. Step 1 – XHTML First, lets take a look at the markup of the comments. demo.php <div class="comment"><div class="avatar"><a href=" src=" The avatar div contains a hyperlink (if the user entered a valid URL when submitting the comment) and an avatar image, which is fetched from The other important element in the XHTML part is the comment form. The form is submitted via AJAX. Simple AJAX Commenting System Step 2 – PHP PHP handles the communication with the MySQL database and generates the markup of the comments. $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) { $comments[] = new Comment($row); }

CSS3 Rounded Image With jQuery The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn't display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically. View Demo Rounded Images Goal My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below. Problem The problem is none of the modern browsers display rounded corners image the way I want it. The CSS Trick The trick is very simple: wrap a span tag around the image element. Final Solution With jQuery To make things easier, we can use jQuery to automatically wrap a span tag around the image. The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. Sample Usage I hope you will find this trick useful. Credits

Dynamically Add/Remove rows in HTML table using JavaScript [ad name=”AD_INBETWEEN_POST”] A good web design involves the better user interaction and ability to fetch the data in a better way. For fetching user data, you may have to create a form wherein user can add multiple entries and submit them simultaneously. Thus for this you will need a way to add or remove fields dynamically into the HTML page. In this article we will create a user interface where user can add/delete multiple rows in a form using JavaScript. First check the user interface. In this example, we have created a table which will display our html components. Following is the source. Code For adding dynamic row in table, we have used insertRow() method. Check the online demo. Online Demo Click here. Add/Remove rows from table having Drop Down List What if my table has a selectbox or drop down list and I want to implement add/remove row functionality? Following is the code: Check the addRow() method in above code. Click here. Getting Submitted Form Values in PHP Will change into:

Creating Sortable Lists With PHP And Ajax - PHP articles and PHP tutorials - PHP 5, MySQL, PostgreSQL, AJAX, Web 2.0 You might have been in a situation before where you had a list of items in your database that needed to be output in a specific order. These items could be anything: perhaps a listing of your favourite movies or your favourite books. For whatever reason, you want them ordered in a custom way that can’t be determined automatically (such as alphabetical). This article covers the implementation of a system that lets you easily define the order of such a list. Traditionally, implementations of such functionality involve you clicking a “move up”, “move down”, “move to top”, or “move to bottom” button that switches the order the items (one item at a time). In any case, these methods are much more difficult to use than they should be. To achieve the Ajax effects (that is, the drag/drop effect, and the seamless saving of ordering data), we will be using the Prototype and Scriptaculous libraries. Next: Creating Our Database And Populating It

Tutorial 3: Adding a scroller to your website that supports Ajax | The scroller in action Introduction Sometimes, a nice and sharp design is ruined by the addition of a scroller. By default, the OS styles the scroller and that (arguably) makes it look ugly. For this tutorial, I’ll be using a nice little script called fleXcroll and then adding some code to add support for loading content via Ajax. What you’ll need 1. fleXcroll 2. jQuery Here we go1. 2. Since our div will be dynamically populated with content, we will use two divs: one to contain the scroller, and one to contain the content. 3. $(document).ready(function() { settifyAndUpdatifyScrollablePane("home_content.html"); }}; …or by adding it just before your page’s closing body tag. settifyAndUpdatifyScrollablePane() is in turn defined in global.js. function settifyAndUpdatifyScrollablePane(page) { $.get(page, '',function(data, textStatus) { $("#scrollPaneContent").html(data); var myDiv=document.getElementById("scrollPane"); if(myDiv! 4. That’s it.