Ajax Updates

Ajax Updates


GlassBox to Build Transparent Borders

Posted: 04 Sep 2009 08:07 AM PDT

GlassBox is a lightweight JavaScript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. GlassBox lets you easily build lucent borders, colorful layouts and “Flash-like” effects. The GlassBox library ..

* is easy to use, customizable and skinnable
* comes with a coherent API (CSS based parameter) and a short introduction
* includes a basic Ajax XHR for dynamic content loading
* is tested with IE 6 + 7, Firefox 2, Opera 9 and Safari 3 (mac + win)
* and is an open source project distributed under MIT license


I got a lot of feedback for this project during the past year. Thanks to all for reporting bugs and sending suggestions. All your impact went into a new Version: Version 2.0.0.

.. and what’s new or changed?

1.Through versions 1.x.x you can’t destroy glassbox objects. Since this is important to create/destroy boxes via link-tag, it’s been fixed now. Please see example for details.

2. Previous versions had Ids like ‘content’ and ‘contentBoxBg’ for each element. What a shame! Please see Layout for necessary changes in your stylesheets.

3. You may now use height:auto. The box resizes to the height of the content (except ‘vscreen’). See example.

4. The IE 7 PNG bug is fixed (not tested in IE8).

5. New is a simple helper function ‘Dollar’ ($ – shortcut for document.getElementById).

Usage Quick start

1. Unzip the GlassBox.zip. Include the GlassBox script in the head section of your document:

 Javascript |  copy code |? 
1
<script src="glassbox/glassbox.js" type="text/javascript"></script>

or use the minified version:

 Javascript |  copy code |? 
1
<script src="glassbox/glassbox-min.js" type="text/javascript"></script>


2. Put the content for your GlassBox into a div in the body section of your document:
 HTML |  copy code |? 
1
 
2
<div id="myGlassboxContent"> 
3
  <!-- Content --> 
4
</div>


3. Create a new object and define first (init) id, width, height and overflow, and second (apos) position left and top (see API Doc):
 Javascript |  copy code |? 
1
 
2
<script type="text/javascript"> 
3
var myGlassBox = new GlassBox(); 
4
myGlassBox.init( 'myGlassboxContent', '400px', '300px', 'auto' ); 
5
myGlassBox.apos( '290px', '35px' ); 
6
</script>

Demo: http://www.glassbox-js.com/examples/minimal.htm
Download: http://www.glassbox-js.com/downloads/glassbox.latest.zip
Source: http://www.glassbox-js.com
tafbutton blue16 GlassBox to Build Transparent Borders

Related Listings:

  1. Transparent Custom Corners The technique for creating a flexible box with Transparent custom...
  2. Build a Better Tooltip with jQuery Awesomeness Apr 1st in Javascript & AJAX by Jon CazierBrowsers will...
  3. jQuery Bubbles Script This plugin adds bubbling functionality to jQuery. The code is...

jNice – jQuery form plugin

Posted: 04 Sep 2009 07:43 AM PDT

Create custom looking form elements, that function like normal form elements.
jNice - jQuery form plugin
There have been quite a few updates and changes. The major one is the SelectUpdate, if you change the options of a select element (ie. through AJAX) you can call $.jNice.SelectUpdate(’element to update’) to redraw the element. Please take look at the example code in index.html. Also it is now accessible, you should be able to access everything using just the keyboard.

Demo: http://www.whitespace-creative.com/jquery/jNice/
Download: http://plugins.jquery.com/files/jNice_0.zip
Source: http://plugins.jquery.com/project/jNice
tafbutton blue16 jNice   jQuery form plugin

Related Listings:

  1. jSmile using jQuery Plugin In a totally unobtrusive way for both (x)html and javascript...
  2. Metadata : jQuery Plugin This plugin is capable of extracting metadata from classes, random...
  3. Jquery-Bounce plugin This project allows the user to extend the elements on...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.