Category Archives: jQuery Tools

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 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

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.

Multiply Nested Accordions from jQuery Tools.

So todays challenge was quadruply nested accordions using jQuery tools tabs accordion (http://jquerytools.org/demos/tabs/accordion.html). Also I implemented toggling of each tab individually. To see a demonstration visit this JSFiddle page http://jsfiddle.net/Xanetia/8kz4m/, or download the full source code here: http://www.mediafire.com/?cfi8m4lfp0ji60u. Heres The HTML:

<div class="accordion">
 <h2>Level 1:1</h2>
 <div class="pane">
  <div class="accordion">
   <h2>Level 2 : 1</h2>
   <div class="pane">
    <div class="accordion">
      <h2>Set 1</h2>
      <div class="pane">
       <div class="accordion">
        <h2>Test3</h2>
        <div class="pane">
[Pane Content]

That’s the basic format – I’m sure your capable of closing the tags off! Now onto the interesting part, the jQuery bit, as follows:


//Initialising Accordion
$(".accordion").tabs(".pane", {tabs: '> h2', effect: 'slide', initialIndex: null});

//The click to hide function
$(".accordion > h2").click(function(){
 if($(this).hasClass("current") && $(this).next().queue().length == 0){
  $(this).next().slideUp();
  $(this).removeClass("current");
 }else if(!$(this).hasClass("current") && $(this).next().queue().length == 0){
  $(this).next().slideDown();
  $(this).addClass("current");
 }
});

The first line is the standard jQuery tools accordion caller, the parts to note are that the identifiers are classes. The most important part is:

tabs: '> h2'</span>

This is what prevents clicking on a nested tab changing all levels. Pretty neat and simple!

In the click to hide part the issue is that we are not actually changing what is stored in jQuery as the current index, this is why we both hide and show it. The boolean test


$(this).next().queue().length == 0

Checks to see if the jQuery tools default event has fired (this one is evaluated after) stopping the opened/closed tab from just reverting to its previous state.

That’s all, any questions leave me a comment!