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: MiracleStudios.us

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.

• Live Demo: Here

• Live Demo: Here

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

• Live Demo Of Crop: Here

• Live Demo: Here

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!

• Live Demo: Here
• Download Code: From Here

• Live Demo: Here
• Download Code: From Here

jQuery Accordions

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

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.

jQuery Charts

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

• Live Demo: Here

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.

• Live Demo: Here
• Download Code: From Here

• Live Demo: Here
• Download Code: From Here

jQuery Flash Plugins

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

using the sleek Flash Single MP3 Player & jQuery.

jQuery Tabs

You can use the a href=”http://docs.jquery.com/UI/Tabs”>jUI/Tabsto create more dynamic tab functionality.

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

• Live Demo: Here

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

• Live Demo: Here
• Download Code: From Here

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.

• Live Demo: Here
• Download Code: From Here

• Live Demo: Here
• Download Code: From Here

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.

• Live Demo: Here

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.

• Live Demo: Here

jQuery Worth Checking Plugins

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

• Live Demo: Here

• Live Demo: Here

• Live Demo: Here

• Live Demo: Here

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.

Posted by: MiracleStudios.us

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.

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.

Pagination

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.

Navigation

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

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.

Forms

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

Scrolling

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.

Form Elements

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

Toggling

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

Gradients and Shadows

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

Lightbox

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

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.

Check out their demo page

Check out their demo page

Check out their demo page

Posted by: MiracleStudios.us

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: http://blog.mysite.com needed to point to http://www.mysite.com/blog/

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: MiracleStudios.us

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:

• Dojo
• Prototype + Scriptaculous
• jQuery
• MooTools

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: MiracleStudios.us

<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: MiracleStudios.us

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 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!

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).

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:

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:
by placing caret before brace
by placing mouse over curly brace
So you are able to highlight two pairs of matching curly braces at the same time!!!

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 //.
Pressing 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

or 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

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

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

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

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. Now you can create your own classes and program can recognize properties and methods for your classes.
10. 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.



11. When you use “getElementById” method, JavaScript Editor can recognize HTML tag and propose exact IntelliSenses for that tag.
12. 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.

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!).

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!

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.

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:

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

Click on the JavaScript Syntax Check button
It will check JavaScript syntax for current document and displays the result in the “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.

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:

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.

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.

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:

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.

Download:

Compatibility:
Any windows.

Download 1st JavaScript Editor Pro (Zip 7.02 MB)

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

Posted by: MiracleStudios.us

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>

 </ul>

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


   Heading

   . 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;
}

Miscellaneous

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: MiracleStudios.us
]]> http://miraclestudios.wordpress.com/2008/10/09/building-dynamic-menus-in-wordpress/feed/ 0 Miracle Studois http://miraclestudios.wordpress.com/2008/10/09/get-started-with-php-in-filemaker-pro/ http://miraclestudios.wordpress.com/2008/10/09/get-started-with-php-in-filemaker-pro/#comments Thu, 09 Oct 2008 11:59:38 +0000 Miracle Studios http://miraclestudios.wordpress.com/?p=82 ]]>

WEB DEVELOPMENT

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

PHP is a popular, powerful, and free middleware tool for building Web applications. It’s a server-side embedded scripting language, much like other middleware tools such as Cold Fusion, ASP, JSP, and Lasso. You can configure PHP for use with a variety of Web servers on a variety of platforms, including Linux, Windows, and Mac OS X.

And you can use it to publish FileMaker Pro data to the Web.

You’ve likely heard or read something about the XML capabilities of FileMaker Pro 6. In addition to XML import and export, the Web Companion can output XML in response to an appropriately structured query. It’s this ability that lets PHP communicate with FileMaker Pro.

It’s beyond the scope of this article to teach you how to be a PHP developer. My goal is to teach you enough to whet your appetite and hopefully inspire you to give PHP a try on your next Web project. At the end of the article, I’ll list some resources you can consult for help with configuring and using PHP. Dozens of books on PHP are available as well.

How it works

PHP has built-in functions for sending requests to Web servers and processing the results. Using those functions, PHP can send a query to the Web Companion and get results back in XML. Now, if you had to assemble these queries and parse the incoming XML manually, you’d likely give up on PHP pretty quickly. Thankfully, there’s an easier way. Chris Hansen, a FileMaker developer, has written a class for PHP that does all the hard work for you. The class, which he calls “FX,” is free from his Web site, http://www.iviking.org. Using FX means you don’t have to know a lick of XML to get PHP to interact with FileMaker Pro. You just have to know how to use the functions Chris provides in the class, and that’s fairly easy. The documentation provided with the download is thorough and easy to follow.

Try it out

Often, the best way to understand something new is to play through a simple scenario. After you have a working model, it’s easier to go back and learn variations and exceptions. Let’s look, then, at a simple, typical Web publishing scenario using PHP. Imagine you have a FileMaker Pro database (Employee.fp5) containing employee names and phone numbers. Your goal is to make search and results pages so users can access the database via a browser over the company intranet.

A typical hardware configuration for FileMaker/PHP solutions is to have two machines: a Web server running Apache or IIS, with PHP installed, and a separate machine running FileMaker Unlimited. Your databases must be open on that second machine (locally or as the guest of FileMaker Server) and shared to the Web Companion. To have FileMaker Unlimited respond to requests for XML, the only configuration required is to have the Web Companion enabled. In the Web Companion configuration screen, however, it’s a good idea to restrict access to only the IP address of the Web server. Limiting the traffic to that single IP address secures your data-bases from being accessed directly from a Web browser by hackers.

To test that you have the Web Com-panion configured properly and it will respond to requests for XML, open a browser (on any machine on the network) and type the following URL:

http:// /FMPro?-format=-fmp_xml&-dbnames

In this request, you’re simply asking the Web Companion at that IP address for a list of accessible databases, formatted as XML. If you’re using a recent copy of Microsoft Internet Explorer, you should see the XML result in your browser. With other browsers, you might have to View Source to see the response.

Figure 1: Web interaction topology — In a typical FileMaker/PHP solution, Web users submit requests to a Web Server, which in turn requests information via XML from a FileMaker Unlimited machine.

All of the HTML pages (both static and those with embedded PHP code) reside on the Web server. Users interact with this machine rather than directly with your FileMaker Unlimited machine. Figure 1 illustrates this topology.

Any requests the Web server receives for pages with a .php extension are handed off to PHP for processing. If necessary, PHP talks to the Web Companion on your FileMaker Unlimited machine to send or retrieve data. PHP then passes back plain HTML to the Web server, which is, in turn, sent to the user’s browser. Users never see the PHP code embedded in your HTML pages. They’ll only see the post-processing results, which is simply HTML. So, take the following page for example, which I’ll call test.php:

$a = 5;

$b = 8;

$c = $a * $b;

echo "If you multiply $a and $b, you'll get $c";

?>

When a browser requests test.php, the Web server notices the .php extension, and hands the document off to PHP for processing. PHP executes the program code contained between the symbols. Here, you’re asking PHP to multiply 5 and 8, then write a line of output. After execution, PHP hands back the processed document to the Web server. Thus, what the Web server sends back to the browser is simply:

If you multiply 5 and 8, you'll get 40

Now that you’ve tested both the Web Companion and the Web server independently, it’s time to write your search and results pages. As with other embedded languages (e.g., CDML, Lasso, Cold Fusion, ASP, JSP), you don’t have to have any special tools to embed PHP code in an HTML document. Just about any Web-authoring tool or text editor does the trick.

The page where users enter their search criteria is just a plain old HTML form. To display that form to the user, there’s no need to have PHP talk to the database. It’s only when the form is submitted that PHP has to perform a find in the database. So, keeping formatting to a minimum for now, your search.html page consists of the following:

XYZ Corp Employee Directory

Last Name:

name="LastName">

First Name:

name="FirstName">

Figure 2: Search page — The search page itself is just a plain HTML form, but it contains instructions to send the user’s entries to a PHP page for processing when the form is submitted.

Take a look at the form tag on line 7. A form’s “action” attribute tells the Web server what to do with the form after it has been submitted. In this case, it instructs the Web server to send all the form data to something called findEmp.php, the next page you’re going to write. Figure 2 shows the search page as it would appear to users.

Now you write the code for the search results page, which I’ll call findEmp.php. Remember, the .php extension tells the Web server this page contains embedded PHP code.

include ("FX.php");

$query = new FX("127.0.0.1", "591"); // IP address and

// port of the Web

// Companion

$query->SetDBData ("Employee.fp5");

$query->AddDBParam ('Last Name', $_POST['LastName']);

$query->AddDBParam ('First Name', $_POST['FirstName']);

$result = $query->FMFind();

if ($result['foundCount'] == 0) {

echo "No records matched your selection. Please try

again";

} else {

echo "Search Results

";

echo "

";

echo "

";

foreach ($result['data'] as $recordKey =>$recordData) {

echo "

";

echo "

";

echo "

";

echo "

";

echo "

";

}

echo "

Last Name	First Name	Phone Number
“.$recordData['Last Name'][0].”	“.$recordData['First Name'][0].”	“.$recordData['Phone Number'][0].”

";

}

?>

Search Again

The first PHP function invoked is an include function. By including the FX.php document, you'll have access to the functions in the FX library. So, to use FX, all you do is upload FX.php to your Web server and include it at the top of each page you want to connect to a database.

The next chunk of PHP code provides FX with parameters it must have to query the Web Companion. The IP address and port of the FileMaker Unlimited machine are specified as part of the instantiation of a new FX object, called $query here. (FX, by the way, is written using object-oriented techniques. PHP supports an object-oriented style, but doesn't mandate it.) The SetDBData function then specifies the database (and optionally, layout) to query. The two AddDBParam functions turn the user's entries from the search page into search arguments. Because you accessed this page as the result of a form submission, this page has access to all the form parameters submitted by the user. PHP stores this in an array called $_POST.

Figure 3: Finding Fred — The results of your search for “Flintstone.”

In the next line, you invoke the FMFind function and place the results in a variable called, aptly enough, $result. It's at this point that PHP makes a connection to FileMaker. FileMaker responds with a stream of XML (because that's the format PHP requests), and the FMFind function parses the incoming data and puts it into a big, multi-dimensional array. One of the items in that array contains the number of records returned by the query. You use a simple conditional statement to evaluate the number of records, then either output to the browser window a "No records found" message, or proceed to loop through the search results (using the foreach function) and output them to the screen. Figure 3 shows what the search results might look like after searching for "Flintstone" in the Employee database.

With that, this simple example is complete. If you've never seen PHP code before, it might seem a bit strange at first. But really, if you have any experience with procedural or object-oriented programming, you'll pick up PHP syntax quickly.

In addition to searching for records, you can use FX to submit requests to the Web Companion that will add, edit, or delete records from a database. You can also submit multiple requests in a single document. That's akin to using the inline functions of Lasso or CDML.

Worth considering

I hope I've convinced you that PHP is worthy of your consideration as a Web development tool. PHP is powerful, fast, full-featured, well-supported, and easy to learn. To top it off, it's free. Drop Chris Hansen a note thanking him for his generous contribution to the FileMaker community.

Resources

These resources will get you started with FX, PHP, and Web development in general.

http://www.iviking.org -- Chris Hansen's FX site.

http://www.php.net -- Includes installers, tutorials, and online documentation.

Advanced FileMaker Pro 6 Web Development, by Bob Bowers and Steve Lane (Wordware Publishing, 2003).

Get Started with PHP

No reader comments ... yet.

Posted by: MiracleStudios.us

Contents

Introduction
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6