Archive for the 'Tutorials' Category

Ajax Contact Form with Validation from jQuery and Anti-bot service from reCaptcha

Are you looking for an Ajax contact form, which can validate using jQuery, and uses anti-bot service from reCaptcha to prevent spamming. This is probably the right post for you. This script was originally created for tysoh.com (take a look at the demo). I have attached the full source code for your own testing too. However, there are 3 steps you will need to change before the form can work for you. Please see below:

1) Open up the file index.php, go to line 65, and change to your own reCaptcha public key. (You will need to sign up at recaptcha.net to get one)

ajaxform_1

2) Open the file ajax.recaptcha.php, go to line 8 and 9, and change to your own reCaptcha public and private key.

ajaxform_2

3) Open the file sendemail.php, go to line 7, and change to the desired email you want the form to forward to.

ajaxform_3

Further Modifications:
If you are slightly more ambitious, all the error and thank you messages can be configured under the file – submitform.js. And the theme for reCaptcha can be configure under the file – index.php.

Other Useful Resources:
jQuery Documentation
reCaptcha Documentation

Scripts Updates:
15/Jun/2010 – Version 1.3 released with Sender Name displayed in the mail
17/Jan/2010 – Version 1.2 released with bugs fixed

Using manual Excerpt in WordPress for RSS Feed

I have finally abandone Google Ajax Feed completely for tysoh.com, as the functions inside cannot meet my requirement anymore. For example, I am only restricted to display no more than 120 characters for the snippets for each post, have tried the Google Forums and etc., but with no help. I did a bit of research online, and found a brand new script from Dynamic Drive, which allow a similar function as Google Ajax Feed, that is to read in and display the RSS feed content on a separate webpage, but with much more control (e.g Pagination to separate displayed content into pages). It’s basically quite a good script, but with one very important feature missing, I cannot control the amount of texts displayed for the description part! No worry, luckily there is a manual Excerpt feature available in WordPress, just read on…

By default if you are using WordPress RSS to display the content on your webpage too, you should realised that the automatic excerpt will cause the description to cut off after 55 words. Furthermore, these 55 words are abstracted off from your original post first 55 words, and therefore its known as introduction, rather than summary. In other words, it is not a part taken from a post but an extra piece of information added to a post, in the same way that tags are added. And, like tags, it is optional. To add an manual excerpt, you simply write one in the Excerpt box, right under the post editor:

manual_excerpt_wordpress_1

So, what how do I configure the RSS feed?
After you have typed in your manual Excerpt (known as Summary), it can be reflected in your RSS feed, you need to configure the RSS feed under Dashboard > Settings > Reading to display each article in RSS, either in full text or Summary (As shown below). Overhere, we choose Summary. Now go to your RSS feed url in the browser, you should see the manual Excerpt reflected.

manual_excerpt_wordpress_2

Other Useful Resources:
Google Ajax Feed API
WordPress manual Excerpt
Dynamic Drive RSS Display Boxes

How to use Mozilla Thunderbird 2 to access your DreamPlus Pop3 Email

With so many kinds of mail clients out there, DreamPlus Studio still highly recommend Mozilla Thunderbird 2. It’s not only free, secure and user-friendly, but with constant updates and support from the community. You can simply download the software from: http://www.mozilla.com/en-US/thunderbird/, and install it. After which, you can just add a new account, and follow through the wizard… If you are using DreamPlus Email Accounts, just make sure these two settings are correct:

Incoming server (Pop): mail.yourdomain.com
Outgoing server (SMTP): mail.yourdomain.com

How to create .ico extension file in Photoshop (PC only)

Nowadays, do you usually see those tiny icon beside the browser address bar, when you type in the URL? Those icons are specially designed with an extension of .ico, to give the site a more professional look, and a form of recognition, when the user add the site to their favourites. I have come across this site called Telegraphics: http://www.telegraphics.com.au/svn/icoformat/trunk/dist/README.html, which provide a free Photoshop plugin and userguide. You can actually download it and place it under the “File Formats” folder inside your Photoshop Plugins folder. After that, you just need to re-launch the program, and use Photoshop’s Save command to create .ICO files. I have personally tested the plugin with Photoshop CS3, with no issue, and its pretty straight forward and easy to use.

DreamPlus Web Hosting provides IMAP access to your mails on iPhone, and many other portable devices…

The term – IMAP stands for Internet Message Access Protocol. It allows multiple clients to access the same mailbox. E-mail clients using IMAP generally leave messages on the server until the user explicitly deletes them. If compared with POP3, I would still recommend using IMAP to access your mails. All you need to have is a mail account that actually support IMAP, if you want you can just simply sign up any DreamPlus Web Hosting Plan, and you are good to go! Below is a mini tutorial to guide your through the setting up of IMAP mails on your iPhone:

1) Go to Settings > Mail, and click on ‘Add Account…’

iPhone Mail 2

2) Select Other, and click on the IMAP tab

iPhone Mail 3

3) Input the next 3 screenshots settings below

iPhone Mail 5
iPhone Mail 6
iPhone Mail 7

4) Go to Advance settings, and turn off the ‘Use SSL’ slider

iPhone Mail 8

You can now return back to your iPhone Home screen, and click on the Mail icon, to start receiving or sending your emails.

How to do simple editing to your HTML pages, using free NVU program

1. Download the NVU program from: http://nvudev.com/download.php
2. Install and launch the program
3. Go to File > Open, to open the HTML file you wanted to edit

NVU

4. To change, remove or add in any text, just highlight it and do the necessary amendments
5. To change any images or links, select it and right click. Select ‘Image and Link Properties…’

NVU
NVU
NVU

6. Once you are done editing, click ‘OK’ to close the window.
7. If you like to do more advance editing, select ‘Source’ tab at the bottom of the window, to edit the codes directly

NVU
8. Remember to save your work!

Travel to top