fordie's Blog » .net

jQuery intellisense in Visual Studio 2008 & Dreamweaver

admin — Thu, 13 Nov 2008 20:00:40 +0000

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML it’s my weapon of choice when it comes to adding client side interactions to a site.

It has rapidly gained popularity with web developers and designers – now software manufacturers are starting to take note with industry leaders like Adobe & Microsoft adding tools to their web development environments to help make jQuery development even quicker.

Microsoft Visual Studio 2008

I spoke previously about getting Jquery intellisense in Visual Studio 2008. Since then Scott Guthrie announced that that Microsoft will be shipping jQuery with Visual Studio going forward and then just yesterday I spotted this article on the Visual Web Developer Team Blog with interesting updates to VS2008′s jQuery intellisense. The best development from my point of view is the ability to get code hints in your aspx & master pages, not just your .js files.

In order to take advantage of these improvements you’ll first need to install Visual Studio 2008 Service Pack 1and this hot fix.

Next download the jQuery IntelliSense documentation file and save it in to your website in (probably a good idea to put it in the same folder as your jQuery file).

To add jQuery intellisense to a javascript file simply add this line to the top of the file:

///

To add it to aspx & master pages do add the following lines to the head of your document.

    <% if (false)
       { %>
        
    <%} %>

Points to note:

The “if (false)” statement will prevent the link to the reference file being rendered at runtime. Microsoft are planning to release a hotfix to automatically search for the vsdoc file if the javascript file has a reference path in it meaning that these links in the head will become redundant.
If you are using aspnet’s MVC framework you need to ensure that your path to the reference file starts with a tilde otherwise VS will not find the reference file.
dding a link to the reference to a master page means all aspx pages that inherit that master page will have intellisense enabled.

Adobe Dreamweaver

CS4

Adobe have just released Dreamweaver CS4 which also has support for jQuery code hinting. Adobe have taken a different approach to Microsoft, they use “introspection” to parse any javaScript files you have linked to your page and provide code hints.

This seems to work pretty well, and even handles chaining. However, I do have a couple of minor gripes. Firstly as soon as I typed “$(” dreamweaver told me I had a syntax error which really confused me, in the end I realised that just had to keep typing and DW would eventually figure out what I was doing. The other thing is, as a VS user I’m used to to code hits appearing strait away, in DW you have to press Ctrl + [space]. It’s not a big deal but would take some getting used to.

Older Vesions

Users of older versions of Dreamweaver this extension from Chris Charlton adds excellent code hints for jQuery & jQuery UI and what’s more it prompts you as soon as you hit “.” good work Chris!

jQuery Intellisense in Visual Studio 2008

admin — Tue, 18 Mar 2008 17:16:34 +0000

We’ve started using jQuery quite heavily to power our javascript widgets – without exception everyone who’s used it here has had their own little jQuery epiphany. It’s quite funny to watch, people tend to resist it to start with (particularly the hardcore coders) – but when they use it for a while and see how much pain it can save you they soon come round.

One thing that was missing until now though was a way of getting jQuery intellisense in VS2008. Yesterday I spotted this article by James Hart which describes how this missing functionality can be be added. You need to make sure that you have this Visual Studio 2008 Hotfix installed then follow the instructions in James’ article and as if by magic you’ll have intellisense for your jQuery code! This has gone down a treat here and looks set to make life an awful lot easier.

How to create a sticky footer in ASP.net pages

admin — Thu, 25 Oct 2007 16:29:53 +0000

When we were developing the Tesco Property Market website there was a requirement to be position the footer either at the bottom of the browser window or at the end of the content if it was over one screen high. On the original site I wasn’t able to acheive this, due to the way some of the web controls had been coded the side bars had to be absolutely positioned and were often taller than the main content.

With the recent redesign I completely scrapped the existing templates and started again doing away with the absolute positioning. However, none of the techniques I’d used in the past for footer positioning worked and for the life of me I couldn’t work out why.

Eventually the answer dawned on me; the form element that .net annoyingly insists on wrapping everything in was not being targeted by the CSS. Once I’d realised that it was fairly straightforward to get the footer working. Here’s how I did it:

The basic xhtml structure for your page should look like this

And here’s the CSS to work the magic

html, body, #aspnetForm
{
	height:100%;
	/* without this the footer stays at the end of the content
           - not the botom of the viewport */
}
#container
{
	margin:auto;
	min-height:100%;
	width:980px;
	/* #container is at least the height of the veiwport and contains
            everything except the footer*/
}
#contents
{
	padding-bottom:3em;
	/* #contents contains everything excepte the footer and adds padding at least equivalent to the height of the footer beneath the content*/

}
#site-info
{	height:3em;
	margin :-3em auto 0 auto;
	width:980px;
	/* #site-info (the footer) contains the supplimenatry navigation and copyright info.
	   It's height and negative top margin should be the same as the bottom padding in #contents   */
}

This technique was based on Cameron Adams’ “footerStickAlt”.

Blogged with Flock

Quick tip for using XHTML Strict with ASP.net

admin — Thu, 25 Oct 2007 12:14:40 +0000

One thing that has always infuriated me with .net is it’s insistence on adding an invalid name attribute to the asp.net form*.

About a month ago I found a nice easy cure for this, so I thought I’d share it. All you need to do to stop .net adding the name attribute to the form is add an xhtmlConformance tag to your web.config like so:

Hopefully that’ll be of some use to someone.

*What annoys me more is the fact you have to have a form tag on every page for .net to work, but that’s a rant for another day.