Skip to main content

Posts

Showing posts with the label Javascript

A javascript library for formatting and manipulating numbers.

Numeral.js , while less complex, was inspired by and heavily borrowed from  Moment.js  so if you have use momentjs before you should be familiar with this library. Numbers can be formatted to look like currency, percentages and more. How to use: numeral(1000).format('0,0') returns 1,000 numeral(1230974).format('0.0a') returns 1.2m numeral(1000.234).format('$0,0.00') returns $1,000.23 numeral(1230974).format('($ 0.00 a)') returns $ 1.23 m numeral(1).format('0%') returns 100% numeral(0.974878234).format('0.000%') returns 97.488% For more sample and options go to  http://numeraljs.com/ .

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/

Format date and time using Moment.js

The javascript function below will format a given datetime object like facebook ish using momentjs . function formatDateTime(dte, format) {     var diff = moment().diff(moment(dte), 'days');     if (diff == 0) {         return moment(dte).fromNow();     }     else if (diff == 1) {         return moment(dte).calendar();     }     else {         if (format) {             return moment(dte).format(format);         }         else {             return moment(dte).format("MMM DD, YYYY hA");         }     } } The return value will depend on the datetime pass to the function: If today "a few seconds ago" or "13 minutes" ago or "an hour ago" If yesterday "Yesterday at 5:15 PM" If the second parameter is pass it will use it ...

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; });

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>

Make sure your Javascripts are in the proper location in DotNetNuke

Calling the procedure below in your DotNetNuke module will make sure that your client script will be inserted in the proper place. Which is inside the Head tag. The Code: view source print ? 01. Public Sub InjectClientScript( ByVal page As System.Web.UI.Page, ByVal scriptKey As String , ByVal scriptSrc As String , Optional ByVal scriptValue As String = "" ) 02.     Dim objHead As Control = page.FindControl( "Head" ) 03.     If objHead IsNot Nothing Then 04.         If objHead.FindControl(scriptKey) Is Nothing Then 05.             Dim jQueryControl As New HtmlGenericControl( "script" ) 06.             jQueryControl.ID = scriptKey 07.          ...