dBlog.com.au

Big Click Studios is a dynamic company based on the NSW Central Coast with a relaxing and innovative work environment.

Fantastic office just minutes from the beach and train station. You will be working on many of our current and upcoming web development projects all bursting at the seams begging for the right person to dig their teeth into!

Essentials:

• PHP5 + MySQL
• XHTML + Javascript (jQuery a bonus) & CSS
• An eye for well structured code and clean database structures
• Understanding of Object Orientated Programming

Bonuses:

• CakePHP framework
• AJAX
• Flash / Actionscript 2 & 3

Personal characteristics:

• Must be able to work as part of a team
• Proactive involvement in the business (we work closely with all staff to provide a safe, fun and mentally challenging environment)
• Strong communication skills (both written and spoken)
• Xbox skills are not required but highly desired if you dont want to get whooped at lunch!

For more information please send an email to jobs@bigclick.com.au or give us a call on 1300 677 924.

Look forward to hearing from you soon!

Popularity: 1% [?]

I have been working on a clients project recently and really didn’t like the way the standard selects looked on the page and as we all know they are impossible to style consistently across all browsers. Being a jQuery fan I knew that there must have been an existing plugin to help…but alas there were many plugins that kind of worked, some of them didn’t include a full feature set, some didn’t work in all browsers and some didn’t degrade back to regular selects when needed (e.g. GoogleBot, Screen Readers, no JavaScript, etc).

I did however manage to find a reasonable good custom select over at http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons (even happened to be a fellow aussie!). It wasn’t perfect and it wouldn’t allow for multiple selects on the one page and the icons weren’t really what I needed. Reading through the comments I found that someone else (http://www.ildavid.com/dblog/selectcustomizer/) had made some modifications to allow for multiple selects on the one page. This was great I was getting closer to the solution that I needed, but there were still some issues like keyboard navigation and the ability to click anywhere in the window to close the select just like a regular select.

So I set out to further modify the code and put in some of my own requirements and then re-share it, I have managed to get the drop-down to close when you click outside it, I have also introduced keyboard navigation (up, down and enter). To get the keyboard navigation working I needed to use the scrollTo plugin to allow smooth scrolling up and down in the select.

There are still a few minor bugs that need to be fixed but it works enough for me, one bug is that in IE you need to click in the drop-down area if you don’t want the page to jump when using the keys.

I would also like to get the menu to activate when a user is tabbing around the site, but that’s a job for another rainy day!

$.fn.SelectCustomizer = function(){
    // Select Customizer jQuery plug-in
	// based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/08/01/adelaide-web-designs-releases-customselect-with-icons/
	// modified by David Vian http://www.ildavid.com/dblog
	// and then modified AGAIN be Dean Collins http://www.dblog.com.au
    return this.each(function(){
        var obj = $(this);
		var name = obj.attr('id');
		var id_slc_options = name+'_options';
		var id_icn_select = name+'_iconselect';
		var id_holder = name+'_holder';
		var custom_select = name+'_customselect';
        obj.after("<div id=\""+id_slc_options+"\" class=\"optionswrapper\"> </div>");
        obj.find('option').each(function(i){
            $("#"+id_slc_options).append("<div title=\"" + $(this).attr("value") + "\" class=\"selectitems\"><span>" + $(this).html() + "</span></div>");
        });
        obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + this.title + "</div><div id=\""+id_holder+"\" class=\"selectwrapper\"> </div>").remove();
        $("#"+id_icn_select).click(function(a){
			if($("#"+id_holder).css('display') == 'none') {
				$("#"+id_holder).fadeIn(200);
				$("#"+id_holder).focus();
				a.stopPropagation();
				$(document).keypress(function(e) {
					if(!e) var e = window.event;
					e.cancelBubble = true;
					e.returnValue = false;
					if (e.stopPropagation) {
						e.stopPropagation();
						e.preventDefault();
					}
				});
				$(document).keyup(function(e) {

					if(e.which == 40) {
						var lastSelected = $("#"+id_holder+" .selectedclass");
						if(lastSelected.size() == 0) {
							var nextSelected =  $("#"+id_slc_options+" div:first:");
						} else {
							var nextSelected = lastSelected.next(".selectitems");
						}
						if(nextSelected.size() == 1) {
							lastSelected.removeClass("selectedclass");
							nextSelected.addClass("selectedclass");
							$("#"+custom_select).val(nextSelected.title);
           					$("#"+id_icn_select).html(nextSelected.html());
							var rowOffset = (nextSelected.offset().top - $("#"+id_holder).offset().top);
							if(rowOffset > 130) {
								$("#"+id_slc_options).scrollTo(($("#"+id_slc_options).scrollTop() + 27) +  "px");
							}
						}

					} else if(e.which == 38) {
						var lastSelected = $("#"+id_holder+" .selectedclass");
						var nextSelected = lastSelected.prev(".selectitems");
						if(nextSelected.size() == 1) {
							lastSelected.removeClass("selectedclass");
							nextSelected.addClass("selectedclass");
							$("#"+custom_select).val(nextSelected.title);
           					$("#"+id_icn_select).html(nextSelected.html());
							var rowOffset = (nextSelected.offset().top - $("#"+id_holder).offset().top);
							if(rowOffset > 0) {
								$("#"+id_slc_options).scrollTo(($("#"+id_slc_options).scrollTop() - 27) +  "px");
							}
						}
					} else if(e.which == 13) {
						$("#"+id_holder).fadeOut(250);
						$(document).unbind('keyup');
						$(document).unbind('keypress');
						$('body').unbind('click');
					}

				});
				$('body').click(function(){
					$("#"+id_holder).fadeOut(200);
					$('body').unbind('click');
					$(document).unbind('keyup');
					$(document).unbind('keypress');
				});
			} else {
				$("#"+id_holder).fadeOut(200);
				$('body').unbind('click');
				$(document).unbind('keyup');
				$(document).unbind('keypress');
			}

        });
        $("#"+id_holder).append($("#"+id_slc_options)[0]);
		$("#"+id_holder).append("<div class=\"selectfooter\"></div>");
		$("#"+id_slc_options+" > div:last").addClass("last");
        $("#"+id_holder+ " .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").click(function(){
            $("#"+id_holder+" .selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            $("#"+custom_select).val(this.title);
            $("#"+id_icn_select).html(thisselection);
            $("#"+id_holder).fadeOut(250);
			$(document).unbind('keyup');
			$(document).unbind('keypress');
			$('body').unbind('click');
        });
    });
}

You can see a working demo here

You can also download a full working example here

Popularity: 2% [?]