Posted by: Miracle Studios | October 17, 2008

AJAX online Examples

There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know. They’re essential parts of any web developer’s toolbox. If you haven’t seen them yet, you no doubt will in your future web development endeavors.

1. TextboxList meets Autocompletion

Auto-completing fields in a form can be a huge time saver and a major benefit to the user. For example, searching for email addresses is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to autocompletion. The implementation is crisp and useful, not to mention easy on the eyes.

2.Ajax IM

Ajax IM is an incredible Ajax instant messenger that works just like Yahoo! messenger or any other IM client, except it’s embedded on the website as opposed to a desktop client. Ajax IM is incredibly robust, and could add quite a bit to your user’s experience. If you’ve got a social networking site or any site where it’s encouraged for users to interact with each other, an IM client could be a great way to increase interaction.

3. LiveValidation

Web forms can be one of the most frustrating aspects of the Internet. Most are too long and try to collect too much information, and sometimes make it very hard for a valuable user to fill the form out. Possibly one of the most frustrating aspects of filling out a form is hitting “Submit” and getting errors that have to be corrected.

One way to ease the pain of web forms is to add Ajax validation that tells the user instantly when he’s made a mistake. LiveValidation is an excellent Ajax script that can make adding Ajax form validation super easy for the developer. A must-have for any project that uses forms.

4. Inline Editing

The ability to edit something inline is a small aesthetic feature that can really add to the user’s experience. There’s something much niftier with being able to click a text field and instantly have the ability to edit it.

Manoloweb has a great little Ajax implementation of an inline editor. It’s a tiny script, but it can be modified to be as simple or complex as you wish.

5. Ajax Upload

Uploading files with Ajax is so much nicer than the boring, old alternative. It’s nice to see the progress of the upload, and it can be much handier for the developer to be able to use Ajax uploads that only modify small sections of the web page.

Because there are many different flavors of Ajax uploading, a simple example that can be added to. AnyExample has a quick and excellent tutorial on how to make a basic Ajax upload that you can use as is or expand upon. If you’re looking for an immediate solution, check out jQuery’s jqUploader or the multiple file upload scripts.

6. Fancy Upload

Now that we’ve covered the basics for file uploading with Ajax, check out the excellent Fancy Upload. It’s built off of the excellent Javascript framework MooTools and can be styled and modified almost endlessly. It’s unobtrusive, can be placed inline and is server independent, so integrating this script to an existing app is relatively easy.

7. ClickHeat Clicks Heatmap

Heatmaps are an underused aspect in web development. While this may not be a wildly-popular feature that your users are begging for, heatmaps are excellent for the developer to see just what the site users are clicking on. While there are plenty of hosted services out there like crazyegg, you can also use your own hosted, Ajax-powered heatmap that’s completely free with ClickHeat.

ClickHeat is very simple, but also very powerful. It shows who’s clicking on what part of your page in a given date range. This can add plenty of insight as you tweak your layouts for the best performances. Knowing where your visitors click is absolutely essential information. You can visually see what ads are performing best, what links people like to click on, and much more data.

8. Ajax Mail Form

There’s nothing more valuable to a startup or brand new website than a simple form for your visitors to sign up for launch dates and site updates. If you can add Ajax to dynamically process the information, it’s a huge bonus. NinjaDesigns has a nifty little PHP script that allows you to add a signup form on your website that uses Ajax to send the information, so a new page isn’t loaded. Extremely valuable for any web developer.

9. Ajax Directory Manager

Navigating a traditional hierarchy or folder tree can be quite a pickle for a web user. Each click on a folder requires a page reload, and you can kiss drag-n-drop functionality goodbye. If you want to add a user-friendly directory manager, use Ajax.

Relay is a robust directory manager built on ajax that features an interface with features like:

  • drag-n-drop file and folders
  • dynamically loading file structure
  • uploads with file progress bar
  • user accounts

.. and more. Relay is totally fully featured, and can be used as a standalone application or a compliment to an existing site.

10. Ajax Email Client

Who doesn’t love Gmail? The email service by Google completely changed the way we use and think about email, and it also forced others like Yahoo! and Hotmail to play catchup and try to compete with Gmail’s features. Google accomplished all of this with a little help from our friend Ajax.

If you wanted to mimic Gmail and create your own Ajax email client, it’s a fun experiment and could be used for many applications. DevArticles has an “oldie but goodie”, a somewhat older but excellent article on how to set up your own Gmail clone.

11. Improve Form Usability with Auto Messages

Many of the scripts listed in this article deal with improving user forms, as it’s a big trouble spot for many web developers. The last thing a site owner wants is for people to abandon the website as they’re signing up for the service! If you can make the process of filling out the web form easier, you’ll have a much higher form completion rate.

Using auto messages for forms is an excellent way to give guideposts to the user. Woork has a stellar tutorial on how to add automatic messages to form fields, so that when they’re hovered on a little popup shows below the input. It’s a small feature to add, but huge for improving the user’s experience.

12. qGallery

While it isn’t a full-featured gallery, qGallery is an excellent example of using Ajax to request photos and media. It’s based around the prototype Javascript framework, and it’s a perfect little script for showcasing images. It even has cache functions built in to save bandwidth.

13. Ajax Star Rating

It seems that people almost always want to give their opinion on something. Having a simple way for users to create ratings is a great way to add interactivity to your website, and also gives the users a “voice”.

There is a simple Ajax script that will do this called the unobtrusive ajax start rater. This nifty little script allows users to rate just about anything you specify. It’s not tied to any platform, so you could literally use the script for anything that used PHP and MySQL.

14. CakePHP Ajax Form

If you’re a user of the web framework like Django or CakePHP, you’ll appreciate the tutorial by CakeBaker on how to submit a form with Ajax. It’s actually quite simple to do, and only requires a few lines of code. One especially useful function of this code is that it’s unobtrusive, meaning that if Javascript is disabled in the browser, the form will still submit, just not with Ajax.

15. Amberjack Site Tours

In terms of web developers, Amberjack is one of the most impressive Javascript libraries to date. Amberjack allows you to quickly and easily create site tours for your users that make using your website less of a mystery. The best part of Amberjack is that the whole library is less than 4kb in size! It’s incredibly easy to customize, and can really make a huge impact on your site visitors with only a little bit of work.

16. Prototype UI

Prototype UI takes all of the hard work out of creating visual Ajax elements like carousels and modal windows. The script is based off of Prototype and Scriptaculous, and it’s essentially a library of user interface classes. The library is constantly growing, and all of the features are highly skinnable and easy to customize.

It’s always hard to find different libraries for things modal boxes and carousels, so it’s nice when they’re all bundled together.

17. JCrop

Photo editing online is typically a rather involved process. Either you use a service like Picnik or you just fire up ‘ol Photoshop to edit your images. Wouldn’t it be nice if the website allowed you to crop the images that you were uploading?

This is now possible with a jQuery plugin called JCrop. JCrop allows your users to crop any image that’s been uploaded to your servers, using a powerful Ajax cropping engine. Brilliant.

18. jQuery Auto-tabbing Plugin

Like we’ve stated earlier, the job of the web developer is to make filling out forms as easy as possible for the site user. That means adding even the smallest feature if it enhances the user’s experience. One such example is using auto-tabs on things like phone number input fields and social security numbers. Lousyllama has an excellent jQuery plugin that allows you to auto-tab form fields that you specify.

19. Sort Table Rows with Ajax

Sorting table elements is an incredibly useful feature to have with pages that showcase lots of data. The Daily Inspired has a nifty tutorial that shows how to achieve this effect with Stuart Langridge’s sortable.js.

Tables are great at organizing data, but being able to further drill-down the information gives your users many more options to viewing the data they way that they want to.

20. DrasticMap

Google Maps is yet another revolutionary product from Google that relies heavily on Ajax to power the site. DrasticMap is a stellar Javascript/Ajax script that allows you to map coordinates stored in a MySQL database on top of a Google map. It’s highly flexible and configurable, and the possibilities are endless in the ways that it can be used.

Posted by:

Posted by: Miracle Studios | October 11, 2008

37 More Shocking jQuery Plugins

It’s really amazing to see what one can create using jQuery. Developers just don’t stop making incredibly interactive web applications every now and then. This post just demonstrates excellent examples of some of the best jQuery plugins out there.

jQuery Sliders

1) Slider Gallery– A similar effect used to showcase the products on the Apple web site. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

2) Accessible slider– Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.

jQuery Manipulating Images

3) crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

  • Live Demo Of Crop: Here
  • Live Demo of LabelOver: Here

4) Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE 6.

  • Live Demo Of Crop: Here

5) Creating A Sliding Image Puzzle Plug-In– Creates sliding-image puzzles based on containers that have images. Running the demo page we get this output in the image below:

jQuery Navigation Menus

6) Digg Header– This is a replica of the Digg header. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors… There is a lot of smarts in a small place in this example!

7) IconDock– a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

jQuery Accordions

8 ) Horizontal Accordion– This plugin provides some simple options to alter the accordion look and behavior.

9) HoverAccordion– A jQuery Plugin for no-click two-level menus.

jQuery Image Viewer

10) Step Carousel Viewer– Displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand.

11) Featured Content Glider– You can showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. Supports two different display modes- “manual” and “slideshow.”

jQuery Charts

12) jQuery + jFlot – Plots, Canvas and Charts.

13) Accessible charts using canvas and jQuery – A proof of concept for visualizing HTML table data with the canvas element by using jQuery to provides several types of editable graphs, such as Pie, Line, Area, and Bar.

jQuery Editors

14) Small Rich Text Editor – Small footprint, Cross-browser, Ajax Image upload, HTML Cleanup with PHP back-end rich text editor with all basic Rich Text functionality included.

15)markItUp! Universal markup editor– This plugin allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. Worth Checking!

jQuery Flash Plugins

16) jQuery Flash Plugin– A jQuery plugin for embedding Flash movies.

17) jMP3– jMP3 is an easy way make any MP3 playable directly on most any web site (to those using Flash & JS),

using the sleek Flash Single MP3 Player & jQuery.

18) jQuery Media Plugin– It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page.

jQuery Tabs

You can use the a href=””>jUI/Tabsto create more dynamic tab functionality.

19) jQuery Tabs– Typical tabbing structure which degrade nicely without JavaScript enabled.

jQuery LightBox

20) Fancy Box– Kinda different image zooming script for those who want something fresh. Features: Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them

21) Thickbox Plus– Click an Image to view a ThickBox image that is resized when your window is resized to fit the window.

jQuery Datagrid plugins

22) Flexi Grid– Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

23) Query Grid 3.1– Datagird plugin for jQuery, where the user can manipulate the number of requested pages with adding, updating, deleting row data.

jQuery Field Manipulation

24) FaceBook Like – jQuery and autosuggest Search Engine– This autosuggest search engine is inspired from facebook for design,

use jQuery as ajax framework and BSN Autosuggest libs.

25) Masked Input Plugin– It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

jQuery with cool animation Effects

26) jQuery Enchant– Devoted to rich effects. It already features all effects you know from scriptaculous/interface, as well as many more great additions: color animations, class animations and highly configurable effects.

27) EasyDrag jQuery Plugin– Add the ability to drag and drop almost any DOM element without much effort. So it’s simple to use and you can also attach handlers both to the drag and to the drop events.

28) Simple Effects Plugins– Nice animation effects that can easily toggle, hide, show, fade, slide elements.

29) Slide out and drawer effect– A demonstration of accordion effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

jQuery Worth Checking Plugins

30) crop, labelOver and pluck– How to create a drop cap and apply it to every paragraph in a DIV.

31) Style Author Comments Differently with jQuery– Nice custom styling applied to comments left by the author.

32) Creating a fading header– A simple example using jQuery and CSS that shows you how to create the fading header technique.

33) Coda Bubble– A demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site

34) Another In-Place Editor– This is a script that turns any element, or an array of elements into an AJAX in place editor using one line of code.

35) jQuery Taconite– The jQuery Taconite Plugin allows you to easily make multiple DOM updates using the results of a single AJAX call. It processes an XML command document that contain instructions for updating the DOM.

jQuery Web Applications

36) GenFavicon– A cool online generator that creats little favicons used throughout the web. You have the option of either specifying a URL for the image you’d like to convert or uploading it to the site for processing.

37) WriteMaps– WriteMaps provides an easy-to-use interface for creating, editing, and sharing your sitemaps.

Posted by:

Posted by: Miracle Studios | October 11, 2008

45+ Fresh Out of the oven jQuery Plugins

This month ago we’ve presented the 50 favorite jQuery plugins and 37 More Shocking jQuery Plugins for many developers use and we promised that the second version will be coming soon. Today, we are going to introduce 45+ more jquery plugins that were recently created, so you don’t have to do the search as we did it and will continue to do it to build a useful library of jquery plugins and solutions.

Image SlideShows and Galleries

1) Galleria -Is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

2) jQuery Multimedia Portfolio -Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player.

3) wSlide -Change your lists in animated box (with pagination)

Tag Clouds

4) Hover Sub Tags– Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.


5) Pagination– Create navigational elements, when you have a a large list of items you can display them grouped in pages and present navigational elements to move from one page to another.


6) Accordion Menu -In this Accordion menu example, the menu headers are H3 tags, with each sub menu being UL tags that expand/ contract.

7) jQuery Treeview Plugin

8 ) Coda-Slider– Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.

9) Simple Horizontal Accordion

Tables and Grids

10) TableRowCheckboxToggle – It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row.

11) TableEditor – TableEditor provides flexible in place editing of HTML tables.

12) Ingrid – ngrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.


13) jQuery Nice Form – Create custom looking form elements, that function like normal form elements.

14) Easy Multi Select Transfer– Allowing options to be traded from one multi select to another.

15) jQuery Form Plugin– Allows you to easily and unobtrusively upgrade HTML forms to use AJAX by using ajaxForm and ajaxSubmit methods to gather information from the form element and determine how to manage the submit process which allows you to have full control over how the data is submitted.


16) jQuery.SerialScroll – This plugin allows you to easily animate any series of elements, by sequentially scrolling them. You can use it as a section slider, text scroller, slideshows, and news ticker.

17) liScroll – LiScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker

18) Spinner – Allows you to cycle through millions of items or groups of items with the appearance of a scroller and functionality of a page horizontally or vertically.

Form Elements

19) jWYSIWYG – This plugin is an inline content editor to allow editing rich HTML content on the fly.

20) Simple chained combobox -Very simple chained selects plugin for jQuery with JSON processing and callback feature, chain multiple selects with ease.

21) jQuery checkbox

22) jGrow -jGrow is a jQuery plug-in that makes the textarea adjust its size according to the length of the text.


23) jTruncate in Action – jTruncate provides simple yet customizable truncation for text entities in your web page.

24) toggleElements – toggleElements is designed to hide informations on your site and show it only when the user requests more information.

Gradients and Shadows

25) Drop Shadows – Interesting Drop shadow effect generated by a jQuery Plugin.

26) Gradient jQuery plugin – It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

27) Gradient – The gradient plugin adds a dynamically created configurable gradient to the background of an element without the use of images.


28) Facebox -Is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

29) jQuery Lightbox Plugin– (balupton edition)

Color Picker

30) jQueryColorPicker – A simple jquery color picker plugin that can make user change the color of the background of the page easily.

This is worth checking out

31) Animated InnerFade– Full w3c compliant animated slideshow with sliding effect on large images.

32) Easy POP Show 1.0 Release – Full screen show for slide news or Image Gallery.

33) jqChart– Ajax & Draggable Simple Chart on Canvas+jQuery.

34) UI Datepicker -A simple jQuery UI Datepicker. Just add a text input field to your page and then attach the datepicker to it.

35) JSmile – A totally unobtrusive way for both (x)html and javascript events/functionality, this plug-in allows you to add, and remove, smiles in an entire document or only in some specified element.

36) ImgAreaSelect – imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

37) jPrintArea-jPrintArea is a small jquery plugin to print only contents of a specified element.

Check out their demo page

38) jTabber– Allows you to scroll through content by clicking on tabs, without the page having to reload.

39) jQuery Calculation Plug-in – The Calculation plug-in is designed to give easy-to-use jQuery functions for commonly used mathematical functions.

40) jquery.biggerlink – A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link.

41) Humanized Messages– It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action (like typing or moving the mouse).

42) Ajax Manager -Helps you to manage AJAX requests and responses (i.e. abort requests, block requests, order responses).

43) Background-Position Animation

44) Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.

Check out their demo page

45) jQuery Tag Suggestion– The same tag suggesting as-you-type support that is uses.

Check out their demo page

Posted by:

Posted by: Miracle Studios | October 11, 2008

Using htaccess Redirect Rule

I will tell you right off the bat that I don’t “get” regular expressions, and I don’t get .htacess rewrite rules. I wish I understood them better, but there’s some part of my brain that just fights me every time I try to get a better all-around understanding. Still, I have to (and want to) do stuff with htaccess, so I end up digging for code online, and trying stuff until something works. I wish I knew more about WHY it worked, but I’m just happy that it works at all. )

Now that I’m done with my disclaimer, on to the point of this post. I had to use a htaccess file to redirect a subdomain to a directory in the main domain. For example: needed to point to

After much digging and trial and error, this seems to work:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^blog\.mysite\.com
RewriteRule ^(.*)$ /blog/$1 [L]

Posted by:

Posted by: Miracle Studios | October 10, 2008

Improve Your User Interface With JavaScript 10 Examples

Javascript can add a lot of special effects that can really improve the user’s experience. Here are 10 simple and clever Javascript techniques that add an extra dose of usability to any webpage.

Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor’s experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.

Javascript is truly a powerful and easy language to learn. It can be used to perform simple, aesthetic functions like toggling an element. It can be used to power a dynamic email client, and even send data instantaneously. Javascript can be as simple or advanced as you want it to be.

Javascript Frameworks

A great place to find Javascript techniques that can improve your site’s functionality is by browsing Javascript frameworks and their plugins and documentation. Here are a few frameworks that have lots of resources, plugins, and communities behind them:

Frameworks are a blessing to any developer or designer who wants to quickly add Javascript effects to their layouts, without having to make raw code. Many of the techniques that we use below will run on Javascript frameworks like JQuery or MooTools.

Simple Javascript Techniques that Make Happy Users

It’s important to note that many of these features aren’t big and obnoxious, but rather small and subtle. Too often developers get carried away when it comes to adding Javascript. These are small but very useful techniques that can be used by almost any developer. You’ll also note that most of these features deal with cleverly hiding and showing important information in non-traditional ways.

1. jQuery Hover Sub Tag Cloud

The jQuery hover sub tag cloud is an excellent example of a simple piece of Javascript that really adds a nice, subtle touch to tag clouds. As the user hovers over a specific tag and it has sub-tags associated with it, a pop-up box appears and shows the sub-tags. Simple, yet effective.

2. Opacity Change

Opacity Change is a little tutorial on how to use Scriptaculous to make an opacity change for an element.

Opacity changes are great for many different reasons: showing hovered content, showing content that has been clicked on, and many other useful functions.

3. Image Upload and Auto Crop

Being able to crop photos after you upload them is a feature that more web applications could use. That’s why the jQuery image upload and crop is such an under-used Javascript technique. Cropping images is a much-needed function when it comes to uploading images, and many web applications could benefit from adding this useful feature.

Honestly, I think that nearly all image uploads could use a basic crop function. However, image cropping isn’t the easiest Javascript function to add to a form. It’s a somewhat involved process, using image libraries and Javascript. Using this script built on the jQuery framework can add a lot to the user’s experience without a bunch of extra code.

4. Password Strength Meter

As hackers become smarter and larger in numbers, it’s becoming more and more important for site users to pick strong, non-guessable passwords that contain a combination of letters (upper and lower case), numbers and special characters. However, this task is easier said than done. Users typically don’t read directions if they can help it.

Visually showing password strength in registration forms is an excellent way to encourage users to make the passwords more challenging. While this is slowly becoming more common this simple technique is not used anywhere near as much as it should be.

The Password Strength Meter works off of prototype/scriptaculous and is a handy little script that shows the strength of the password with a colored meter in real-time. More sites need to implement this type of “safety” script to help users see the dangers of inputting weak passwords.

5. Magic Zoom

Magic Zoom is a highly-useful script for eCommerce sites, as well as other sites that have detailed images. Instead of having the user making an extra click to a much larger picture and use up bandwidth, Magic Zoom allows you to essentially look through a magnifying glass at each picture.

Magic Zoom is a paid script, but well worth the $47 if you have an eCommerce store or any other site that has very detailed photographs. You can download the trial version below.

6. JQuery Autotab

Every single form on the Internet should have this feature. It might just be the perfectionist in me, but having multiple input forms that autotab to the next input automatically seems like it should be commonplace. It’s such a relief when filling out items like social security numbers when the input automatically tabs to the next input.

The jQuery Autotab script is self-explanatory, and does what the name implies: adds autotabs to forms with jQuery.

Sometimes it’s the small things in development that can really make a difference.

7. Incredible Javascript Login Form

While we typically don’t like to toot our own horn at NETTUTS, how can we talk about clever and useful Javascripts without bringing up Connor Zwick’s awesome tutorial on how to build a useful login form?

The Javascript login form is an elegant combination of jQuery and a beautiful Photoshop layout to achieve the effect of being able to show a login form without having the box take up a bulk of the page. Digg is another great example of a site using Javascript to show and hide the login form.

8. Context Highlighting Web Forms

Forms are some of the hardest parts of web design. Make a form too long and you might scare away a potential user or customer. If a form’s design is unattractive, that might scare away a potential user as well. Any way that we can make our web forms more appealing to the eye will yield a higher sign-up conversion rate.

The context highlighting web forms script is an excellent attribute to add to a signup form. It’s surprising that more forms don’t offer this functionality. Being able to quickly see the progress on a form can noticeably improve the user experience.

9. Sliding Top Panel

The Sliding Top Panel script is a lot like the Incredible Javascript Login Form. Hiding/Showing important information is a key to beautiful, usable designs. Any time we can use Javascript to help keep unneeded information neatly packed away, we should be striving to do that.

10. Social History

Site promotion buttons and links can quickly clutter a site or blog’s layout. It seems that if you want to promote your blog posts and other content on sites like Digg and Delicious, you have to add a long list of buttons to your template so that you don’t exclude anyone’s favorite social bookmarking or news site.

Social History comes in handy because it runs a test to see where the user has been recently, and loads images to those sites, and only those sites. Essentially, it’s only showing the visitor the buttons that they would want to see.

How does SocialHistory.js know? By using a cute information leak introduced by CSS. The browser colors visited links differently than non-visited links. All you have to do is load up a whole bunch of URLs for the most popular social bookmarking sites in an iframe and see which of those links are purple and which are blue.

Posted by:

Posted by: Miracle Studios | October 10, 2008

Javascript Encription Method

A very simple encryption method that uses random values for each character. Interestingly, you can encrypt the same string as many times as you want and the result will always be different. Best used with short strings.

<script type=”text/javascript”><!–
function Encrypt(theText) {
output = new String;
Temp = new Array();
Temp2 = new Array();
TextSize = theText.length;
for (i = 0; i < TextSize; i++) {
rnd = Math.round(Math.random() * 122) + 68;
Temp[i] = theText.charCodeAt(i) + rnd;
Temp2[i] = rnd;
for (i = 0; i < TextSize; i++) {
output += String.fromCharCode(Temp[i], Temp2[i]);
return output;
function unEncrypt(theText) {
output = new String;
Temp = new Array();
Temp2 = new Array();
TextSize = theText.length;
for (i = 0; i < TextSize; i++) {
Temp[i] = theText.charCodeAt(i);
Temp2[i] = theText.charCodeAt(i + 1);
for (i = 0; i < TextSize; i = i+2) {
output += String.fromCharCode(Temp[i] – Temp2[i]);
return output;
// –></script>

The quick brown fox jumps over the lazy dog

Posted by:

Posted by: Miracle Studios | October 10, 2008

All New JavaScript Editor With Intellisense

1st JavaScript Editor Pro is advanced JavaScript Editor, Validator and Debugger for beginners and professionals!

Beside rich possibilities of editing scripts (JavaScript, HTML, CSS, VBScript, PHP and ASP(Net) syntax highlighting, etc) and the built-in preview, the program offers large snippets library with full collection of HTML tags, HTML attributes, HTML events, JavaScript events and JavaScript functions, attributes, statements and operators (such as window, document, frame, history, location, navigator, date, math, string, etc – at whole over 1200), allowing you to insert them into web page by click.

Built-in JavaScript Debugger will allow you run and debug JavaScript Code.

1st JavaScript Editor is used for professionally editing JavaScript code and creating animations and other special effects for Web pages using DOM, DHTML, CSS, Ajax (Asynchronous JavaScript and XML) and JavaScript.

Ajax Editor AJAX developers can easily use this program as advanced Ajax Editor.

This advanced JavaScript Editor can help you navigate through code using built-in “Functions and Variables” navigator.

First JavaScript Editor uses Intellisense to simplify writing of code and make it more error-free.

 IntelliSense provides an array of options that make language
references easily accessible.

 It works by monitoring your keystrokes and offering pick-lists with
member functions, methods and properties.

 When coding, you do not need to leave the code editor to perform
searches on language elements. You can keep your context, find the
information you need, insert language elements directly into your code,
and even have IntelliSense complete your typing for you.

The special effects are pre-made for your use. Yaldex advanced JavaScript Editor makes it easy to insert them into your Web pages automatically or manually.

First JavaScript Editor Pro allows you to input parameters and properties for the different special effects and then creates the HTML and JavaScript code with a click of a button! The HTML and JavaScript code can be then inserted into your document automatically! It’s that simple!

As Ajax Editor the program can assist you with unique tools and Intellisense for Ajax objects.

Moreover, First JavaScript Editor Pro contains JavaScript tutorial, Ajax tutorial, HTML tutorial, CSS tutorial, CSS reference, JavaScript reference and HTML reference.

The program is designed for beginning and advanced WWW page creators. Beginners will find invaluable source of attractive and ready-to-use special effects there and will be able to place them on a page easily. Professionals, however, have at last the first specialized tool allowing them to create, edit and test DHTML scripts.

Context help (Shift+F1) gives you access to over 2000 methods, properties, events etc. of DHTML! Just place cursor on any word in the advanced JavaScript Editor then press Shift+F1 and get description (with examples) of almost any object of JavaScript, HTML, CSS and DHTML.

One of the most important features is a unique library containing over 200 ready-to-use controlled scripts and in addition, over 700 not controlled scripts for professionals!

1st JavaScript Editor

Features that make JavaScript editing in 1st JavaScript Editor very flexible:

Built-in JavaScript Debugger will allow you run and debug the code, one line at a time, and each time, either adding extra code on the fly (without editing the original file), or checking how variables change in the run of the program.
You can debug JavaScript files, Web pages which contain embedded scripts or even selected text (if it is JavaScript).

JavaScript Debugger

Unified color-coded syntax – for JavaScript, HTML, PHP, VBScript, CSS, ASP(Net). You can immediately identify comments, functions, object, methods and other elements. Color also helps you with potential problems, for example Alert(’hi’) and alert(’hi’) is not the same thing in JavaScript.

Ability to experiment – unlimited (customizable) Undo and Redo are only one click away.

Save time by loading your recent files automatically next time you run the program.

Single-click navigation between documents using document tabs.

Go to declaration:

Go to declaration

Navigation to a declaration has been extended in First JavaScript Editor, and now (in addition to functions, variables, etc.) it is also supported for JavaScript labels.

Use the Ctrl + Click combination and this will immediately navigate you to the line of code where the label, function or variable is declared.

Line numbers and word-wrap. Optionally, you can have line numbers and word-wrap displayed

Highlighting matching curly braces. There are two ways to highlight:
a) by placing caret before brace
a) by placing mouse over curly brace
So you are able to
highlight two pairs of matching curly braces at the same time!!!

Highlighting matching curly braces

Block Comments. You can comment a section of JavaScript code by selecting the code in the Code Editor and pressing CTRL+/ (slash). Each line of the selected code is prefixed with //.
CTRL+/ will add or remove the slashes, based on whether the first line of the code is prefixed with //.

Press [CTRL+/] to comment selected text

Comment selected text

or uncomment selected text

Uncomment selected text

1st JavaScript Editor uses Intellisense to simplify writing of code and make it more error-free.
IntelliSense provides an array of options that make language references easily accessible. It works by monitoring your keystrokes and offering pick-lists with member functions, methods and properties. When coding, you do not need to leave the code editor to perform searches on language elements.

You can keep your context, find the information you need, insert language elements directly into your code, and even have IntelliSense complete your typing for you.

There are three patterns of IntelliSense in First JavaScript Editor:

CSS IntelliSense

CSS IntelliSense

There are two ways to use Intellisense in CSS section of HTML document (beetween

tags) or in CSS document:

  1. Press SPACE or ENTER to get IntelliSense.
  2. Place cursor on ready property and press Ctrl+SPACE.

HTML IntelliSense

HTML IntelliSense

There are five ways to use Intellisense in HTML document:

  1. Press “< ” to produce IntelliSense for HTML tags.
  2. Place cursor on HTML tag and press Ctrl+SPACE.
  3. Press SPACE to produce IntelliSense for HTML properties or events.
  4. Place cursor on HTML property or event and press Ctrl+SPACE.
  5. Place cursor on Value and press Ctrl+SPACE.

Note, each HTML tag and attribute has own IntelliSense!

JavaScript IntelliSense

JavaScript IntelliSense

There are twelve ways to use Intellisense in JavaScript section of HTML document (beetween tags) or in JavaScript document:

  1. Press Ctrl+SPACE to get IntelliSense.
  2. After entering a property or object, type dot ” . “.
  3. Place cursor on ready property, object or method and press Ctrl+SPACE.
  4. Write method, which has some parameters, and type bracket “(“.
  5. To get IntelliSense for functions and statements press Ctrl+J.
    To get
    autocompletion, type the first letters of statement (for example for function type func) and press Ctrl+J.
  6. Intellisense removes now the need to memorize thousands of functions, objects, members, and properties.
    It constantly monitors your keystrokes (no longer waits for ‘.‘ to be typed) to assist you with pick-lists of JavaScript and user-created objects.

    Just type

    the first two letters of your object to get IntelliSense. You can disable this feature by unchecking the “AutoIntellisense” option in then Preferences dialog.

  7. JavaScript Editor can now recognize user-created objects and give you Intellisense for only this type of object.
  8. Place mouse over a method or object, which has some parameters and First JavaScript Editor gives you hint with description of this method.
  9. JavaScript Classes

  10. Now you can create your own classes and program can recognize properties and methods for your classes.
  11. Each time you use the “getElementById” method, you must check the HTML file to see what the exact ID is. JavaScript Editor helps in this task by inspecting HTML file and suggesting a list of ID’s.
  12. getElementById

  13. When you use “getElementById” method, JavaScript Editor can recognize HTML tag and propose exact IntelliSenses for that tag.
  14. And even more! You can now create variable, which is assigned to some ID element and use it with exact IntelliSenses for that tag.

Context-sensitive help : just press Shift + F1 to receive help on the function, method, property or any word under the cursor. Without this, you would have an impossible task of memorizing hundreds of functions you can call and the parameters you can pass to them.

Bookmarking for easy and fast navigation.

Find functions and variables in your documents easily – they are automatically listed.
The application finds the function or variable, scrolls to it and marks it.
There are three ways to sort functions and variables: ascending, descending and none.

functions and variables

Code formatter. If you use some codes from external sources with different coding styles and standards you probably know how it is hard to read and maintain these codes.

To help you in this matter, 1st JavaScript Editor has an excellent source code formatter / beautifier, which allows you to customize and apply any style you want.

You can format embedded JavaScript code (any web file), pure JavaScript (JS file) or selected text (don’t forget to select only JavaScript!).

JavaScript Formatter

Add files tab.
This tab allows you to add any file(s) to any project.

What is it used for?

When you edit, for example, JavaScript file you have not access to functions, variables, classes and so on, located in other files.

So you cannot get all power of IntelliSense, dynamic hints and “go to declaration” feature.

By adding files to project you have all access to content of checked files.

You can remove any file from project by clicking Remove button.
You can also temporary exclude any file(s) by unchecking corresponding checkbox.
Note, adding of files can cause significant slowing down of IntelliSense!

Add files

Clipboard panel allows you to get all clipboard copy actions (up to 30).
You can define the limit from Preferences dialog.
To insert a clipboard content double-click or drag & drop to active window.


Usages highlighting.

Usages highlighting

If you are interested in usages of any JavaScript word in the current document, try the Ctrl + Shift + F11 shortcut. All usages will be highlighted.

Using F11 and Shift + F11 you can quickly navigate highlighted usages back and forth. Pressing ESC you can unhighlight highlighted usages.
You can access all these actions via menu EDIT –> USAGES.

Now you can use First JavaScript Editor with other HTML editors (f.e. Dreamweaver or Front Page) You simply open your document with both tools. Whenever you save the page in Dreamweaver, 1st JavaScript Editor proposes you to re-load it. This makes it easy to switch between visual editing and writing code.


Have your script error-free code in record time. Unless your code is very simple, it usually has typing and other errors. How to you find them and correct them? Without the right tools, this is a doubting task that can take up most of your time. It is not uncommon to spend 10% of time coding new features, and 90% chasing errors !

1st JavaScript Editor includes unique tools that allow you to avoid the bug-finding frustration and focus on development instead of wasting your time:

Up until now the only way to hunt errors in your code was to run it in a web browser, then navigate to the offending line number. You no longer need to waste your time:

Button Click on the HTML Syntax Check button
It will check html syntax for current document and displays the result in the “Output window”.

Output window

Button Click on the JavaScript Syntax Check button
It will check JavaScript syntax for current document and displays the result in the “Output window”.

Output window

In addition, you can easily check “JavaScript islands” in your HTML code: just use the mouse to highlight the code, and click on JavaScript Syntax Check.

Button Run any piece of JavaScript code with one click
How does it work? This is a case when an example goes a long way:
Have a look at a simple example below:

Running example

When you click on the Execute button (or press F2), the interpreter built into 1st JavaScript Editor runs the code and raises some messages or displays the result of the write function in the “Output window”:

Calling any JavaScript functions either from document or from browser.

Calling any JavaScript functions
This feature allows you to:
– Call any JavaScript function straight from 1st JavaScript Editor
– Pass parameters to it, and
– Observe the result in “Output window” or by getting messages.

Example of Calling any JavaScript functions

Type-in templates, for JavaScript functions and statements, are reusable chunks of code which at least double your coding speed . Just type the first few letters of the template and press Ctrl+J : this will pop a list with all the matching templates:

Type-in templates

Publish your colored code with ease.

When you publish your code on the Internet or elsewhere, it is a good idea to preserve the color coding and formatting. It makes your JavaScript code much easier to read and understand.

To this aim, use First JavaScript Editor to export your files:
As web pages, for placing them on the Internet, or as RTF files, for use in Microsoft Word or other text processors.

Previewing using multiple browsers: Now you can add or remove any (quantity of) browser located in your computer to “Browser List”, to preview an HTML page from First JavaScript Editor.

Editing a source code outside First JavaScript Editor using multiple editors: Now you can add or remove any (quantity of) editors located in your computer to “Editors List”, to edit code outside 1st JavaScript Editor.

  Note!!! The 1st JavaScript Editor "Demo" is the same for lite and
professional versions and this is 1st JavaScript Editor Pro "Demo".

  But if you buy the lite (not professional) version of
1st JavaScript Editor and enter received registration code,
the IntelliSense will not be available and you cannot use this feature.

  So, if you want to use all possibilities of 1st JavaScript Editor you
should buy the Pro (professional) version . 
   Attention for Vista users!
   If you have installing or running problems you have to turn off
the DEP (Data Execution Protection) for 1st JavaScript Editor.

   This is done in Vista's 'Advanced System Settings' by clicking the Performance
Settings button followed by the 'Data Execution Protection' tab and selecting
'Turn on DEP for all programs and services exept those I select'.
Next click the 'Add' button and browse to fJSE.exe.
After this the system has to be re-booted.


Any windows.

Download 1st JavaScript Editor Pro (Zip 7.02 MB)

Buy 1st JavaScript Editor Pro Now! (only $49.90)

Posted by:

Posted by: Miracle Studios | October 9, 2008

Building Dynamic Menus In wordpress

More and more people are using WordPress as a Content Management System (CMS), and for good reason. It’s well supported, produces good mark-up, and it’s flexible. But when using it as a CMS it suddenly becomes very important to optimize the support of WordPress “Pages.” Unlike post, archive, and category links, a web site’s “Pages” have the utmost importance. This article will teach you how to produce a dynamic WordPress “Pages” navigation menu that looks good and behaves as a main navigation menu should.

To Begin With…

The first thing to consider is placement. For a vertical menu I would suggest placing the code I will supply in the sidebar.php file under the “sidebar” div if you have one. And if you’re going for a horizontally-displayed navigation menu I suggest adding the code in the header.php file underneath your main heading.

The Markup

Here’s the mark-up you will want to place in your file of choice.

<ul id="nav">

 <li class="current_page_item"><a title="You are Home" href="<?php echo get_settings('home'); ?>">Blog Navigation</a></li>

 <li><a title="Click for Home" href="<?php echo get_settings('home'); ?>">Blog Home</a></li>

 <small id="code4"><!--<a href="#note4" mce_href="#note4">See Note 4--></small>

 <li><a class="rss" title="Really Simply Syndication" rel="alternate" href="<?php bloginfo('rss2_url'); ?>">RSS Feed</a></li>


Markup Notes

Now to explain what’s what in the script above.

Note 1
I first identify the menu with a “nav” ID. This isn’t needed for styling since WordPress generates the list-item classes in its core, but I’m using it anyway as it serves two purposes. The “page_item” class doesn’t really need to be there. Go with it; editing core files isn’t advisable as it’ll impede upgrading WordPress. The main reason I offer this is to use #nav as a fragment identifier so as to use it as a bookmark link target for a “Jump to Navigation” link: Jump to Navigation (Code 1)
Note 2
This is a bit of page negotiation since I want the menu to have a home page link — something not provided on the page list by default. When you’re on the index this will say “Blog Navigation” and be styled as a current page link, but if you’re on any other page, including a “paged” home (when you view older posts via a page turner link), the link will say “Blog Home” instead and will look clickable instead of like the “current page” style. (Code 2)
Note 3
This is the meat and potatoes so to speak. This is the code for the dynamic menu produced by the WordPress core. This will produce page links in list item tags:

  • . Each will bear the “page_item” class except the current page where it’ll also bear the “current_page_item” class. I use only the latter. This conditional tag has two parameters in the function:
    1. sort_column=menu_order — This allows you to use the page ordering feature built into WordPress. This ensures you can put your page links in an order you deem logical.
    2. title_li= — This parameter can contain data such as


      . If it is removed, the word “Pages” will display between the dynamic links and the home page link. If the

      heading elements are left blank the word “Pages” will display in the same spot. This would be okay if there was no home page link but that’s not the case, so I give the whole parameter a null value. I could give it a “0” (zero) I suppose. (Code 3)

  • Note 4
    This last link is optional. Use it if your want a prominent link to your Really Simple Syndication or RSS feed. I give this link a special “rss” class so I can give it a unique background image in the style sheet. I add it to the “ul#nav” selector in the style sheet so the same attributes and properties are applied. I then give it a background image in a new CSS block — I’ll show you what I mean next. (Code 4)

    Styling the List

    What follows are some styles for your Cascading Style Sheet (CSS). These styles will produce block-level links in the vertical format. You can modify these styles to get your desired look, add backgrounds, change colors, anything you wish. To make it a horizontal menu you’ll want to float it left (right reverses the order so you’ll have to modify the scripting and markup) and list items will need the display property, “inline.” You can also give the unordered list a width and center it with margin-auto. You will also want to center-align the text, probably…

    Nonetheless, this will offer you a simple copy and paste beginning. (All of this should be put in a container div of 200 pixels with 10 pixels of padding unless you decide to modify dimension and/or units, or you’re doing the horizontal thing.)

     /* This styles the unordered list element to remove bullets and align the text */
    ul#nav {
    list-style-type : none;
    text-align : right;
    This styles the links. It’s a block-level link and the text is positioned
    with padding. Other styles are defined: width, colors, text attributes, etc.
    ul#nav a, ul#nav a.rss {
    background-color : #d3d3a7;
    padding : 15px 5px 2px 10px;
    margin-bottom : 10px;
    width : 180px;
    height : auto;
    color : #333;
    font-weight : bold;
    font-style : normal;
    display : block;
    text-decoration : none;
    /* This gives the “rss” class link a background image */
    ul#nav a.rss {
    background : #d3d3a7 url(images/rss.jpg) no-repeat 2px 2px;
    /* This is only necessary for IE6 else the link margins will collapse on hover */
    ul#nav li {
    margin-bottom : 10px;
    /* This removes the default left margin (indentation) */
    ul#nav li {
    margin-left : 0;
    Now to offer some hover and focus styles. Further specification of focus/active styles
    could be added but I didn’t do it in this example. I didn’t feel it was needed
    ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
    background-color : #669900;
    color : #fff;
    /* This offers up a hover/focus state image for the “rss” class link */
    ul#nav a.rss:hover, ul#nav a.rss:focus {
    background : #669900 url(images/rss_on.jpg) no-repeat 2px 2px;
    This style the single state of the “current_page_item” class link. Not needed for
    the “rss” class link since that target page won’t display the menu
    ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,
    ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
    background-color : #9e9e55;
    color : #fff;
    cursor : default;
    text-align : left;


    Here’s some general info.

    • You could add to the style info above to support child pages, or sub-pages, but the CSS I provided doesn’t support that link type in a special way — the subpage links and the current page link will both be marked the same way.
    • You could also modify the script part of this menu if you had a static home page. Please note, however, that I’m not sure if a modification is needed to tell the truth. I haven’t tried it in such an application. You tell me.
    • What I have on this site is custom made because I currently have several non-WordPress pages. Thus, if you want to see an example of this menu, please check out the sidebar on my BeastBlog v.2.0 theme support blog, but please know that it is slightly different than what I’m offering here. I added a “btn” class in addition to the “nav” ID. Doing it this way allows advanced theme users — since the theme is publically available — the ability to easily give additional menus the same styling via the “btn” class (because IDs must be unique on any given page while classes can be used repeatedly).
    • In my example, when on the home page, I offer a link. This doesn’t have to be the case. A heading in a list item could be styled, plain text could be offered, what ever you want. I chose to do this instead. Laziness.

    Posted by:

    Posted by: Miracle Studios | October 9, 2008

    Get Started with PHP in FileMaker Pro


    Get Started with PHP in FileMaker Pro

    Leverage the power of PHP, a server-side scripting language, to speed and secure Web queries.

    By Bob Bowers, Contributing Editor

    Posted by:

    Posted by: Miracle Studios | October 9, 2008

    FileMaker® API for PHP Tutorial


    Welcome to the FileMaker API for PHP Tutorial

    This tutorial demonstrates key functionality of the FileMaker API for PHP. The tutorial consists of 6 lessons designed to teach you how to use the API to integrate a FileMaker Pro database with a PHP web application. Each lesson introduces a particular capability of the API, explaining how the code is written and how it works.

    The tutorial database is a FileMaker questionnaire system (questionnaire.fp7). Each questionnaire record can have multiple related questions. Each question can have multiple related answers. Only one questionnaire is selected to be the active questionnaire. The active questionnaire is the one users are invited to take when using the PHP web application.
    When a user completes an online questionnaire, the system adds a respondent record for the user and adds the user’s answers as related records.

    The tutorial completes a PHP web application gradually, each lesson building upon the previous lesson as follows:

    • Lesson 1
      • Setting up the FileMaker database object
        • What is necessary for me to prepare the FileMaker database object for use in my own custom web applications?
      • Perform Find All
        • How can I find all records in a database and display them on the web?
      • Perform Find
        • How can I find a particular record in the database and display it on the web?
    • Lesson 2
      • Display Container Images
        • How can I display web-compatible images in container fields on my website?
      • Use the ContainerBridge.php
        • What is the ContainerBridge.php file and how does it work?
    • Lesson 3
      • Display FileMaker Value Lists
        • How can I display FileMaker custom value lists on the web?
      • Add Records
        • How do I add records to a FileMaker database from a submitted web form?
    • Lesson 4
      • Get Record by ID
        • How can I retrieve a FileMaker record by its internal ID without performing another find?
      • Get Related Set (Portal)
        • How can I display records from a FileMaker portal on my website?
    • Lesson 5
      • Add Related Records
        • How can I add records to a portal from my website?
    • Lesson 6
      • Review of Get Related Set (Portal)
        • How can I display records from a FileMaker portal on my website?
      • Customize Format with Cascading Style Sheets

        • How can I change the look of my HTML output using Cascading Style Sheets?

    This tutorial doesn’t cover all of the API. However, after you complete these lessons, you will have a good foundation. To discover more about the API, see the FileMaker API for PHP documentation.

    To view the FileMaker API for PHP documentation, go to the FileMaker Server Admin Console Start Page and click “PHP Site Assistant and XSLT Site Assistant Tools.” On the Web Publishing Tools page, click “FileMaker API for PHP Documentation.” Use the documentation as a reference while you complete this tutorial. This reference will help you discover how to use the FileMaker API for PHP more completely.

    You should also become familiar with the questionnaire.fp7 database. Discover how it works and how questionnaires are built by creating questions with multiple answers. Your knowledge of the questionnaire.fp7 design will be an integral part of understanding how the tutorial PHP application uses the API.

    Getting Started

    Setup and Installation

    You must have FileMaker Server 9 installed and it must host the questionnaire.fp7 database. The tutorial folder must be hosted on the web server machine that is part of your FileMaker Server deployment.

    For more information on the installation and deployment of FileMaker Server 9, see the FileMaker Server Getting Started Guide. For more information about the FileMaker API for PHP, see FileMaker Server Custom Web Publishing with PHP.

    Suggested Knowledge and Skills

    You should be familiar with HTML programming. This includes HTML declarations, headers, and element tags. If you need more information on programming web pages with HTML, see the XHTML Tutorial at W3Schools.

    You should be familiar with PHP programming. This includes standard output, variables, arrays, conditional loops, objects, methods, and functions. For more information on programming with PHP, see the PHP Tutorial at W3Schools.

    You should be comfortable using a text editor with HTML and PHP. This tutorial requires the use of a text editor to view and modify HTML and PHP code.

    You should have a working knowledge of FileMaker Pro database design. This includes fields, relationships, layouts, portals, and containers. For more information on designing databases with FileMaker Pro, see the FileMaker Pro documentation.

    Best Practices

    When editing records in FileMaker Pro, remember to exit or commit the record in order for changes to take effect. Web pages do not reflect changes entered into the database until the record has been exited.

    To view the PHP pages of each lesson in your web browser, you must supply the fully qualified URL in order for the PHP code to execute. For example, if the files are hosted on your local machine, point your browser to a URL that starts with “http://localhost/…&#8221;. Do not use the local file path which may start with “file:///Volumes/…”. Using a “file://” URL results in the display of PHP code, not the execution of PHP code. Always make sure the URL begins with “http”, or “https” if you have set up SSL on your web server.

    Lesson 1


    Lesson 1 details the essentials for using the FileMaker API for PHP in two PHP files: home.php and dbaccess.php. The home.php file serves as a web browser starting point, and the dbaccess.php file sets up a FileMaker object that represents the database. These pages show the basic steps for instantiating the FileMaker database object, setting its key properties, and performing a find on the questionnaire.fp7 database.


    To view the tutorial example, direct your web browser to home.php located inside the Lesson1 folder. This page displays the welcome screen for the FileMaker Questionnaire System. When the page loads, a connection occurs behind the scenes between PHP and the Web Publishing Engine, resulting in a found record from the questionnaire.p7 database.

    Using your text editor, open the file home.php inside the Lesson1 folder. Locate the following code just after the body tag.

    <?php include (“dbaccess.php”); ?>

    This PHP statement includes, or loads, the dbaccess.php file. The dbaccess.php file contains functions which set up the FileMaker database object and prepare it for database operations. Consequently, API methods in home.php will not work without it. Although the methods in dbaccess.php could have been written in the home.php file, they have been separated for easier debugging and maintenance.

    Set up the FileMaker Database Object

    The dbaccess.php file contains code for setting up the FileMaker database object. It plays a fundamental role in building the questionnaire application. Follow these steps to set up the FileMaker object:

    1. Load the FileMaker API for PHP
    2. Assign an instance of the FileMaker database class to a variable
    3. Set key properties for the new FileMaker instance

    Using your text editor, open the file dbaccess.php located in the Lesson1 folder and follow the description of each step below.

    1. Load the FileMaker API for PHP

    To use the FileMaker API, it must first be loaded into PHP memory. This is done with the require statement.

    require_once (‘FileMaker.php’);

    Once loaded, you can create instances of the FileMaker database class, using them for database connections in your web application. An attempt to use the API without loading it first will result in an error.

    2. Assign an instance of the FileMaker database class to a variable

    An instance of the FileMaker database class must be created before it can be used. It must also be assigned to a variable to refer to it in the code.

    $fm = new FileMaker();

    The above code creates an instance of the FileMaker database object. It is referred to as the variable $fm.

    3. Set key properties for the new FileMaker instance

    The FileMaker database object has a set of properties which can be set at any time. Some properties, however, must be set before database operations can occur. Here is the code which sets the properties required for this tutorial.

    $fm->setProperty(‘database’, ‘questionnaire’);

    $fm->setProperty(‘username’, ‘web’);

    $fm->setProperty(‘password’, ‘web’);

    Note – The database name questionnaire does not need the fp7 extension added in the parameter.

    Note – See the FileMaker API for PHP documentation for a list of the FileMaker database class properties and their descriptions.

    The dbaccess.php file contains very little code, but it effectively prepares the Filemaker object for use. After the file is loaded, the FileMaker object is useable as the variable $fm and key properties are set to their required values. The dbaccess.php file enables the home.php file to communicate with the questionnaire.fp7 database.

    Perform Find, Perform Find All

    The home.php file performs two database operations: Find All (Show All Records) and Find. To view the code for these operations, open the home.php file in your text editor. To view the database for these operations, open the questionnaire.fp7 file that you hosted on FileMaker Server.

    1. Find All (Show All Records)

    The questionnaire.fp7 database contains a layout called Active Questionnaire. This layout serves as an interface; it contains only one record in the table. On this layout, users select which questionnaire is the active questionnaire. The web application needs to retrieve the ID of this active questionnaire.

    The active questionnaire ID is retrieved by performing a Find All (Show All Records) on the layout Active Questionnaire. This operation uses the command object FileMaker_Command_FindAll.

    Note – See the FileMaker API for PHP documentation for a list of command objects and their methods.

    An instance of the FileMaker_Command_FindAll object is created by having the $fm (FileMaker database instance) execute its newFindAllCommand() method, specifying (in parenthesis) the name of the layout Active Questionnaire. The layout determines which table occurrence is used (context) and which fields are returned (results).

    The FileMaker_Command_FindAll instance must be assigned to a variable as the following example shows.

    $findCommand = $fm->newFindAllCommand(‘Active Questionnaire’);

    The above code assigns a new FileMaker_Command_FindAll object to the variable $findCommand. The Find All command is performed with the execute() method. The find results must be assigned to a variable.

    $result = $findCommand->execute();

    It is possible, after executing a command, that an error will occur. If an error does occur (or no matching records are found), the $result variable is assigned a FileMaker_Error object. Use the following code to check for the FileMaker_Error object. The error message is displayed by using the getMessage() method.

    if (FileMaker::isError($result)) {

    echo “<p>Error: ” . $result->getMessage() . “</p>”;



    If no error has occurred, the variable $result contains an array of FileMaker_Record objects, one for every record in the found set. Use the $result variable to retrieve the first record in the Find All result. Because PHP arrays are indexed numerically by default, you can get the first record by using the following code.

    $record = $records[0];

    This code assigns a FileMaker_Record object containing the first record in the found set to the variable $record. You can retrieve the contents of the questionnaire_id from this record by using the getField() method. The results of the getField() method must be assigned to a variable.

    $active_questionnaire_id = $record->getField(‘questionnaire_id’);

    This variable now contains the ID of the active questionnaire. The next step uses this variable as a parameter in the next find.

    Note – See the FileMaker API for PHP documentation for a list of objects and their methods.

    2. Find

    Now that you have the ID of the active questionnaire, you can use it to Find the questionnaire record. The code for performing this operation is located near the bottom of the home.php file. The operation uses the command object FileMaker_Command_Find.

    An instance of the FileMaker_Command_Find is created by having the $fm (FileMaker database instance) execute its newFindCommand() method, specifying (in parenthesis) the name of the layout Active Questionnaire. The layout determines which table occurrence is used in the find and which fields are returned in the results.

    The FileMaker_Command_Find instance must be assigned to a variable as the following example shows.

    $findCommand =& $fm->newFindCommand(‘questionnaire’);

    To add criteria to the find, use the addFindCriterion() method. The addFindCriterion() method takes two parameters: fieldName and searchParameter. Pass the “Questionnaire ID” field name (as defined in FileMaker Pro) and the variable $active_questionnaire_id as parameters.

    $findCommand->addFindCriterion(‘Questionnaire ID’, $active_questionnaire_id);

    Note – The addFindCriterion() method can be called multiple times, simulating the logical AND which occurs when entering multiple find criteria into a single find request within FileMaker Pro.

    After the find criteria have been added, the execute() method is used to perform the find. The results of the execute() method must be assigned to a variable.

    $result = $findCommand->execute();

    The $result variable now contains an array of FileMaker_Record objects. Because the find was performed on the layout questionnaire, each record in $result contains the values for every field on the questionnaire layout.

    The final code in this page uses PHP echo statements and the getField() method to output the Questionnaire Name and Description fields on the home.php page.

    Lesson 2


    Lesson 2 covers the code required to display FileMaker Pro container images on the web. If you store web-compatible images in a FileMaker Pro database, you can use the FileMaker API for PHP to retrieve those images and display them on your web site.


    Open the FileMaker API Tutorial database questionnaire.fp7 and make sure that the active questionnaire has a web compatible image in the container field. Next, view the PHP tutorial example by opening the Lesson2 home.php file in your web browser. Notice the page displays the image of the active questionnaire. Try changing the container image in the FileMaker database. Make sure you exit the record when you are done. Refresh your browser and watch the website update with the new image.

    Display Container Image

    To see how the API is used for this operation, open the file home.php in the folder Lesson2. View the last PHP statements in the file, paying particular attention to the <img> (image) tag and its src (source) attribute.

    Please note the following points regarding this technique.

    1. The container field Graphic is on the layout questionnaire (which is the layout of the previous find). Remember, only values from fields on the layout used for the find are returned to the API.
    2. The value of the Graphic field returned is not an image, but a special URL which requests the image from the Web Publishing Engine.

    echo ‘<img src=”ContainerBridge.php?path=’ . urlencode($record->getField(‘Graphic’)) . ‘”>’;

    Because an HTML <img> (image) tag must have a file path as its src (source) attribute, this lesson uses a separate file to actually retrieve the image. The file that retrieves the container image is called ContainerBridge.php, and its filename appears inside the src (source) attribute of the <img> (image) tag.

    The ContainerBridge.php file does not know which image you want displayed. To specify the image, you must append the Graphic field value to the end of the src (source) URL. In HTML, this is called the GET method.

    Using a name/value pair, and starting with a question mark, concatenate the desired string. The name is set to “path” and the value is set to the getField() method result, passing the name of the container field (Graphic) in parenthesis.

    Note – The getField() result is passed to the PHP urlencode() function to ensure that special characters are correctly encoded for a URL.

    Using ContainerBridge.php

    Using your text editor, open the file ContainerBridge.php in the Lesson2 folder. This simple script uses the getContainerData() FileMaker_Record method to retrieve the actual image.

    For getContainerData() to work, you must pass the field results from getField() (of a container field) to the getContainerData() method in parenthesis. In home.php, the result from getField() for the Graphic field was passed through the URL. In ContainerBridge.php, the result is retrieved from the URL via the path element of the $_GET array and passed to the getContainerData() method.

    echo $fm->getContainerData($_GET[‘path’]);

    The ContainerBridge.php file simple retrieves the path of the specified image from the FileMaker Pro database so that the home.php file can use it in the <img> tag to display the image in the web browser.

    Note – See the FileMaker API for PHP documentation for a list of FileMaker_Record object methods.

    Lesson 3


    Lesson 3 covers the code required to create a dynamic web form using FileMaker layout objects. It also discusses the code required for adding a new FileMaker record from a web form submission. This lesson uses two additional PHP files: Respondent.php and handle_form.php. The Repondent.php file serves to dynamically generate a web form, while the handle_form.php file is used to validate form entries and enter them into the questionnaire.fp7 database as a new record.


    Open the questionnaire web site by pointing your browser to the home.php file in the Lesson3 folder. This version of the page displays a Continue button for you to start the questionnaire application. When you click the Continue button, you are redirected to the Respondent.php file. Enter your information into the web form and click Submit; retry if you did not enter enough information. When your form validates, you see the Thank You message and the information you entered is added to the questionnaire.fp7 database as a new record.

    Retrieve Value List Items

    To view how this application works, open the Respondent.php page in your text editor. Note that the dbaccess.php file is included near the top. As discussed in Lesson 1, this include statement ensures that you have an instance of the FileMaker database class, and that the instance can be used as the variable $fm.

    Notice the Respondent.php radio button form element called “prefix”. This element derives its values from the questionnaire.fp7 FileMaker Pro database by using its value list of the same name. This technique allows you to build a dynamic form element based on a value list defined in the FileMaker database. In this way, you don’t have to update your PHP code every time the value list changes in the database. This technique is implemented in the following steps:

    1. Retrieve a layout object via the getLayout() method (passing the layout name in parenthesis)
      • The getLayout() method returns a FileMaker_Layout object
    2. Retrieve the value list values via the getValueList() method
      • getValueList() is a method of the FileMaker_Layout object
    3. Loop through the array of values and output each as a radio button

    When using this technique, remember that the layout specified must contain a field which is formatted by the value list specified. If a value list is requested with the getValueList() method, and the value list has not been formatted to any field on the layout specified with getLayout(), an error will result. Here is the code which is used to display the dynamic radio buttons.

    $layout =& $fm->getLayout(‘Respondent’);
    $values = $layout->getValueList(‘prefixes’);
    foreach($values as $value){

    echo ‘<input type= “radio” name= “prefix” value= “‘. $value .'”>’ . $value . ‘ ‘;

    Note – See the FileMaker API for PHP documentation for a list of FileMaker_Layout object methods.

    Note – The form in Respondent.php also contains several hidden form elements. One named “active_questionnaire_id” contains the questionnaire ID from home.php. This form passes the ID into handle_form.php where it will be used in Lesson 4.

    Add New Record

    When the Respondent.php form has submitted the data, values are passed to the action page handle_form.php via the POST method. Using your text editor, open the handle_form.php file located in the Lesson3 folder.

    Notice that the user-submitted data is assembled into an array and assigned to the variable $respondent_data. In this associative array, the Key for each element is the exact name of the FileMaker field that the data is to be posted to. The Value of each element corresponds to the values submitted from the HTML form element within the $_POST array. This $respondent_data array is used by the FileMaker object when creating the database record.

    After assembling the data array, the PHP code performs some simple validation checks. These validation methods use PHP code explicitly; there is no validation performed by FileMaker Server during this operation.

    After the user data passes validation, a new record can be created in two simple steps:

    1. Create a new FileMaker_Command_Add object, passing two parameters:
      • layout name (the layout must have the necessary fields on it)
      • data array ($respondent_data)
    2. Add the record with the execute() method

    $newRequest =& $fm->newAddCommand(‘Respondent’, $respondent_data);
    $result = $newRequest->execute();

    Remember, when creating a new FileMaker_Command_Add object, you must specify the name of the layout. The layout name determines which table occurrence is used (context) and which fields are returned (results). The fields used to enter data must be on the layout.

    In Lesson 4, the handle_form.php page will be augmented to use the added record and display the first question.

    Lesson 4


    Lesson 4 covers the code required to retrieve a FileMaker record by its ID and retrieve related records from a portal. Portals are powerful controls used in FileMaker Pro solutions. The FileMaker API for PHP has special methods designed to work with portal data. This lesson introduces some of that functionality.


    Open the FileMaker Pro questionnaire.fp7 database which is hosted on FileMaker Server. Click the Edit Questionnaire button and make sure the active questionnaire has at least one record in the Question portal. Then open the Lesson4 home.php file in your web browser. Select the Continue button and enter your respondent information.

    Next you are prompted with the first question of the active questionnaire. Open the FileMaker Pro questionnaire.fp7 database again. Locate the first question of the active questionnaire. Try changing the first question type. Click the Edit Answers button and add possible answers. Refresh your web browser to see the updated question.

    This lesson introduces two new tasks you can perform: get a record by its ID and retrieve a set of related records from a portal.

    Find Record by ID

    With your text editor, open the handle_form.php file located inside the Lesson4 folder. Scroll down a third of the file to where the handle_form.php file ended in Lesson 3. Notice that this lesson adds code that requests the record object of the new respondent record. This request is necessary because the Respondent ID field is defined with the Auto Enter Serial Number option in FileMaker Pro and you need to retrieve the Auto Enter number.

    As with Find functions in Lesson 1, a new record can be retrieved by using the getRecord() and getField() methods.

    $records = $result->getRecords();
    $record = $records[0];
    $respondent_recid = $record->getField(‘Respondent ID’);

    The next task is to retrieve the active questionnaire name. To accomplish this, use the getRecordById() method of the FileMaker instance ($fm).

    When using getRecordById(), pass the internal FileMaker record ID and the name of the layout. The layout determines which table occurrence (context) is used and which field values (results) are returned. The code in this page passes the active_questionnaire_id of the $_POST array sent to this file from the respondent form of Respondent.php.

    $active_questionnaire_id = $_POST[‘active_questionnaire_id’];

    $active_questionnaire = $fm->getRecordById(‘questionnaire’,$active_questionnaire_id);
    $questionnaire_name = $active_questionnaire->getField(‘Questionnaire Name’);

    Note – Every record object returned from an API operation contains the internal FileMaker record ID which can be retrieved with the getRecordId() method.

    The next task is to retrieve the questionnaire records and display the first question. Search for all questions which match the active questionnaire ID. This find is performed against the Questions layout.

    $findCommand =& $fm->newFindCommand(‘Questions’);
    $findCommand->addFindCriterion(‘Questionnaire ID’, $active_questionnaire_id);
    $result = $findCommand->execute();
    $records = $result->getRecords();
    $question = $records[0];

    Get Related Set

    The questionnaire database is designed so that each question has a specific type (for example, text, radio, and checkbox). If the type is for a multiple choice answer, each question can have multiple answer choices. The layout Questions contains a portal which displays the possible answers. If a question has one or more answers, the following code displays the answer choices using the “type” specified.

    To explain this code, assume that the question is of type radio. Scroll down the handle_form.php document until you see the else if condition which checks for radio or ranking question types.

    else if ($question_type ==”radio” || $question_type ==”ranking”)

    If the condition is true, the following code retrieves the related answer choices and displays them as radio button form elements. Answer records from the portal can be retrieved by using the getRelatedSet() method of the FileMaker_Record object.

    When calling the getRelatedSet() method, the name of the related table must be passed in parenthesis and the portal defined with this relationship must be on the layout used when retrieving the $question record.

    $relatedSet = $question->getRelatedSet(‘question_answers’);

    The variable $relatedSet now contains an array of record objects from the related portal. Loop through the array and output the field values for each record found.

    foreach ($relatedSet as $relatedRow)
    $possible_answer = $relatedRow->getField(‘question_answers::answer’);
    echo ‘<input type= “radio” name= “radio_answer” value= “‘. $possible_answer .'”>’ . $possible_answer . ‘<br/>’;

    You could have retrieved the related records by performing a find, but it is much easier to use getRelatedSet() using a portal that already contained the related set.

    Lesson 5


    Lesson 5 covers the code necessary to add related records. If you have a portal defined on a layout which allows creation of related records, you can use the FileMaker API for PHP to add related records from the web.


    Open your web browser to the home.php page being hosted in the Lesson5 directory. Click the Continue button and complete the online survey. Open the FileMaker questionnaire.fp7 database which is hosted on FileMaker Server. From the Active Questionnaire select the Review Responses button and navigate to the last record in the table. This record contains the respondent information you entered. Each answer is saved as a record in the Responses portal.

    Add Related Record (Portal Rows)

    Adding portal rows with the FileMaker API for PHP can be done in four steps:

    1. Start with a valid record object
    2. Create a new blank related record
    3. Add data to the fields of the new record (optional)
    4. Commit the new record

    Start with a Valid Record Object

    With your text editor, open the handle_form.php file located in the Lesson5 tutorial folder. Scroll down and look for the code which retrieves the respondent record:

    $respondent_rec = getRespondentRecordFromRespondentID($respondent_recid);

    This code uses a function which has been added to the dbaccess.php file. If you open the dbaccess.php in your text editor, you can see this function’s definition near the bottom. Inside the function definition notice that the newFindCommand() method uses the Respondent layout for its context .

    $find = $fm->newFindCommand(‘Respondent’);

    This function assigns the respondent record object to the $respondent_rec variable. The variable is referenced to the layout Respondent because that layout was the context of the find command. Therefore any methods used by the $respondent_rec variable start from the context of the Respondent layout.

    Create a New Blank Related Record

    Going back to the handle_form.php file, the next line of code begins to create the new related record.

    $new_response = $respondent_rec->newRelatedRecord(‘Responses’);

    When this line executes, the variable $new_response is assigned a blank record object (a new record has not yet been created in the FileMaker database).

    It is important to understand the context of this operation. This code starts from the layout of the calling record object (Responses) and specified the relationship of a portal on that layout. Then the code passes the related table name to the newRelatedRecord() method.

    Add Data to the Fields of the Blank Record (optional)

    After you have a new blank record and know which portal context that the record belongs to, you can begin entering data with the setField() method. This method takes two parameters: field name and field value. Because this is a related record, the field name must be expressed with the relationship name and the field name separated by two colons.

    $new_response->setField(‘Responses::Question ID’, $cur_question);
    $new_response->setField(‘Responses::Response’, $translatedAnswer);

    After you have created the new related record and have added data to the appropriate fields, you are ready to commit the entry.

    Note – It is not necessary to set field data before committing a new blank record.

    Commit the New Record

    No new record objects are created in the FileMaker database until they have been committed. The commit() method inserts the FileMaker_Record object into the questionnaire.fp7 FileMaker database.

    $result = $new_response->commit();

    The $result variable is now assigned the FileMaker_Record object of the new record, and the new record has been created in the FileMaker database. If an error occurs, the variable $result contains a FileMaker_Error object. It is good practice to check for errors after executing the commit() method.

    Lesson 6


    Lesson 6 reviews the code necessary for displaying related fields from a portal. It also introduces the basic instructions for using Cascading Style Sheets (CSS) to modify the appearance of your web application.


    Open your web browser to the home.php page hosted in the Lesson6 directory. Notice the new look of the site. This formatting comes from a separate CSS page. CSS styles can be used to format HTML code used in your web application and are discussed at the end of this lesson.

    Click the Continue button and complete the online survey. Notice that the thankyou.php page displays a summary of the questions you answered. These questions and responses are from a portal on the Respondent layout in the questionnaire.fp7 database. If a FileMaker layout contains portal data, it can be displayed on the web using the FileMaker API for PHP.

    Get Related Sets

    Using your text editor, open the thankyou.php page which is located in the Lesson6 directory. Scroll to the end of the file and locate the last HTML table.

    Notice the code above the table which retrieves the respondent record.

    $respondent_record = getRespondentRecordFromRespondentID($respondent_recid);

    The getRespondentRecordFromRespondentID() function is defined in the dbaccess.php page. Its context is the Respondent layout in the questionnaire.fp7 database.

    Looking inside the HTML table, note that the $respondent_record variable is used to retrieve the set of related records. This is accomplished by using the getRelatedSet() method. To use the getRelatedSet() method, you must specify the related table name of the desired portal and the desired portal must be on the Respondent layout.

    $response_related_set = $respondent_record->getRelatedSet(‘Responses’);

    The above code assigns an array which contains the records from the portal Responses to the variable $response_related_set. Each response is a FileMaker_Record object. This code uses the getField() method of the FileMaker_Record object to output the portal rows in an HTML table. Remember to use the full name of the related table and field name separated by two colons when you output related fields.

    Here is the loop which displays the related set in HTML.

    foreach ($response_related_set as $response_related_row)


    $question = $response_related_row->getField(‘Questions 2::question’);

    $answer = $response_related_row->getField(‘Responses::Response’);
    //converts any line returns in the answer to commas
    $answer = str_replace(“\n”,”, “,$answer);
    echo ‘<tr><td>’ . $question . ‘</td>’;
    echo ‘<td>’ . $answer . ‘</td></tr>’;


    Formatting with CSS

    You can format your web applications using Cascading Style Sheets (CSS). With your text editor, open the style.css file located inside the Lesson6 folder and review the styles defined for some of the HTML tags. CSS styles can be applied to any HTML tag, allowing you to format multiple items on multiple pages from a single definition.

    To apply formatting to a specific HTML tag, you must declare the tag name. Following the tag name, you must state the style attributes enclosed in curly braces. As in PHP, each statement must be terminated by a semi-colon.

    body {
    background-color: #333333;
    padding: 20px;
    color: #ffffff;
    font-family:Verdana, Arial, Helvetica, sans-serif;

    After you have created a CSS file, you can apply it to any HTML or PHP document. To apply external styles, you must include or link the style sheet to your document: use the <link> (link) tag in the header of your HTML output.

    With your text editor, open the thankyou.php file located in the Lesson6 folder. Inside the header tags, notice the <link> (link) tag which tells the web browser to apply the style.css formatting. When using the <link> tag, be sure to supply the correct path or href to your CSS page.

    <link rel=”stylesheet” type=”text/css” href=”style.css” />

    Style sheets can be used in multiple applications and each application can use multiple style sheets. For more information on CSS styles and their attributes visit the CSS2 reference at W3Schools.

    For Web Development in Filemaker PHP Miracle Studios

    Posted by:

    Older Posts »