Javascript


Well i’m thinking once again on Impromptu. My new thoughts are having multiple “states”. This would be completely optional and would not change the way you can use Impromptu in its simplest form. The idea behind States is after submitting the prompt, without closing it may morph into another “State” (different content and buttons ideally using pretty effects). That being said there are a few ways I could go about doing this. I could allow a string or a array/hash for my content argument:


//simple one state
$.prompt('hello world');

//complex multi state
$.prompt(['hello 1', 'hello 2', 'hello 3']);

While this seams nice we still may have different buttons for each state, and this isn’t very flexible as far as that goes. Another option may be to have another function to add extra states, sort of queuing up the prompts..


$.prompt('my state');
$.addPromptState('my state 2',options1);
$.addPromptState('my state 3',options2);

//or pass a hash to name our states
$.addPromptStates({
state1: {...},
state2: {...},
state3: {...}
});

So again I’m just throwing it out there to see if I get any bites. This isn’t set in stone but I think it could be a nice feature to ad some application like effects and feeling to Impromptu. Any one have any thoughts or suggestions?

As you may have read from an earlier post I have been searching for a nice solution to figuring out which element currently has focus. Reason being is that it would be nice to detect if any element within Impromptu has focus, if not focus Impromptu. This way it keeps users from accessing the underlying page. The attempt I made was pretty simple: Apply focus event to ad a class name to the element, and to remove it on blur. Then I just need to search for that class name within the group of elements. My solution was a jquery plugin which looks like:


(function($){
$.fn.focusfinder = function() {

this.each(function(i){
$(this).find('*').focus(function(){
$(this).removeClass('focusfinder').addClass('focusfinder');
}).blur(function(){
$(this).removeClass('focusfinder');
});
});

return this;

};
})(jQuery);

Ok, maybe that isn’t the most efficient solution, but its completely experimental. Anyway, to activate this puppy you would simply call this line to assign the events:


$('#my_el').focusfinder();

What I found was that different browsers fire focus and blur events differently, thus making my solution somewhat inaccurate. Firefox worked as expected, the others were a disappointment. Any ideas?

Thanks to Harry over at Code Bus we now have a PHP version of JsonSQL. For those not familiar with JsonSQL, it allows you to use basic SQL syntax to parse json. Supported syntax includes selects, order by, where, and limit and allows you to apply conditions on objects of any depth within the json or array and return an array of the objects selected. Where clauses are not sql conditions, but conditions from Javascript(or PHP in this conversion), so you have full access to that language’s functions.

Lately I’ve run into a brick wall. While working on the new version of Impromptu, I’ve had many requests to restrict the tab out of the prompt. Problem is how do you determine which element has focus without some ugly hacks like adding a class name to the element on its focus event, then removing it on blur.

The ideal solution would have jquery selector for :focus which would return the focused element, so then I would do something like so:


if($('.jqi :focus').length == 0){
$('.jqi').focus();
}

The problem is this selector isn’t implemented, or is it(are there any plugins out there)? Is it possible to retrieve such? Well of course everything is possible, but may not be pretty! So, does anyone have any suggestions?

I realize this video is over a month old, but hey, it covers some good material with jQuery. Not to mention the kid presenting is 12 years old. Definitely worth watching!

I’ve was playing around with mootools and threw together a quick little function to do a fade in, fade out rotation of “layers” which would be just an image rotation or whatever you want to rotate. Here’s the function:

function startGalleryRotation(selector,delay){
var i = 0;
var layers = $$(selector);
delay = (delay == undefined)? 6000:delay;
setInterval(function(){
layers[i].fade(’out’);
i = (i == layers.length-1)? 0 : i+1;
layers[i].fade(’in’);
},delay);
}

To kick off this mighty beast we would then call:

startGalleryRotation('#galleryRotation img',6000);

Of course you will need to wait until the dom has loaded. Ok, wasn’t much but thought I’d share!

For all of you ColdFusion programmers out there you know what I’m talking about,.. that cfdump. When in doubt this nice little function will dump out any variable in a readable layout. Well there is also such a tool for javascript thanks to Net Grow! Although it has been around for some time now, we tend to forget about it.

Javascript Dump

I’ve been playing with JSON a bit lately and it seems there’s not a lot of options for searching JSON such as the way xpath can search XML. Since there aren’t any slick libraries out there I have been thinking on possibilities of creating such. Would it be slick to have an sql-like syntax parse and search json? You could then do something like so:

select name,age from people where age > 20 order by name limit 5

After thinking it through its basically a nice regex to parse out the query, then just pass the arguments to a function to parse it. Being one who interacts with sql on a regular basis this seems quite appealing, especially if you have an html table to sort or there are a million other possibilites! I havn’t done this but I have played with the regular expression to do such. Also the same principle could apply to XML, but it would be rather pointless with xpath.

I was waiting on the day when jQuery would have a plotting plugin. Wait no longer! Flot is now on the scene. With the easy jQuery syntax I’m sure it will win the hearts of plotting programmers everywhere:

$.plot($("#placeholder"), data, options);

Now I just need to find somewhere to use it!

Being the curious mind, have you ever been bouncing around to different javascript frameworks searching for your happy medium? Well I have for the past few years, and I’m still no where near settling with just one. As of late I’ve been in a jQuery groove, but who knows what next week will bring, especially after this startling test by Mootools.

Mootools has previously been known for its silky smooth effects and great dom utilities, but they also have performance on their side as well. jQuery on the other had has to have the friendliest syntax ever with chaining and selectors, with just enough effects to make you hungry for more. I really have to say this makes me frustrated. Just as you get comfortable with a framework something as disturbing as this test comes about.

Well its not at all bad news. I am always looking for something better, but I’m not convinced that mootools is any better at this point. Sure speed is a plus, but whats a millisecond compared to usability? I do like jQuery’s documentation better, as well as the infinite plugins available. For the sake of quality and flexibility though, even if you are situated with one framework, it always pays off to have another framework under your belt. While I don’t foresee this test making many jQuery users abandon their beloved framework, but there will be some splitting time with Mootools…

Next Page »