Entries tagged as javascript

Related tags

Tuesday, February 22. 2011

ZOHO Viewer plugin for jQuery

I discovered ZOHO Viewer, which supports a lot more file types than Google Docs Viewer, after I wrote the Google Docs Viewer jQuery plugin I posted earlier. So, I wrote another jQuery plugin that automatically embeds the ZOHO viewer for viewing the doc, docx, xls, xlsx, ppt, pptx, pps, odt, ods, odp, sxw, sxc, sxi, wpd, pdf, rtf, txt, html, csv, tsv files it supports linked to by anchor tags.

The ZOHO Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This, just like Google Docs Viewer, bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.

Both plugins work exactly the same and has the same configuration options. I ended up going back to Google Docs Viewer for the application I was developing because it displays the document zoomed in to fit the width of the viewer by default and has a toolbar to help navigate the document unlike ZOHO viewer. However, because ZOHO Viewer supports a much large range of file types it is still likely to become very handy.

Usage


1. Add jQuery and the zohoViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zohoviewer.min.js"></script>
</head>

2. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the ZOHO Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download file</a>
<a href="urltofile.pdf" id="embedURL">Download file</a>

3. Initialize zohoViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
$('a.embed').zohoViewer();
$('#embedURL').zohoViewer();

Customization


The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized.
$('a.embed').zohoViewer({ width: 400, height: 500 });

The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "zohoviewer", which allow for styling all the zohoViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-zohoviewer'. See the demo source code for more details.

Demo


- Check out the live demonstration

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Download

- jquery.zohoviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!
Posted by Jaa at 17:41 | Comments (7) | Trackbacks (6)
Defined tags for this entry: , , , , , ,
Monday, February 21. 2011

Google Docs Viewer plugin for jQuery

Here's a little jQuery plugin I wrote recently that automatically embeds the Google Docs Viewer for viewing pdf, doc, docx, ppt and tiff files linked to by anchor tags.

The Google Docs Viewer is an embeddable browser-based viewer that requires only a URL to a file available online. This neatly bypasses the need for users to have compatible software on their machines for those file types and displays the document right in the browser.

Usage


1. Add jQuery and the gDocsViewer plugin to the page.
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gdocsviewer.min.js"></script>
</head>

2. Set some class name or id to the anchor tag for all URLs to files that you want to be displayed using the Google Docs Viewer. E.g. "embed"
<a href="urltofile.pdf" class="embed">Download file</a>
<a href="urltofile.pdf" id="embedURL">Download file</a>

3. Initialize gDocsViewer and set it to process the URL with id or all URLs with the class name set in the previous step.
$('a.embed').gdocsViewer();
$('#embedURL').gdocsViewer();

Customization


The plugin offers two configuration options that set the width and height of the embedded document IFRAME. This can be set when the plugin is initialized.
$('a.embed').gdocsViewer({ width: 400, height: 500 });

The plugin inserts a the IFRAME for the viewer inside an injected DIV. The DIV tags all carry the class name "gdocsviewer", which allow for styling all the gdocsViewer instances via CSS. If the anchor tag has the ID attribute defined, then the injected DIV tag is also set an ID attribute in the format of ID_of_Anchor + '-gdocsviewer'. See the demo source code for more details.

Demo


- Check out the live demonstration

License

This script is released under the Open Source MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Download

- jquery.gdocsviewer.v1.0.zip (v1.0, 2.2KB)

Enjoy!
Posted by Jaa at 18:00 | Comments (8) | Trackbacks (7)
Defined tags for this entry: , , , , , ,
Friday, January 7. 2011

Page to Unicode Thaana 1.0

Here's a nifty little tool I made a few years ago that automatically and intelligently picks out the bits of text that use a non-Unicode Thaana font on any web page and converts it to Unicode. That probably doesn't make much sense to most of you but read on - there's a section for general web users and one for developers.

General users


Take the website of Haveeru Daily as an example. It uses a now-archaic method of displaying Thaana. Browsers cannot and will not substitute an alternative workable font if your computer does not have the exact Thaana fonts it requires and will display as non-sensical English text. But then take Miadhu Daily, which relies on something called Unicode. Browsers can and will load up the site perfectly readable as long as you have any one of the many Unicode Thaana fonts on your system. And in many situations, like at public libraries or on some phones and devices like the Kindle, Unicode-based Thaana web pages will load up just fine as there usually is some Thaana-supporting Unicode font on it while those that use the more archaic method will fail.

I came across this problem a few years ago while at the university lab one day and there was some interesting events taking place in the Maldives which I wanted to read about. Haveeru had the most news articles and was the most up-to-date but I couldn't read any of it as the Thaana fonts were not on the system and I was not allowed to install the fonts. So I wrote some quick code, specifically a bookmarklet, that converted the text on the site on-the-fly to use Unicode.

Anyway, if you find yourself in a similar situation, here is what you could do. Right click the PUT bookmarklet link below and choose to bookmark the link. When on a page, just click the PUT bookmark and the page should convert to Unicode and display Thaana.

Page to Unicode Thaana bookmarklet v1.0

Demo

Haveeru before


Haveeru after


Developers


Here's a slightly different version of the above script that can be used on web pages that do not use Unicode Thaana to offer the pages in Unicode without requiring any change to the content management system, editor etc that you have in place already. Add the script to your non-Unicode Thaana based web pages where appropriate and your visitors will get a Unicode-based web page as long they have Javascript enabled.

Usage
I would recommend that it be added towards the end of your page HTML, right before the closing BODY tag.


Download:
- put-1.0.min.js (minified, for production use)
- put-1.0.js (full source)

Enjoy :-)
Posted by Jaa at 20:26 | Comments (3) | Trackback (1)
Defined tags for this entry: , , ,
Monday, April 13. 2009

Javascript Thaana Keyboard version 4.2.1

Here's an update to my Javascript Thaana Keyboard library which provides easy entry of Thaana on web pages without the involvement of OS-based keyboard switching. Hit the demo page to see it in action.

This release is solely a bugfix release addressing an issue with the display of newly entered text in multiline fields where text exceeds the size of the visible area. I originally cut this release in February but decided to hold back on a public release till I had further issues to fix or had new features added, neither of which has come since...

Thanks goes to Ahmed Ali for bringing the bug to my attention.

Changelog

+ Fixed issue with the display of newly entered text in multiline fields where text exceeds the size of the visible area.

Usage

Usage remains same as before. Please refer to my detailed post on the 4.0 release.

Demo

As usual, a demonstration and testing page is available.

Download

- full source version (5.66 KB)
- packed version (2.47 KB) [recommended]
Posted by Jaa at 20:21 | Comments (17) | Trackbacks (0)
Defined tags for this entry: , , , , , , , , ,
Friday, December 19. 2008

Javascript Thaana Keyboard version 4.2

Here's a minor update to my Javascript Thaana Keyboard library. This release, version 4.2, amounts to a single bugfix addressing an error in key translation for some keys when operating under the "Phonetic-HH" keyboard mode. Everything else remains as per the earlier v4 series releases.

Thanks goes to Nattu for bringing the bug to my attention.

Changelog:

+ Fixed handling of keys when in Phonetic-HH keyboard mode

Usage:

Usage remains same as before. Please refer to my detailed post on the 4.0 release.

Demo:

Check out the demonstration and testing page here.

Download:

- full source version (5.51 KB)
- packed version (2.46 KB) [recommended]

Update (13-Apr-2009): This version is now superseded by release v4.2.1.
Posted by Jaa at 16:29 | Comment (1) | Trackbacks (0)
Defined tags for this entry: , , , , , , , , ,
Friday, October 31. 2008

Javascript Thaana Keyboard version 4.1

I released Javascript Thaana Keyboard v4.0 only 10 days ago but I've since been made aware of a few bugs in the script that had gone unnoticed during testing back then. I decided to cut another release to fix those bugs which, although minor, could potentially be annoying to end-users. This new release also crams in a few tweaks to improve performance.

Changelog:

+ Fixed handling of Delete key and other special keys
+ Added correct handling for Thaana brackets "()"
+ Improved performance

Usage:

Usage remains same as before, so please refer to my post on the 4.0 release.

Demo:

Check out the demonstration and testing page here.

Download:

- full source version (10.6 KB)
- packed version (2.46 KB) [recommended]

Update (19-Dec-2008): This version is now superseded by release v4.2.
Posted by Jaa at 11:36 | Comments (0) | Trackbacks (2)
Defined tags for this entry: , , , , , , , , ,
Monday, October 20. 2008

Javascript Thaana Keyboard version 4.0

Here is an update to my Javascript Thaana Keyboard (JTK). This 4.0 release packs in a bunch of new features, making JTK much more powerful and more flexible than any of the earlier releases.

Keyboard support:

Most notable on this new release is the introduction of support for the various different types of Thaana keyboard in use. JTK now supports the following keyboard layouts:

Phonetic (Segha version): This keyboard is perhaps the most popular Thaana keyboard layout. JTK identifies this keyboard as "phonetic".

Phonetic (Hassan Hameed version): This keyboard is similar to above but notably differs in its mapping of alifu, abafili, aabaafili, gaafu and the sukun. JTK identifies this keyboard as 'phonetic-hh'.

Typewriter: This is the standardized Thaana layout used on typewriters. JTK identifies this keyboard as 'typewriter'.

Browser support:

JTK 4.0 adds support for IE5.5, which has a very significant market share still. Hence JTK should now work perfectly well on Microsoft Internet Explorer 5.5+, Mozilla Firefox 1+, Opera 9+, Apple Safari 2+ and Google Chrome 0.1+.

Basic usage:

The basic usage allows for fast and easy integration of JTK on your Thaana web pages.

1. Link the file in the HEAD section of the page:

2. For any element accepting input (i.e. INPUTs, TEXTAREAs, content-editable DIVs), assign them the special class name "thaanaKeyboardInput". JTK will automatically handle text entry to any element with that class name. You can assign further classes to the elements without ill-effect, if needed.

3. There are two ways to set the keyboard used for an element.
defaultKeyboard method: This method allows setting a default keyboard to be used on all elements handled by JTK. To do this, add the following to the HEAD section of your web page but make sure it is added after the code inserted from step 1 above.

thaanaKeyboardState method: This method allows per element control on the type of keyboard used by an element handled by JTK. To do this, add a form element (can be a radio, checkbox, select, hidden or text field) with its name set to the text entry element id suffixed with the string "_thaanaKeyboardState". The value of these fields should specify either 'off', 'phonetic', 'phonetic-hh' or 'typewriter', indicating the status and the keyboard in use.

So, if you had a text entry field with the id "fullname" then the keyboard could be specified using a hidden field as follows:

4. Make sure that the text direction for the Thaana fields is set to "rtl". This can be easily achieved using CSS, by adding a class definition for the "thaanaKeyboardInput" class or by any other method of your choice. Adding the following to your CSS definition should suffice for most uses:
.thaanaKeyboardInput {
    font-family: faruma, 'mv iyyu nala', 'mv elaaf normal';
    direction: rtl;
}

If the above instructions are followed correctly, the JTK Thaana functionality would be in effect soon as the page has loaded!

Advanced Usage: The JTK object, methods and properties

To facilitate advanced integration functionality for developers looking to have (finer) control over its behavior, JTK now makes itself available as a public object named "thaanaKeyboard".

The following properties and methods exposed by the "thaanaKeyboard" object:

defaultKeyboard: [property] The Thaana keyboard layout type to default to when JTK enabled elements do not have a keyboard specified.
Valid values are: 'off' to keep Thaana disabled, 'phonetic' to use the standard phonetic layout, 'phonetic-hh' to use the phonetic layout by Dr. Hassan Hameed and 'typewriter' to use the typewriter layout.

setHandlerById ( id, action ): [method] Sets the state of the JTK handler for a page element.
The id argument should be a string containing the id of any content-editable element. The action argument should specify either "enable" or "disable" depending on whether input handling for Thaana should be enabled or disabled, respectively.

setHandlerByClass ( class, action ): [method] Sets the state of the JTK handler for a set of page elements.
The class argument should be a string containing the class name of any content-editable element (i.e input, textarea etc). The action argument should specify either "enable" or "disable" depending on whether input handling for Thaana should be enabled or disabled, respectively.

License:

JTK 4.0 is released under the MIT License, allowing its use in both personal and commercial applications as long as the copyright and license permission notice remains intact.

Demo:

Check out the demonstration and testing page here.

Download:

- original full source version (10.0 KB)
- packed version (2.33 KB) [recommended]

As always, drop a line here if you use it and/or have problems or suggestions. Enjoy. :-)

Update (31-Oct-2008): This version is now superseded by release v4.1.
Posted by Jaa at 20:20 | Comments (12) | Trackbacks (3)
Defined tags for this entry: , , , , , , , , ,
(Page 1 of 2, totaling 10 entries) » next page

  • Blogroll