javascript

MooTools slide effect and Internet Explorer CSS

/ James Fitzsimons / Leave a comment

Have you struck a problem with MooTools slide transition and CSS styles not appearing correctly in IE? I ran into this exact issue the other day where I was trying to slide a DIV element up and down based on a click event elsewhere on the page. The CSS style applied to the DIV looked something like this:

#slidingDiv {
    padding-bottom: 10px;
    background: white url(../images/box_bottom.gif) bottom no-repeat;
}

The problem seems to be that IE can’t calculate the height of content in the dynamically resized DIV correctly and thus the padding-bottom and hence my background image (nice rounded corners in this case) wasn’ showing.

The solution

The fix turned out to be simple enough, I just made the height of the DIV fixed in the CSS. Once IE knew how big the inner content was supposed to be everything started working correctly.

MooTools ASP.NET Webservice Ajax calls.

/ James Fitzsimons / Leave a comment

I had some trouble trying to find an example of how to call an ASP.NET webservice from MooTools. I eventually pieced the bits together from a couple of forum posts and thought I’d post an example here in case anyone else was having the same problems.

If I have an ASP.NET webservice that has a GetById method that takes a single int parameter and returns an object I can call it with the following code:

function doAjaxWebServiceRequest (id) {
var completeDelegate = Function.createDelegate(this, this.callback);
var failureDelegate = Function.createDelegate(this, this.error);
var request = new Request.JSON({url: ‘http://hostname/MyWebService.asmx/GetById’,
onComplete: completeDelegate,
onFailure: failureDelegate,
urlEncoded: false,
headers: {“Content-type”: “application/json”}
});
request.send(JSON.encode({‘id’: id}));
},

The returned object will be in JSON format. The lines where I create my callback delegates using the Function.createDelegate method allow me to set the scope of ‘this’ in my call backs to be the object I making the request from.

Hope that helps someone out!

Mootools differences in IE and Firefox

/ James Fitzsimons / Leave a comment

We’re using the MooTools scripting framework on our site and today I discovered a strange difference between Firefox and IE. I was creating an element and injecting it into the DOM and then trying to change its CSS class and styles.

addClass and setStyle
MooTools provides methods on it’s Element class that allow you to manipulate the CSS styling of an element. You can do things like:

// Add a css class to the element with the id foo
$(‘foo’).addClass(‘fooStyle’);

// Set the width of the foo element
$(‘foo’).setStyle(‘width’, ‘100px’);

Unfortunately when viewing an ASP.NET page in IE that includes a script that uses these functions you get a script error saying that the “Object doesn’t support this property or method”

At first I thought the solution was to go back to basics:

// Add a css class to the element with the id foo
$(‘foo’).className = ‘fooStyle’;

// Set the width of the foo element
$(‘foo’).style.width = ‘100px’;

However I then realised that I was trying to call the MooTools Element methods on a vanilla element object rather than a MooTools one. The second line below solved the problems in IE and meant I could go back to the first way of applying the styling.

var myelement = document.createElement(“a”);
myelement = $(myelement);

IE vs Firefox
In retrospect it seems strange that this worked in Firefox, I guess Firefox must be able to do some sort of implicit conversion to a MooTools element in order to resolve the method call.

MooTools seems really great, it’s lightweight and easy to use. The learning curve seems much lower than some of the other more complicated offering available.

The only reservation I have at this point is that from what I’ve read on the forums it doesn’t play nicely with any other scripting framework due to it’s lack of namespaces and the maintainers seem quite hostile to anyone who suggests that would be a good thing.