Using jqueryUI’s blur and focus to hide on mouseout

As you probably already know, jquery UI triggers an focus and blur event for each element of the menu so it’s a bit tricky to hide the hole menu for example when the mouse hovers out. Still there’s a workaround:

                        $('.menu_dropdown').click(function() {
		    	    var self = this;
		    	    var test_timer = null;
	    		    $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).menu('destroy'); $(this).css('display',''); $.removeData(this,'uiMenu'); },
		    		    blur: function(event, ui) {  test_timer = setInterval(function() { $(self).next('ul').menu('destroy'); $(self).next('ul').css('display',''); $.removeData($(self).next('ul'),'uiMenu'); clearInterval(test_timer); }, 500); },
		    		    focus: function(event, ui) { clearInterval(test_timer); }
		    		});
	    	   });

or you can use the hiding method presented here.

New jquery UI destroy menu not quite working

Well jquery 1.9 is here and so is the version 1.10 of the popular jquery UI. It has some nice additions like menus, tooltips, menu bars and so on. However the menu seems a little bit tricky to use when using an element to trigger it.

let’s have this example:

      some actions
      

ok now the style:

   .themenu { display: none }

and finally the javascript:

                    $('.menu-expander').click(function() {
		    	    var self = this;
	    		    $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).menu('destroy'); $(this).css('display',''); $.removeData(this,'uiMenu'); },
		    		    blur: function() {}
		    		});
	    	   });

Calling the destroy will leave the menu object intact in the element’s data array under the name “uiMenu”. So destroying it takes the 3 steps shown in select method above.
You could also just hide it on select using this:

     $('.menu-expander').click(function() {
		    	    var self = this;
                            var mn = $(this).next('ul');
                            if(mn.data('uiMenu') != null) mn.show();
                            else 
	    		        $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).hide(); },
		    		    blur: function() {}
		    	        });
	    	   });

[rb] Load all forms/links within tabs in the same place with jquery

One of the things that probably most of the people stumbled upon while working with jquery tabs is reloading the content of a form submit/link within the same window/tab window. That’s pretty simple to achieve with the following code:

//this one will work for forms
$("#tabs form").live( 'submit' , function() {
		var self = this;
		$.ajax({
		  type: (!$(this).attr('method') ? 'post' : $(this).attr('method')),
		  url: $(this).attr('action'),
		  data: $(this).serialize(),
		  success: function(data) { $('.ui-tabs-panel:visible').html(data); }	 
		});
		return false;
	});
//this one will work for links
$("#tabs > div a").live( 'click' , function() {
		var self = this;
		$.ajax({
		  type: 'get',
		  url: $(this).attr('href'),
		  success: function(response) { $('.ui-tabs-panel:visible').html(response); }	 
		});
		return false;
});

While there might be some other implementations with a smoother code, this will do what is supposed to …

JQuery true background changer

While looking for a background changer, i couldn’t find one that would fit my needs … that’s when i realize that it would take less to make one myself … while it might not work just perfect yet, it was just enough for what i needed … damn laziness …

Test case: http://www.insightmed.eu/showcase.html

JScript plugin: http://www.insightmed.eu/media/interactive/vendor.jquery.js

Usage: $(‘selector’).bgChange({ images: [‘image 1′, ‘image 2′, ‘image 3′, ‘etc.’], dir: ‘images dir’, apply_classes: [‘apply these classes to the helper used for the effect’] });