jQuery UI – Resizable w/ ASP.NET Themes
February 18th, 2009 | 
Author: 
If you’ve been up to the jQuery web site and looked at the documentation for resizable() you probably thought, “hey, no problem, I can do that.” Well, that’s what I thought, too, until I started using it.
Here’s what you need to know to get this all working–and specifically, what you need to know to get it working under ASP.NET.
First, as you would expect, you’ll need to create some HTML on a page that has a div tag that you can select with a jQuery selector statement. I just gave mine an id of “sizeMe”:
<body> <form id="form1" runat="server"> <div style="height:100%; width: 100%;"> <div id="sizeMe"> <p>Here is some text</p></div> </div> </form> </body>
Then you’ll need to use the jQuery selector and call resizable() in the ready() handler:
$(function() { $("#sizeMe").resizable(); });
And as they say on TV, “But wait, there’s more…”
Because the part we kind of glossed over in our work is that the jQuery UI has themes that you can apply. This is a set of CSS files and images that we can copy into our ASP.NET app_Themes/themeName directory. To style these widgets. We need a theme so that the cursor will change for the edges and so that we get the grab handle in the corner of the div we’ve marked for resizing.
When you download the zip file from the jQuery UI site make sure you choose a style and you copy the stuff in the theme directory of the jQuery UI zip file into your theme directory of your ASP.NET web application.
You’ll notice that there several CSS files that are part of this set. And you’d think that since they are in the theme directory that they’d automatically get sucked into any ASPX page we had attached to the theme. Well, if that’s what you are thinking, you’d be wrong.
I don’t know if it’s by design or if it’s an “undocumented feature,” but it looks like any file that has multiple “.” in it will treat the first “.” as the starting point for the extension when .NET processes the files in the theme directory. Because all of the jQuery CSS files are named ui.something.css, these files will not get sucked in automatically.
That’s actually good news because if it did suck them in for us, we’d end up sucking them in twice or we’d need to remove the us.all.css file. But since they aren’t automatically processed, what we are going to do is place the following statement in the top of our main css file for our web site:
@import "ui.all.css";
And that folks, is the magic that makes this all work under ASP.NET.
Once you have the themes installed correctly, the HTML and javascript will do their thing and you can finally resize your div like you would expect to be able to.
I also note that it is pretty cool that jQuery themes work so nicely with ASP.NET themes. This means that just by switching theme directories at the ASP.NET level we can switch our jQuery UI themes as well.
Other post in jQuery
- jQuery - The Man, The Myth, The Legend - October 8th, 2008
- Getting started with jQuery and ASP.NET - October 15th, 2008
- jQuery - Explaining Last Week's Code - October 21st, 2008
- Friday Books - "Learning jQuery" - October 24th, 2008
- jQuery Simple Selectors - October 28th, 2008
- Friday Books - "jQuery in Action" - October 31st, 2008
- jQuery Selectors - Looks just like CSS - November 6th, 2008
- VS2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files - November 11th, 2008
- jQuery Looks like XPath - November 12th, 2008
- jQuery - class manipulation - November 19th, 2008
- jQuery - Events - December 2nd, 2008
- Host jQuery at Google (with Intellisense support) - December 10th, 2008
- jQuery - Calling Your Own Functions - December 16th, 2008
- Friday Books - jQuery Reference Guide - December 19th, 2008
- jQuery - Creating Plug-ins - December 23rd, 2008
- jQuery - Loading Partial Content - December 30th, 2008
- jQuery - Positioning Elements - January 6th, 2009
- AjaxToolKit TabControl Disabled Tab - January 12th, 2009
- jQuery, JSON, and ASP.NET - January 15th, 2009
- Review of the MDC at NYC - January 21st, 2009
- jQuery - Retrieving HTML Fragments - January 22nd, 2009
- jQuery GUI - Drag - February 3rd, 2009
- jQuery - Drop - February 12th, 2009
- jQuery UI - Resizable w/ ASP.NET Themes - February 18th, 2009
- jQuery, bgiframe and IE6 z-order hacks - February 19th, 2009
- jQuery - Sliders (scrollbars to the rest of us) - March 4th, 2009
- jQuery - Using Slider as a Scrollbar - March 12th, 2009
- jQuery - Auto Scrolling the Slider - March 23rd, 2009
- Live Presentation of jQuery - March 23rd, 2009
- Just a Week Away! - April 7th, 2009
- jQuery Tabs - April 9th, 2009
- jQuery Demos From Last Tuesday’s Presentation - April 16th, 2009
- jQuery – Accordion - May 6th, 2009
- CustomValidationControl and jQuery - May 11th, 2009
- Mixing ASP.NET, jQuery and JSON - May 12th, 2009
- jQuery Progressbar - May 20th, 2009
- jQuery – Dialog - June 2nd, 2009
- jQuery – Modal Dialog - June 9th, 2009
- Does jQuery Make Us Lazy? - June 18th, 2009
- jQuery Dialog – With Validation Controls - June 25th, 2009
- jQuery – Date Picker - July 2nd, 2009
- jQuery Splitter - July 21st, 2009
- jQuery Expand/Collapse Using Head Tags - October 15th, 2009
- Do you Need My Help? - November 18th, 2009
- Flash to jQuery - November 30th, 2009
- JQuery, Cufon, and Dynamic Content - December 1st, 2009
- jQuery, Each() and Async Gets - December 2nd, 2009
- jQuery and ASP.NET UpdatePanel - January 6th, 2010
- jQuery 1.4 Released - January 15th, 2010
- jQuery Cookbook - July 15th, 2010
- AddThis.com From E-Mail - May 25th, 2011
Posted in 
Tags: 
[...] jQuery UI – Resizable w/ ASP.NET Themes (Dave M. Bush) [...]
Hi, Thanks for the info…
When you say
@import ui.all.css
Do you mean @import ui.*.css
Not sure…
I was looking for help as it seems whenever I edit source/markup in VS 2008 my project seems to cycle through loading all the .css file’s over a few times– it’s a bit of a problem when editing a site via my wireless connection. I have to wait while all the .css files are reloaded over and over.
I’m loading jquery from my masterpage (.NET 3.5 SP1 + JQuery intellisense hotfix) via the scriptmanager, I’m having trouble in VS 2008 with JScript intellisense error (within the jquery-1.3.2.js file also)
I’m also using App_Themes\MyTheme etc to house all my .css
The website works fine, just a bother in VS-2008.
I think the fact that there’s an Intellisense error in the jquery-1.3.2.js file is causing to problem. It’s as if all my .css files are not cached and every time I edit a page, it looks to reload my .css files.
Any ideas?
Should I not use Scriptmanager to load the JQuery/JQueryUI and blockUI ?
No, I meant what I wrote. But I wrote this prior to jquery 1.3.x so you may not have an ui.all.css file anymore. Last time I got the CSS for the UI stuff it was all in one CSS file. The only reason for the import statement is because VS2008 can’t see css files that have dots prior to the css extension. So, it won’t load them automatically.
You should be developing on your local machine. Not on some other computer over the Internet.
No, I don’t use the script manager.
I have seen the intellisense error on one of my computers but not my main one. I’m not sure what the fix is yet but I’m quite sure it has nothing to do with CSS. In fact only jquery ui uses the CSS.