liScroll jQuery news ticker customisation with next/previous/play

This post has been moved to http://the-taylors.org/blog/2010/03/15/liscroll-jquery-news-ticker-customisation-with-next-previous-play/

Your Green Idea – flowers, bees and hijacking

Today is the launch of Phase 2 of ‘Your Green Idea‘, part of Marks and Spencer’s Plan A initiative to become the world’s most sustainable major retailer by 2015.

We’ve had a few challenges with this project the main one being part of the remit was to build the site so that particular links would slide elements of the current page out and elements of the new page in from either the left or right hand side of the screen. The background to the header needed to go behind the logo and the primary navigation; and the content needed to sit on top.

You can visit the Your Green Idea site at http://yourgreenidea.co.uk

Finally managed to release a beta for juxtapo

Phew, I’ve been working hard at getting unit tests done, bugs ironed out and docs written so that I can get a release of juxtapo out and now it’s here.

juxtapo is a personal project I’ve been working on which gives in browser overlays and previews for template building. It’s been so valuable to me in my day to day work that I thought I should share it out.

So take a look and let me know what you think.

Example using jQuery with ASP.Net (SOAP) WebServices

I don’t know about you, but I’ve had enough of slow loading aspx pages because of the huge ScriptManager JavaScript files that are needed to be downloaded. I also don’t see why I should have to register web services through it to be able to use them in my client side code.

Once answer is to use jQuery. We can access Asp.Net web services (SOAP) removing the need for the ScriptManager on your aspx page.

Asp.Net web services either use SOAP or JSON and for this post I will show you how to access your webservice using SOAP.

This is how you can do it:

First of all I like to organise all my JavaScript in to namespaces so that it stays neat so I declare the DT object.

var DT = {}

Then because we will be using Soap I have created a useful Soap function called getEnvelope which saves having to add the envelope xml each time you want to build a request.

DT.Soap = {
  getEnvelope: function(body) {
    var soapEnv =
    "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
        <soapenv:Body> \
           " + body + " \
        </soapenv:Body> \
     </soapenv:Envelope>";
    return soapEnv;
  }
}

You can use this ws object each time you define a new webservice.

DT.ws = function(wsUrl) {
    this.wsUrl = wsUrl;
}
DT.ws.prototype = {
    wsUrl: null,
    getData: function(soapEnvelope, fnComplete, fnSuccess, fnError) {
        $.ajax({
            url: this.wsUrl,
            type: "POST",
            dataType: "xml",
            data: soapEnvelope,
            contentType: "text/xml; charset=\"utf-8\"",
            complete: fnComplete,
            success: fnSuccess,
            error: fnError
        });
    }
}

Defining a new web service would then look something like the code below. We first create a new ws object instance and then define the HelloWorld method.

DT.wsCustom = new DT.ws("wsCustom.asmx");
DT.wsCustom.HelloWorld = function(fnComplete, fnSuccess, fnError) {
    var soapEnv = DT.Soap.getEnvelope("<HelloWorld xmlns='http://yournamespace.com/'></HelloWorld>");
    this.getData(soapEnv, fnComplete, fnSuccess, fnError);
}

Finally you can use your new web service with the following code.

DT.wsCustom.HelloWorld(function(xData,textStatus){
    alert("This is the xml response: " + xData.responseXML);
});

This is just a quick start to using jQuery to access Asp.Net web services. Here is part 2 to include XSL transforms and more advanced web methods.

Hope this helps.

jQuery Interface Animate function

Over the last week I have struggled with the frustrating override of the jQuery Animate function by the jQuery Interface Library. The frustration being that the Interface library is pretty awesome but this function requires a different set of variables and objects past to it than the original. This not only breaks any other plugins which use the original and you want to use alongside but surely this isn’t good practice for overriding functions!

I got round it by downloading the Interface source and only including the elements  I needed for the application.

jQuery StarRating Asp.Net webcontrol

Here is the jQuery Star Rating Asp.Net web control. It comes in three sections: the vb.net webcontrol, the css and the javascript. Credit and thanks to Ritesh Agrawal and the guy from PHP Letter for the jQuery and css code. I have made small modifications to the jQuery code to grab the currently selected rating from the selected radio button.

Add to delicious