form and substance of communication

menu

Scripts developed under the MooTools framework are useful to easily achieve complex menu displaying effects.

For instance MooTabs creates tabbed menu, like those used by the browser or the OS, from ordered and unordered lists. This could be a great option if dealing with small spaces in the page: when clicking one of the triggers, the content of the main box gets replaced, with custom styles and transitions.
The script class, originally built for earlier MooTools 1.11, has been completely upgraded in Fx.Tabs for the newest framework version, while Perspective Tabs offers an even more complex approach.

Similarly, MGFX.Tabs is driven to the same purpose, by crossfading the CSS opacity value instead of sliding the content.

So I’ve decided to combine and arrange the effects in a single javascript file:


window.addEvent('domready', function(){	
	if (Cookie.get('opentab')) {
		//check if there is a cookie with an openslide value
		var actif = Cookie.get('opentab');
		//if yes, retrieves that value and set a var with its value
	}
	var yourTabs = $$('.tabs');
	var tabToggler = $$('.tabtog');	
	yourTabs.each(function(el, i){		
		var Tabbula = new Fx.Slide(el, {duration: 600});
		Tabbula.hide(); //hides all the sliders
		var tabFade = new Fx.Style(el, 'opacity', {wait: false, duration:600});		
		if (actif) { //if the var is set
			if (actif == i) {
				Tabbula.show();
			}
		}					
		tabToggler.each(function(elem, j){
			if ( j == i )
			elem.addEvent('click', function(e){
				e = new Event(e).stop();
				Tabbula.slideIn().chain(function() {
								tabFade.start(1);
							});
				//tabFade.start(1);
				Cookie.set('opentab', i);
			});
			if (j != i)
			elem.addEvent('click', function(e){
				e = new Event(e).stop();
				tabFade.start(0);
				Tabbula.slideOut();
			});
		});			
	});
});

Another declination of the Slide effect, developed by the MooTools community, manages the height property of any element, in order to expand or collapse it, according to the inner content, that could reside inline in the same page or in an Ajax request.
When MooTools framework is properly loaded, every anchor button tagged with class triggerLink should toggle its relative slide box, according to the following javascript code:

window.addEvent('domready', function(){	
	// for nested Fx.Slide effect
	function nestSlide(slider) {
	 if (slider.parentNode.parentNode.hasClass('slide')) {
			if (slider.parentNode.parentNode.parentNode.getStyle('height') != '0px') {
				slider.parentNode.parentNode.parentNode.setStyle('height','');
				if(window.ie6){slider.parentNode.parentNode.parentNode.setStyle('height','0px')}; 	
			}
	  }
	}
	var yourSlides = $$('.slide');
	var yourTriggers = $$('.triggerLink');//one more array for the road, the links
 		yourSlides.each(function(el, i){
		var SciVola = new Fx.Slide(el, {
			height: true,
			duration: 600,
			transition: Fx.Transitions.Cubic.easeOut
		}).hide();
		var DiSSolvi = new Fx.Style(el, 'opacity', {
			wait: false,
			duration:800
		});
		var openSlide = el.id; 
		yourTriggers.each(function(elem, j){ //here comes what you're looking for
			elem.addEvent('click', function(e){
				new Event(e).stop(); //here you stop the default a event		
				if( i == j ){
					if (SciVola.wrapper.offsetHeight == 0) {
						var href = this.getProperty('href');
						if (href == "#"+el.id) {
							SciVola.hide(); //empties the shelf
							el.setStyle('opacity', '0');
							nestSlide(el);
							SciVola.slideIn().chain(function() {
								DiSSolvi.start(0,1);
							});
						    Cookie.set(el.id, 'inline');
						}
						else {
						var AjaxUrl = this.getProperty('href');
						el.empty(); //empties the shelf 
						new Ajax (AjaxUrl, { //that's where you use the retrieved url
							method: 'get',
							update: el,
							onComplete: function() {
								el.setStyle('opacity', '0');
								nestSlide(el);
								SciVola.slideIn().chain(function() {
									DiSSolvi.start(0,1);
									resetmbox();
								});
								Cookie.set(el.id, AjaxUrl);
							}
						}).request();
						}
					}
					else {
						DiSSolvi.start(1,0).chain(function() {
							nestSlide(el);
							SciVola.slideOut();
							}); //there you simply close the potentially opened other divs
						Cookie.set(el.id, 'off');
					}
				}
			});
		}); //that's all, now back to your script
		nestSlide(el);
		if (Cookie.get(openSlide)) { //check if there is a cookie with an openslide value
			if (Cookie.get(openSlide) != 'off') {
				if (Cookie.get(openSlide) == 'inline') {
					nestSlide(el);
					SciVola.show();
					return;				
				}
				var RemUrl = Cookie.get(openSlide)
				new Ajax (RemUrl, {
					method: 'get', //method
					update: $(openSlide), // element that will be updated with response
					onComplete: function() {
						SciVola.hide();
						$(openSlide).setStyle('opacity', '0');
						SciVola.toggle().chain(function() {
							nestSlide(el);
							DiSSolvi.start(0,1);
							resetmbox();
						}); //toggles the shelf
					} 
				}).request(); //sends the request
			}
		}
	});
});

The content does not necessarily come only from external pages, but also from the div’s inner HTML. In that case, the div ID has to be set as the .triggerLink HREF property, obviously with the # symbol like a normal text anchor.
Otherwise, when the link contains an URL, that link will be the source of the content displayed by an Ajax request.

The nestslide function is meant to operate multiple nested effects (commonly a trouble with MooTools Fx.Slide), but for now at early stage since it’s necessary everytime to specify the depth of recursions through the “parentNode” of the DOM.

Little hacks could alter the behavior pattern, for example to extend every box with a single click as the classic Accordion does, or conversely to toggle the same box with different buttons.
In addition, Ajax calls are easily pluggable with MooTabs as well, and both the effect classes could be merged in one script. These examples are tested and compatible with the two main MooTools versions:

tabberslide111.js
tabberslide124.js


No Comments

Leave a Reply


  • development diary