Dzulqarnain Nasir

Get Nested Property Of An Object

I was working on a small filtering script for a GMaps project, and I needed to create a filtering method to filter markers based on their properties. The catch is, the filtering method has to be able to filter out markers based on several types of properties. Not all at once though.

So obviously I can write a separate method for all the types of filter material required. Every method will grab all the markers on the map, iterate through them, filter out the irrelevant markers, and return the results. But that would result in code duplication, and that’s not how I roll. So instead, I created a single function that handles the filtering, and one method that allows you to get property of nested objects using their property path.

Twitter Bootstrap in IE8 - 'eval' is null or not and object

I’ve recently decided to move onto LESS for my current and future projects, after seeing how simple CSS can be using LESS. So I downloaded Twitter Bootstrap 2.0.2 and Less.js 1.3.0 and included them in Visual Studio. Mind you, you might need to install Mindscape Web Workbench to be able to add LESS files via the Add New Item window. You can get it via Visual Studio’s Extension Manager.

Anyway, after “installing” LESS into my project, I ran some tests. I opened up Rockmelt, my default browser, and lo and behold everything worked just like it did using standard CSS. Then I opened the same project using Internet Explorer 8 (I seem to be the only one at the office who still uses IE8) and I was greeted with this error.

Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

I’m working on a small project at work using KnockoutJS (which is awesome by the way) and I ran into a problem which seems to only occur on Firefox. I’m using the beforeRemove method for my template that is supposed to use jQuery’s fadeOut method to fade the element out before removing it from the DOM. While this works on Chrome, and even Internet Explorer (!!!), I am greeted with the following error on Firefox (Firebug).

Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]

A quick search on ol’ Google and I came to the conclusion that jQuery is attempting to style an element that no longer exists. This is weird, since the beforeRemove method was supposed to run before the element is removed from my observable array. So I tried replacing fadeOut with a simple hide method, and sure enough, it worked. So it means that it does run before the element is removed. But why doesn’t it work with fadeOut?

So I’m guessing the remove method is somehow called while the fadeOut method has yet to complete its run, resulting in jQuery to lose its DOM element to fade out.

My workaround is simple, run the remove method AFTER the fadeOut method is complete. In the below example, I have an Ajax call function called serviceProxy that contains a method called removeStory. Upon success, it will run the callback code which is supposed to fade out the deleted DOM element, and remove it from my observable array.

serviceProxy.removeStory(story.id(), function () {
	$('#post-' + story.id()).animate({ height: 0, opacity: 0 }, 'normal', function () {
		ctx.newsFeeds.remove(story);
	});
});

So I’ve decided to avoid using the beforeRemove method, at least until the KnockoutJS people come up with a solution and do this instead. It may not be the most elegant solution, but it works. You could also use jQuery’s then method for this, if you’re planning to do something else.

I’d like to hear from you guys about other solutions you guys came up with. Preferably something that would allow me to use the beforeRemove method.

Wassalam

A sneaky way of styling file input form fields

There may come a time when you need to style a file input form field on your page, but here’s the catch; there are currently no known way of styling the file input fields.

There are however, ways around this. Call it a hack, if you will. In this tutorial, I will demonstrate one of the methods you can use to “style” your file input fields. Note that this method does not work in Internet Explorer, and I’ve only tested it on the latest versions of Firefox (10.0.2), Chrome (17.0.963.56), Safari (5.1.2) and Opera (11.61).

Getting MediaElement to work with Media Gallery's lightbox (Colorbox)

OK, here’s a quick one for you. Say you’re setting up a media gallery in Drupal using the Media Gallery module. Say you want to include videos along with your images in said gallery. Say you want to use Media Gallery’s lightbox feature to allow your visitors to view your media in a nice pop-up JavaScript box. Say you want to allow your visitors to play your videos in said box using the MediaElement module.

Well, if you’re reading this, that means you’re facing the same problem as I did a few hours ago. The player just fails to load, and you’re left with something that looks like this;