jQuery BBQ: Back Button & Query Library

jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

http://benalman.com/projects/jquery-bbq-plugin/

Example on how to use dnnConfirm jQuery Plugin

The JS code below will show a dnn confirm dialog upon click on any button with my-Button class.  Pay attention to isButton option on initialization and the isTrigger parameter on button click.

//initialization
$(".my-Button").dnnConfirm({
    text: "Confirm Message",
    title: "Confirm",
    isButton: true
});
//button click handler
$(".my-Button").click(function (e, isTrigger) {

    if (isTrigger) {
        // Your code here
    }

    return false;

});

Another way implementing dnnConfirm

// Delete review button
$(".Delete-Button").dnnConfirm({
    text: "Confirm Message",
    title: "Confirm Title",
    isButton: true
});
$(document).delegate(".Delete-Button", "click", function (e) {
    if (e.isTrigger) {
        //Your code here
    }
    return false;
});

dnnAlert and dnnConfirm jQuery Plugin

I like the idea of using jQuery Plugins in DNN for interactive and consistent user interface which is why I digg into using dnnAlert and dnnConfirm plugins, however after a quick look on the documentation I notice the following.

For dnnAlert you can't set the title. We are allowed to set the OK button text using okText option but not the dialog title?

For dnnConfirm. This is very usefull when you just want a confirmation dialog upon click on your button or link however you can't use it like javascript confirm function or at least I don't know how to use it like below:

if(confirm('Question?')){//some code}

jQuery AJAX Cache Issue with IE

If you are having issue with jquery ajax api in IE where it keeps returning the same set of results over and over again. set cache option to false. So for example instead of using

$.ajax({ url: surl, dataType: 'json' }).done(function (data) { });

use

$.ajax({ url: surl, dataType: 'json', cache: false }).done(function (data) { });

HTH

How to prevent page scroll when showing jQuery Dialog

Sometimes showing a jQuery Dialog in a scrolling page sucks so to hide scroll bars(prevent scrolling) use the following code.

$( ".selector" ).dialog({
   open: function(event, ui) { jQuery("#Body").css("overflow", "hidden"); },
   close: function () { jQuery("#Body").css("overflow", "auto"); }
});

HTH

Upgrade DNN Label Control

This script will upgrade the look and feel of DotNetNuke label control.  Instead of hiding/showing the help element of the label it will show it as tooltip using jQuery Tools Tooltip.  Its pretty cool, you can even add some fancy style to your tooltip window.  Copy the script below to your page,  Be it in skin,  Header/Footer setting of your module or anywhere you want.  Then hover in any of the ? icon beside your label and see the difference.

I have no running sample for now, but I will update this post as soon as i got one.

Thanks,
v

Simple Color Picker - a jQuery color picker control

It's been a while since I build this small plugin for jQuery, While browsing through my files I try to see if this plugin still works with the latest version of jQuery which is 1.3.2 and it did. I have updated the sample and change the file names so it is easy to recognize. I also move the downloads to my google site, Download here.

Focus on the input box below or click on the box next to the control to show color picker.

Basic Sample

jQuery(function($) {

   $("#vtrColorPicker").attachColorPicker();

});

Change Background

jQuery(function($) {

   $("#vtrColorPicker1").attachColorPicker();

   $("#vtrColorPicker1").change(function() {

   $("#content-wrapper").css("background-color",$("#vtrColorPicker1").getValue());

});

Auto hide element using jQuery

If you are looking for a way to hide any segment of your page automatically after a given time then you are in the right place. All you have to do is insert the script file provided from this post and add ID and AutoHide attribute to your HTML element.

Script

Demo

This part will be hidden in 500 milliseconds.

This part will be hidden in 1 second.

This part will be hidden in 3 seconds.

This part will be hidden in 5 seconds.

Refresh page to view again. Click here to download the script.

Grouping radio buttons the jQuery way.

I figured I’d share how to handle grouping of radio butons using jQuery.
Color:
Red
Green
Blue
Favorite:
jQuery
VB.Net
DotNetNuke

Users:
admin
vreboton
gabie

Or

Groups:
Subscribers
Managers
Guest

All you need to do is use the same value for the GroupName attribute of your radio buttons.

Red

Green

Blue

Then insert the script below into your page:

<script language="javascript" src="http://vreboton.googlepages.com/jquery-1.3.2.min.js"></script>

<script language="javascript" src="http://vreboton.googlepages.com/jquery.vreboton.UniqueRadioButton.js"></script>

Show element in full screen using jQuery

While developing a module for Dotnetnuke I encountered a need to show a single element/control in fullscreen. This can be done using a set of complicated codes in the server. However, this can easily be achived in the client using jQuery. The idea is to iterate all the parents of the selected element and hide all their siblings. The code below will do just that.

(function($){

    $.fn.ShowElementInFullScreen = function() {

        return this.each(function(){

            $(this).parents().each(function(i){$(this).siblings().hide()});

        });

    };

})(jQuery);

After inserting the code above to your page you can now call the function using the code below.

jQuery('#YourElementId').ShowElementInFullScreen();

I have no public url to demostrate this yet, but I will post as soon as I have one. If you happen to use this code please post a comment with the URL below for others to see how this works.

Show only the content of this entry. Hide the rest.
Show Me Reload Entry


Thanks,
v