thickdialog

June 20th, 2012 Jquery dialog can be made to work as a either an ajax form, a dialog box or confirmation box just by use of a class similair to the way in which thickbox used to work (the examples work perfectly outside of wordpress).

ThickDialog examples

Download

Simple thickbox style popup

Popup example
code:

<a href="/demos/thickdialog/popup.html" title="A pop up" class="dialog-box">Popup example</a>

usage: add the class “dialog-box” to make this work

Simple thickbox style confirmation box

Confirm example
code:

<a href="/demos/thickdialog/delete.html" title="Are you sure?" class="dialog-confirm">Confirm example</a>

usage: add the class “dialog-confirm” to make this work

Simple thickbox style form submission

Form example
code:

<a href="/demos/thickdialog/form.php" title="Please complete" class="dialog-confirm">Form example</a>

usage: add the class “dialog-form” to make this work

VN:F [1.9.9_1125]
Rating: 10.0/10 (1 vote cast)
VN:F [1.9.9_1125]
Rating: +1 (from 1 vote)
4,601 views

jquery ui ajax form thickbox

June 20th, 2012 Jquery dialog can be made to work as a ajax form in a similair way to thickbox.

The link to the form (such as registration form), can be made to load inside a popup, and loaded using ajax by simply adding a class to the href.

For example this link could perform a registration, just like thickbox used to behave adding the class ‘dialog-form’ (the title is used to title the form popup) loading the content on submission.

<a href="/demos/thickdialog/form.php" class="dialog-form" title="Register">register</a>

Example: register

In order to do this you will need Jquery, and Jquery-UI and the code below.

Alternatively I have written a library called thickdialog which supports the form, confirmation box and pop ups just by adding a simple class, which is compatible with any framework and can be downloaded from there.

// form pop ups, just give an anchor point the class dialog_form, and the title will be used as the title 
$(function (){
 
    function submitBind(layout,original_url){
 
        $(layout).find('form').submit(function(event){
 
            /* stop form from submitting normally */
            event.preventDefault(); 
 
            url = $(this).attr('action')=='' ? original_url : $(this).attr('action');                    
 
            /* Send the data using post and put the results in a div */
            $.post(
                url,
                $(this).serialize(),
                function(data) {
 
                    $('#dialog').empty();
                    $('#dialog').append(data);
                    $('#dialog').dialog('option', 'position', 'center');
                    submitBind(layout, original_url);
                });
 
        }); 
 
    }
 
 
    $('a.dialog-form').click(function() {
 
        var original_url = this.href;
        var title = this.title;
        // show a spinner or something via css
        var dialog = $('<div id="dialog" style="display:none" class="loading">Loading</div>').appendTo('body');
        // open the dialog
        dialog.dialog({
 
            width: dialogBox_width,
 
            // add a close listener to prevent adding multiple divs to the document
            close: function(event, ui) {
                // remove div with all data and events
                dialog.remove();
            },
            modal: true
        });
 
        // load remote content
 
        dialog.load(
            original_url,
            function (responseText, textStatus, XMLHttpRequest) {
                // remove the loading class
                dialog.removeClass('loading');
                dialog.dialog('option', 'position', 'center');
                dialog.dialog('option', 'title', title);
 
                submitBind(this,original_url);
 
            }
        );
        //prevent the browser to follow the link
        return false;
    });
});
VN:F [1.9.9_1125]
Rating: 6.0/10 (4 votes cast)
VN:F [1.9.9_1125]
Rating: -2 (from 2 votes)
9,153 views

jquery confirmation box thickbox

June 20th, 2012 Jquery dialog can be made to work as a confirmation box in a similair way to thickbox.

The link to the action (such as deletion), can be made to display a confirmation box before it completes, by simply adding a class to the href.

For example this link could perform a deletion, just like thickbox used to behave adding the class ‘dialog-confirm’ (the title is used to title the dialog confirm) will request the user to confrim firstly.

<a href="/demos/thickdialog/delete.php" class="dialog-confirm" title="Are you sure about this?">delete</a>

Example: delete(example works fine outside of wordpress)

In order to do this you will need Jquery, and Jquery-UI and the code below.

Alternatively I have written a library called thickdialog which supports the confirmation box, pop ups and forms just by adding a simple class, which is compatible with any framework and can be downloaded from there.

// confirm box, add the class dialog-confirm and a title and it does the rest
$(function (){
    $('a.dialog-confirm').click(function() {
 
        var url = this.href;
        var dialog = $('<div id="dialog" style="display:none" title="Are you sure?">'+this.title+'</div>').appendTo('body');
 
        dialog.dialog({
            resizable: false,
            height:confirmBox_height,
            modal: true,
 
            buttons: {
                    "Yes": function() {
                            $(this).dialog( "close" );
                            window.location.href = url;
 
                    },
                    "No": function() {
                            $(this).dialog( "close" );
                    }
            }
        });
 
        dialog.dialog('option', 'position', 'center');
 
        //prevent the browser to follow the link
        return false;
    });
});
VN:F [1.9.9_1125]
Rating: 8.0/10 (1 vote cast)
VN:F [1.9.9_1125]
Rating: +2 (from 2 votes)
5,505 views

Jquery dialog thickbox

June 20th, 2012 Jquery dialog can be made to work in a similair way to thickbox.

Any link to content, can have its content loaded into a jquery dialog box, by simply adding a class to the href.

For example this standard page can be made to behave like a thickbox pop-up by adding the class ‘dialog-box’ (the title is used to title the dialog box).

<a href="/demos/thickdialog/page.php" class="dialog-box" title="popup">popup</a>

Example: popup (example works fine outside of wordpress)

In order to do this you will need Jquery, and Jquery-UI and the code below.

Alternatively I have written a library called thickdialog which supports the popups, confirmation boxes and forms just by adding a simple class, which is compatible with any framework and can be downloaded from there.

// pop ups, just give an anchor point the class dialog_box, and the title will be used as the title 
$(function (){
    $('a.dialog-box').click(function() {
        var url = this.href;
        var title = this.title;
        // show a spinner or something via css
        var dialog = $('<div id="dialog" style="display:none" class="loading">Loading</div>').appendTo('body');
        // open the dialog
        dialog.dialog({
 
            width: dialogBox_width,
 
            // add a close listener to prevent adding multiple divs to the document
            close: function(event, ui) {
                // remove div with all data and events
                dialog.remove();
            },
            modal: true
        });
 
        // load remote content
        dialog.load(
            url, 
            {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
            function (responseText, textStatus, XMLHttpRequest) {
                // remove the loading class
                dialog.removeClass('loading');
                dialog.dialog('option', 'position', 'center');
                dialog.dialog('option', 'title', title);
 
            }
        );
        //prevent the browser to follow the link
        return false;
    });
});
VN:F [1.9.9_1125]
Rating: 7.0/10 (3 votes cast)
VN:F [1.9.9_1125]
Rating: 0 (from 0 votes)
10,337 views

javascript image rotation

January 9th, 2012

Very simple class that rotates images on any event, on any target element (with a preloader).

Click here for an example.

To use it yourself (how the example works):

1. include jquery and the class

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="galleryRotate.js"></script>

2. Instantiate the class with an array of images

$images = ['1.jpg','2.jpg','3.jpg'];
var rotator = new GalleryRotate($images);

3. bind the objects change method to an event, such as mouseclick, telling it the name of target element (always done once the webpage is ready)

$(document).ready(function(){
 
	// click the image
	$('#button').click(function(){
		return rotator.change('#img');
	});
});

Once again an example can be found here.

The full source code can be downloaded here.

The class code is very straight forward and below for completeness.

function GalleryRotate ($images){  
 
	this.preload = function () {
	    $(this.images).each(function(){
	        $('<img/>')[0].src = this;
	    });
	}
 
	this.change = function($element){
 
		$img = this.images[this.imgNo];
 
		if ($element){
			$($element).attr("src", $img);
		}
		else alert($img);
 
		this.imgNo++;
 
		if (this.imgNo==this.images.length){
			this.imgNo=0;
		}
 
		return false;
	}
 
	this.init = function ($images) {
		this.images = $images;
		this.imgNo=0;
		this.preload();	
	}
 
	this.init($images);
}
VN:F [1.9.9_1125]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.9_1125]
Rating: 0 (from 0 votes)
4,627 views