Category Archives: jQuery

jQuery hasAttr Option

So on searching for the elusive hasAttr function in jQuery (which doesn’t exist if you were wondering) I found all the usual !== undefined answers and then thought – We already have a function for this! Just not a simple direct function.

The solution I propose is thus:

$(element).filter("[attrName]").length > 0;

Simple huh? And if you want to extend jQuery then you can use the following:

$.fn.hasAttr = function(attr){
    return this.filter("[" + attr + "]").length > 0;
}

It will allways work, but the logic for more than one element will be if any one of the elements has the attribute. If you want an allHasAttr function it would go as follows:

$.fn.allHaveAttr = function(attr){
    return this.filter("[" + attr + "]").length == this.length;
}

Cascading/Filtering Dropdowns.

So I haven’t written anything in a while as work has been rather busy, so here’s a quick plugin I have had to build to filter selects. Hit the link for the code: http://jsfiddle.net/Xanetia/A8zm7/.

That link has a fairly simple example, also demonstrating chaining back and forwards, more complex ones could be not filling in the filtered dropdown and passing the options through as the originalOptions parameter – I feel that the comments are fairly self explanitory. Feel free to comment/post bugs/ask questions.

JSfiddle

Just thought that I would post about this great site I found called JSfiddle, great for live demo’s of a bit of web code for javascript or any of it’s forms.

I am going to have a look at changing over my examples and demos to this so that they are easier to have a quick look at. Here’s a quick demo of jQuery Tools minimal tab setup in My JSFiddle. It looks like this has some great other functionality as well, so we’ll see. For example you can embed the results, just not in wordpress due to their iFrame restrictions… (someday I’ll get better hosting)

jQuery Find-multiselect shorthand

This is as much for my reference as anything else, so it will be rather brief – but it is something I forget regularly.

The jQuery selector: $(“.three”, “.two”, “.one”)

Selects elements with the class ‘three’ inside elements with the class ‘two’ inside elements with the class ‘one’. Equivalent to $(“.one .two .three”) and $(“.one”).find(“.two”).find(“.three”). Not so useful in this example but good for when you are using jQuery variables (i.e. var vOne = $(“.one”)) instead of selector strings.

jQuery Tools Linked Tabs

Wow, been a while since I last added something. I hope to update this blog more regularly in the future – and it’s not the first time I’ve said that either so hope I can keep it up this time.

Now this blog is a quick little trick for extending jQuery Tools tabs to control more than one set of child divs for whatever reason.

First I’ll post in my sample code: (Moved to JSFiddle, click here for full working interactive example)

So here the important parts to note is that there are 2 ways of achieving the effect depending on your needs.
If you only want to display the linked tab with certain tabs then just use it as is, if you have LOTS of tabs and do not want to put ID’s for all of them then use the commented 2 lines of code, note that you MUST have the some number of divs in both pane and pane2 for this to work.
I recommend you go play with it a bit as there is no substitute for hands on (I have comments in the relevant parts), enjoy and comment if you liked/used this!

.validator() required field in IE

Just a quick note, in IE, when working with jQuery Tools validator simply writing <input name=”name” type=”text” required> will not work as IE quite happily changes this to: <input name=”name” type=”text” required=””>.

To get required fields to work simply use required=”required” which does work.

Custom jQuery Tools Tab transitions

Todays challenge was to alter the transferring of tabs from in jQuery tools, I wanted a side bar I had positioned Outside the tabs to only be shown on one tab, the solution I came up with was to create a custom effect which you then use as the effect when initialising the tab.

$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
	var conf = this.getConf(),
            	speed = conf.fadeOutSpeed,
		panes = this.getPanes();
	var $tab = this.getCurrentTab();
	if($tab.attr("id") == "wanted"){//Going AWAY from the tab, do hide animation (before the tab is hidden)
		$("ul.tabs.summaries").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
			panes.hide();
			panes.eq(tabIndex).fadeIn(200, done);
			//This is then end of the chain - my animation, hide all then fade in new tab.
		});
	}else{//going away from any other tab
		panes.hide();
		panes.eq(tabIndex).fadeIn(200, done);
	}
	$tab = this.getTabs().eq(tabIndex);
	if($tab.attr("id") == "wanted"){//Going to my special tab.
		$("ul.tabs.summaries").animate({"left" : "-160px"}, 300);//Sliding it out
	}
	// the supplied callback must be called after the effect has finished its job
	done.call();
});

Multiply Nested Accordions from jQuery tools with empty bits!

Earlier this month I posted my solution for Multiply Nested Accordions, the only issue I had then was how the accordion worked with headers in the accordion with no matching content pane – I am using the accordions as generated by ColdFusion dynamically, so sometimes there is an empty div that looked ‘tacky’.

So without delay, the code:


var accordion = $(".accordion");

accordion = accordion.filter(":has(.pane)");//ignores accordions with no panes

accordion.tabs(".pane", {tabs: '> h2:has(+ .pane)', effect: 'slide', initialIndex: null});//only tabs with a pane after are used as triggers

My own Fancy Drop Down

So thanks to the post http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx and some extension of my own, I have created a plugin that reskins the  option select.

It looks the same as the example in the above post except it utilises quicksilver.js smart searching and has keyboard navigation. To use this you need, fancydropbox.css, fancydropbox.js, quicksilver.js and a recent version of jQuery. Keyboard navigation is the up and down arrows to change selection and enter to select the highlighted selection.

EDIT: I had to remove the download and change to SVN as google code files was giving me some weird issues, otherwise most recent version fixed a bug when adding more than one drop-box on the same page.

To setup the fancy box in it’s most basic use the following after including the aforementioned files:


<script type="text/javascript">

	$(document).ready(function() {

	    $("#source").fancifydropdown();

	});
</script>
<select id="source">
<option selected="selected" value="BR">Brasil</option>
<option value="FR" dispAfter="" dispBefore="">France</option>
<option value="DE">Germany</option>
<option value="IN">India</option>
<option value="JP">Japan</option>
<option value="RS">Serbia</option>
<option value="UK">United Kingdom</option>
<option value="US">United States</option>
</select>

More complex effects can be got by using the dispBefore and dispAfter attributes in the option tags, any html or text placed in these will be inserted before/after the value in the option tag. Also when calling the fancifydropdown() function you can include a config, e.g. fancifydropdown({onSelect: function(){}, maxItems: 10}). Putting a function in for the onSelect will fire the event anytime that an element is selected from the list, in the function $(this) refers to the element that was selected. maxItems defaults to -1 which shows all items in the list when unfiltered, any other value will limit the most shown when searching to be that number.

Modal on modal with jQuery Tools

So this one took me a bit more work, it works with the Apple Overlay as shown in jQuery Tools here: http://jquerytools.org/demos/overlay/apple.html Just set up your primary overlay (not the trigger) with the class “apple_overlay”.

Below is the code for the secondary overlay/modal, call the first with the following parameters included {closeOnClick: false, closeOnEsc: false}, should work whatever the previous modal/overlay settings, or even if called straight from the page.

var oldMaskZ = null;
var $oldMask = $(null);
$(document).ready(function(){
	$("a[rel].modal").overlay({
		effect: 'apple',
		oneInstance:false,
		closeOnClick: false,
		closeOnEsc: false,
		zIndex: 10100,
		onLoad: function(){
			if($.mask.isLoaded()) {
				//this is a second overlay, get old settings
				oldMaskZ = $.mask.getConf().zIndex;
				$oldMask = $.mask.getExposed();
				$.mask.getConf().closeSpeed = 0;
				$.mask.close();
			this.getOverlay().expose({
					color: 'darkgrey',
					zIndex: 10090,
					closeOnClick: false,
					closeOnEsc: false,
					loadSpeed: 0,
					closeSpeed: 0
				});
			}else{
				this.getOverlay().expose({
					color: 'darkgrey',
					zIndex: 10090,
					closeOnClick: false,
					closeOnEsc: false
				});
			}
			//Other onLoad functions
		},
		onClose: function(){
			$.mask.close();
			//re-expose previous overlay if there was one
			if($oldMask != null){
				$oldMask.expose({
					color: 'darkgrey',
					zIndex: oldMaskZ,
					closeOnClick: false,
					closeOnEsc: false,
					loadSpeed: 0
				});
				//Assumes the other overlay has apple_overlay class
				$(".apple_overlay").css("zIndex", oldMaskZ + 2);
			}
		}
	});
});

To see the whole thing in action with a modified version of the jQuery Tools Example for the apple overlay go to the JSFiddle example.

EDIT: An important point that I actually did figure out but forgot to update about that Tom has just reminded me (thank!!) is that the first overlay must have the properties {closeOnClick: false, closeOnEsc: false} otherwise the funkyness he mentioned occurs. I have updated the files as well.