Tips and Tricks

Browser version detection in Javascript

3/4/2008

Browser version detection in Javascript Example usage

Geting the position of the mouse pointer (cursor) in JavaScript (Works in IE7)

3/4/2008

Geting the position of the mouse pointer in JavaScript (Works in IE7) The following function will return the position of the mouse pointer based on the event. It actually works in IE7. Example usage

Get the Top and Left location of an element with JavaScript

17/3/2008

The following code will return the top and left position for an element.

Set Input Focus on a Control Programatically Added to an ASP.Net Page

1/12/2007

Set Input Focus on a Control Programatically Added to an ASP.Net Page This little problem had the potential to drive me nuts for hours, I was fortunate to stumble over a blog with 100s of comments re problems of this nature and how to solve it. Most of the discussion was about using JavaScript, then I remembered I was using AJAX in my project and created a solution. '''The Problem''' I had a web page that automatically adds and removes TextBoxs based on a user's input e.g. a user may select "yes" in a DropDownList to a question and we need to get more information, so we add a Please Specify textbox on the postback of the DropDownList . But how on earth do you set the focus?? I tried adding the control to the page and then using its focus command, which didn't work. :-( '''Solution''' Luckly I was using Ajax on the page and I had a ScriptManager in the MasterPage. The script manager pumps out JavaScript, so I used a method on it to set the focus of the control using its client ID. This is the unique ID it is given on the page. Thank goodness for Google. I hope this helps you out..

Custom Validators using Client Side JavaScript

2/11/2007

Custom Validators using Client Side JavaScript In my latest project I am really enjoying using the Ajax Control Toolkit, particularly the ModalPopupExtender. I've been using the popup panels to capture data, but I needed to validate the data that a user enters into certain fields. ASP.net's validators are the obvious choice, but when you have employed an AJAX control you need to validate the entry on the client's browser. This is easy to do using the '''ClientValidationFunction''' attribute of the validator. then create a JavaScript function to do the validation. Here I have created a Regular Expression to validate decimals. Then simply set the args.IsValid property to either true or false and return. In this example I have used the ScriptManager to write out a JavaScript variable ('''DiscountPercentageId''') with the ClientID of the ASP.net TextBox I'm validating. You'll also notice my GetElement function to handle the browser compatibility. I hope this proves useful in your next AJAXian web application. ;-)

Firefox doesn't use parentElement, it uses parentNode

1/8/2007

Firefox doesn't use parentElement, it uses parentNode JavaScript in FireFox doesn't support the function parentElement. You should use parentNode instead. Example: #h#myElement.parentNode;

Activating flash automatically with javascript

10/7/2007

Activating flash automatically with javascript I find it really annoying when you go to a website and you have a flash movie or flash navigation and you have to click on the flash to activate it before you can start interacting with it. With a little bit of javascript you can automatically activate the movie so it becomes a seemless part of a website. Here is how it works: Include the javascript file you can find here: http://blog.deconcept.com/swfobject/ Then put this on your page where the flash is. Thats it! If javascript is disabled then the content of the div is shown so you can put a useful message there. There is a full breakdown of each part of the solution with further examples at the link above.

Image reflection the easy way!

5/4/2007

Image reflection the easy way! After seeing the nice new reflection effects in some wpf/e examples from Microsoft and other sites that use reflection in their logo. I wanted to start using them on images in my sites. I started by opening photoshop and making the reflection part of the image, then thought there must be an easier and quicker way of doing this. Well there is... I came across this site, http://cow.neondragon.net/stuff/reflection/ , which achieves the same result using a small javascript file. Include that on the page then all you need to do is add class="reflect" to the image and you're good to go. You can change the height of the reflection by adding rheight50 after the reflect ie. Just increase of decrease the number to change the height. Same thing if you want to change the opacity of the reflection too: Again, change the number to increase or decrease the opacity. There are more details in the download, along with full examples. Thats all there is too it. Simple but effective.

Web service calls from javascript using ATLAS (part 3) - Complex properties

25/8/2006

Web service calls from javascript using ATLAS (part 3) - Complex properties Part two covered returning objects with multiple properties from a webservice and accessing those properties from javascript. This article demonstrates that even 'complex' properties are supported by the ATLAS framework. A complex property in this context is one like below: The getVcard method returns some HTML in the vCard microformat. Your javascript stays nice and simple as below... The reason this works is that the javascript object is given each property from the .NET object by the ATLAS framework. If there was a property that showed the current time then the javascript version of the property would always show the time at which it was created. I have found this to be a useful to keep my code/logic where I want it - not embedded in HTML!

Web service calls from javascript using ATLAS (part 1)

25/8/2006

Web service calls from javascript using ATLAS (part 1) ATLAS provides a fantastic mechanism for making web service calls from javascript code. Take the simple web service below... You need to add reference to this web service to your ASP.NET page. This is achieved using the ScriptManager tag as in the example below... Infact only the Services and ServiceReference elements are added to the basic scriptManager tag. Note taht there seems to be a limitation in the CTP that I am using where the web service needs to be in the same web site as your project. This is a serious limitation but it shouldn't be too hard to create a proxy for any web service runing elsewhere until this is fixed in the next CTP. You can now make JavaScript calls to the web service as shown below... I hope you find the example useful in your own applications.

Not using Google Analytics? You should be!

23/8/2006

Not using Google Analytics? You should be! Over the past few days I have received a number of comments regarding a recent article I published about re-directing a Page by Appending an HTTP Header, and linking this with '''Google's Analytics''' '''PPC tracking''' for '''Affiliate''' click-throughs. Read it here AppendHeader. To cut to the chase, I thought I'd put together an article regarding '''Analytics''' and just how easy it is to implement in your code. Still not convinced? Then take a look at the screen shot below of '''GeekZilla's Analytics'''. All this information for free!! When combined with Adwords you can really understand how effective your marketing campaigns are with a clear view of your ROI. The Geo Map Overlay is a particular favourite of mine. We even have readers in Beijing. Getting started Okay, so I've got you interested. You'll need to sign up to Analytics first. Occasionally you'll be placed on a waiting list, this isn't a problem and you'll get access soon. http://www.google.com/analytics/sign_up.html Got an account, set up your site This couldn't be easier. From the main page simply click '''Add Website profile''' in the Website profiles box. From here simply enter your domain name and Analytics will generate the JavaScript snippet required to implement the tracking in your site. This is where '''ASP.NET''' comes into its own. Hopefully you will be using a '''MasterPage(s)''' in your application and you merely have to cut and paste the Analytics Snippet into the header of the document. If you're not using '''ASP.Net''' then use an include of some description or stick it in the header of each page if you have time on your hands. ;-) What's next? Once you've got your tracking Snippet installed, the Analytics application can check your tracking is installed correctly and it will start to receive data (generally 24 hours behind). You can exclude certain traffic by using the filter manager so you're not tracking your own hits. Conversion Tracking If you're running PPC campaigns you'll have a '''Google's Adwords''' account. Simply set up the conversions you want to track in the Conversion Tracking tool and Cut and Paste the generated snippet into your key pages. You can track Purchase/Sale, Lead, Signup, Views of a key page, or anything else you're interested in. You can even make use of the '''google_conversion_value''' variable by dynamically setting it based off the value of the sale, or if you're generating a lead and know the commission paid simply hard code it. This will give you a view of your ROI from your marketing campaigns. I hope this has been useful, and that you choose to use Google Analytics if you haven't made that choice already.

TAB inside input boxes

13/6/2006

TAB inside input boxes When you want to insert a TAB character inside a textarea (or a textbox) in a web page, you press TAB key and the focus moves to another field in the page instead of a TAB character being inserted into the textarea. The problem is that TAB key is reserved for web pages to navigate through the objects that can be focused (or blurred) inside the web page. TAB characters are especially useful when you want to display formatted text in your HTML text field. In order to solve this problem, we need to override one of onkey related events of the text field so that the TAB character would be inserted where the cursor stays instead of the text field losing the focus to the next control in the web page. There are three onkey related events: onkeydown, onkeyup and onkeypress for an HTML text field. However, onkeypress only fires for some special character set and it does not fire for the TAB key. Therefore, we can only use onkeydown or onkeyup. We will use onkeydown event since it fires as soon as the user presses a key, not when the user releases a key. Define onkeydown event for the asp:textbox controls in section of your ASPX page as follows: Then, add the following JavaScript code into section of your ASPX page: The above code will only work for IE browsers. You will need to handle the onkeydown event differently for other browsers.