Tag Archives: Jquery

Review: Top 3 jQuery tree plugins

March 14, 2012 5:54 pm /

As a Content Management System developer, having a good tree plugin is key to organizing files in directories. With a small number of folders, any jQuery tree plugin will suffice. But, I’ve encountered some limitations with 1000+ folders and Internet Explorer compatibility.

Dynatree

Dynatree is my current favorite jQuery plugin. The code is maintained with very good browser compatibility (IE 8 works without any problems), excellent documentation, and lots of features. Supports checkboxes, drag and drop, persistence, and HTML/JSON/or Javascript data loads. If you have a large number of folders, it is best to use JSON as the data object since you can use AJAX to dynamically load the lists.  Even without the “lazy load” option, the script runs fast with a single load of the JSON data.

Download | Demo | Documentation

 jsTree

jsTree is one of the more popular plugins, but I have had issues with Internet Explorer 7/8 compatibility. The plugin works great in Internet Explorer 9, Firefox, Chrome, and Safari though. In Internet Explorer 8, JSTree will error out with a “stop running this script” javascript message if you have a large number of folders. If you don’t plan to run many folders in the tree, JSTree is a good choice with its features and community. Data load via AJAX, JSON compatibility, and drag and drop features name a few of the cool features.

Download | Demo | Documentation

 jQuery Tree Control

jQuery-Tree-Control is a great option for a lightweight jQuery tree script. Excellent cross-browser compatibility, small footprint, and easy to implement. The major limitation is persistence, so it doesn’t save the last folder open on refresh. I originally used this plugin for my project, but needed a few more features that the other two plugins have.

Download | Demo | Documentation

 

Posted in: AJAX, jQuery / Tagged: , ,

Fix: html parsing error unable to modify the parent container element before the child in IE8

February 8, 2012 6:58 pm /

If you run Internet Explorer 8 and encounter the following error:

“html parsing error unable to modify the parent container element before the child”

or

“Internet Explorer cannot open the Internet site http://<Web site>.com. Operation aborted.”

The error basically means that an element on the page is trying to get modified without being completely loaded. (e.g. deleting or appending to the object). Possible causes are lightbox style or flash messenger transitions that run the following code:

$("body").append

It appears to be specific to Internet Explorer 8 with the way it parses the DOM object.  Here’s a good reference to the problem on MSDN – http://blogs.msdn.com/b/ie/archive/2008/04/23/what-happened-to-operation-aborted.aspx

Fix: The quickest fix is to use jQuery to prevent the script from running until the page is fully loaded. 

$(document).ready(function(){
// Your Javascript function goes here
});
</script>

 

Posted in: AJAX, jQuery / Tagged: , ,

Simple jQuery image rollover script

June 2, 2011 4:47 pm /

Here’s my simple jQuery image rollover script.
View albertech-net-jquery-rollover.js Source

I modified it to work with absolute URLs. This works well if you have different servers hosting your image files. Adding image rollovers to your page is easy – just add class=”rollover” to your images.

$(function() { 
$("#content .rollover").hover(function() {
// albertech.net rollover - get the extension of an absolute file path
var extensionLoc = ($(this).attr("src")).lastIndexOf(".");
var imgExtension = ($(this).attr("src")).substr(extensionLoc);
var hoverImage = ($(this).attr("src")).substr(0,extensionLoc) + "-hover" + imgExtension;
$(this).attr("src", hoverImage);
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});

Usage:
1) Make a div with the id named “content”.
2) Add a class=”rollover” to the image.
3) Make two images — the second rollover one must have the same name as the first image with a -hover added to the end. For instance:

myimage.gif
myimage-hover.gif

The page should look something like: (simplified)
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#content .rollover").hover(function() {
// albertech.net rollover - get the extension of an absolute file path
var extensionLoc = ($(this).attr("src")).lastIndexOf(".");
var imgExtension = ($(this).attr("src")).substr(extensionLoc);
var hoverImage = ($(this).attr("src")).substr(0,extensionLoc) + "-hover" + imgExtension;
$(this).attr("src", hoverImage);
}, function() {
$(this).attr("src", $(this).attr("src").split("-hover.").join("."));
});
});
</script>
</head>
<body>
<div id="content">
   <img class="rollover" src="myimage.gif" alt="" />
</div>
</body></html>

Posted in: AJAX, jQuery / Tagged: ,

jGrowl – jQuery plugin for displaying messages

April 28, 2011 1:38 pm /

I recently found a useful jQuery plugin for adding unobtrusive web browser messages for webapps called jGrowl.

It displays a floating div with your custom message for 5-10 seconds on the top of the screen and fades out. There are options to change the duration of the message, set the message as a sticky until it is closed by the user, position options, and animation options. It is useful for showing quick informational messages such as “Saving changes”, “Update”, and “Delete”. Two unique features with this plugin are the “sticky feature” and the ability to stack consecutive messages together.

I’ve created a quick tutorial on adding this jQuery plugin to your app.

How to use the jGrowl plugin

Download the plugin at http://stanlemon.net/projects/jgrowl.html.

Inside the zip file, copy the two files “jquery.jgrowl.js” and “jquery.jgrowl.css” to your server. If you don’t have “jquery-1.4.2.js” on your server, copy that file as well.

Next, add the following lines to your webpage


<script src="jquery.js" type="text/javascript">
<link type="text/css" href="jquery.jgrowl.css" rel="stylesheet">
<script src="jquery.jgrowl.js" type="text/javascript">

To make the message appear on the page, add this to the BODY of your HTML.

<div id="jGrowl" class="top-right jGrowl"><div class="jGrowl-notification"></div></div>
<script type="text/javascript">$.jGrowl('Test!');</script>

The page should now show the “Test” message appear and fade out after a few seconds.

Posted in: AJAX, jQuery, Script Reviews / Tagged: , ,

Using jQuery for setting focus on an input box

June 9, 2010 12:26 pm /

Setting a focus on an input box is a hassle with so many different browsers out there. Each browser has their own unique tag to set the focus. Rather than using the browser-specific tags for the focus, one can utilize Javascript to provide the functionality for multiple browsers.

jQuery is a great alternative to adding the focus since its simply a matter of adding a few lines of code to your page. It will work on multiple browsers, whether it be Internet Explorer, Firefox, Chrome, or Safari.

If you want the first visible element of the page to be focused:

<script type="text/javascript" >
$(function() {
$("input:text:visible:first").focus();
});
</script>

If you want a specific element to be focused, such as a search box:

For instance,<script type="text/javascript" >
$(function() {
$("input[name=\'MY_INPUT_NAME\']").focus();
});
</script>

will set the focus for your input element with the name “MY_INPUT_NAME”.

Posted in: AJAX / Tagged: , ,

Post Navigation

← Older Posts