NYOKIGLITTER - Tutorials

Creating Accordions with Mootools

I'll be using Mootools.1.11 for these examples. You can download your own version here. These examples assume that you have a good understanding of xhtml, css and javascript.

Helpful Resources

Note: I'm getting many questions about the accordion and they all have answers that can be found here: http://docs.mootools.net/Plugins/Accordion. If I see that your question is something that I know is on this page you're just going to get a link back to this page. Also keep in mind that I am not the creator of mootools. Compatibility issues need to be taken to the Mad4Milk guys.

Basic Usage


<script type="text/javascript" src="file path/mootools.1.11.js"></script>

<script type="text/javascript">

window.addEvent('domready', function() { 

  var accordion = new Accordion('h3.atStart', 'div.atStart');

});

</script>

Download Basic Accordion

This script looks for all h3 elements with class name "atStart" and all div elements with class name "atStart" to create the accordion effect. The class name doesn't have to be "atStart", it can be whatever you want it to be. It doesn't even have to be an h3. You could use an anchor tag or a list item.

CSS

JavaScript does not affect the look of the accordion, CSS does. I'm going to say it one more time because it's the most asked question that I get so, JavaScript does not affect the look of the accordion, CSS does.

You accordion is made up of at least 2 elements. It does not matter where those elements are on the page. They don't have to come directly after the other. So, if you want to create a tab like accordion the place all the accordion togglers together and float them left, then after that put all the elements that contain the accordion content.

A Little Fancier

The accordion documentation page has lots of good information and examples of options you can use with your accordion. This can help you create lots of fun and interesting variations of the accordion.


<script type="text/javascript" src="file path/mootools.1.11.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() { 
var accordion = new Accordion('h3.tab', 'div.tab', {

		 onActive: function(toggler) {

		  toggler.setStyles({

		   background: '#d53043',

		   color: '#fff'

		  });

		 },

		 onBackground: function(toggler) {

		 toggler.setStyles({

		  background: '#eee',

		  color: '#222'

				
		  });

		 }
 
	});

});

</script>

Download Tab Accordion

posted Sunday July 13, 2008 |

Quick Paths with the Magic Wand

Level: Intermediate; Requires basic understanding and familiarity with the pen, add anchor point, delete anchor point, convert point, path selection and direct path selection tools.

Since we'll be using the magic wand tool for this tutorial, the technique shown here is best used in situations where the section of the image you want to cut out is not on top of a super intricate background.

Open the image.
Select the magic wand tool and click on the background. If the entire background is not selected in one click, hold shift and while clicking on the remaining areas.
Hit cmd+shift+i to invert the selection or shift+ctrl+i if you're on Windows. You should now have something that looks like this.
Select the Paths tab and click on the "make work path from selection" button at the bottom of the Paths window. Now we have a nice path that we can edit easily with the Path Selection, Direct Path Selection, and Pen tools.
Now it's time to make the path nice and smooth. Its best to zoom in and do this in sections. Using some combination of the pen, add anchor point, delete anchor point, convert point and path selection tools shape your path around the image.
If you have multiple paths, select the direct selection tool and draw a rectangle around your image to select all the paths. Go to the paths pallet, click on the "load path as a selection" button.
Go to the layers pallet and click the "Add layer mask" button. If you feel like the image still isn't right, you can go back to your path and keep working on it and reload the mask again. You should now have a nice cutout that looks something like this.

posted Thursday April 24, 2008 | add comment

Opening Links in a New Window with a Strict Doctype

Before I even had a design ready for this site, I knew that I'd be using a strict doctype. I also knew I'd run into small validation errors on links that need to open in a new window because target="_blank" or target="new" doesn't validate with a strict doctype. To fix this problem, I've written a tiny bit of code so that I can have my cake and eat it too.

There are two versions of this script, one for mootools and one for jQuery. If you don't use either one of these libraries then I think this short explanation is enough for you to rewrite one using the library of your choice or from scratch.

Both scripts do the same thing, they search and find all anchor tags on the page that has the class name newWindow and when clicked adds the target attribute and sets it to blank.

Mootools


window.addEvent('domready', function() {
	$$('a.newWindow').addEvent('click', function(){
		$$('a.newWindow').setProperties({
    			target: '_blank'
		});
	});
});

jQuery


$(document).ready(function() {
	$('.newWindow').click(function(){
		$('.newWindow').attr({
			target: '_blank'
		});
	});
});

I've tested this in Firefox (mac/windows), IE6, IE7 and Safari (mac/windows) and it works perfectly. Unfortunately, I do not have time to debug problems for everyone. If you're trying to customize this script even more then I would strongly suggest looking at the documentation for both mootools and jquery.

posted Sunday March 23, 2008 | add comment [2]

Tutorials