<<Back to Article

Highlight Spans with MooTools

/skill level/
/viewed/
0 Times

The code, and the template, are referred to in Webmonkey's Get Started With MooTools reference page. In this example, we will select and highlight different spans by its class. Using JavaScript and the MooTools web framework, we will attach different styles to spans that meet the id and class criteria according to the button the user presses.

This code is in a wiki. If you have any advances to make to the original tutorial and code, please feel free to contribute.

The Code

<html>
<head>
	<title>Testing MooTools</title>
	<script src="mootools.js"></script>
	<style>
		#container div, #container span
		{
			width: 150px;
			height: 150px;
			display: block;
			float: left;
			border: 1px solid black;
		}
		#container .highlight
		{
			border: 3px solid orange;
		}
		p
		{
			clear: left;
		}
		p input
		{
			display: block;
		}
	</style>
	<script>
	function test_byid()
	{
		$("second").toggleClass("highlight");
	}
	function test_byclass()
	{
		$$(".test").toggleClass("highlight");
	}
	function test_bytag()
	{
		$$("span").toggleClass("highlight");
	}
	function test_byfirstresult()
	{
		$$("span:first-child").toggleClass("highlight");
	}
	function test_byfunction()
	{
		$$("span").each(function(spanobj) {
			if (spanobj.id != 'second')
			{
			  spanobj.toggleClass("highlight");
			}
		});
	}
	</script>
</head>
<body>

<div id="container">

<span>SPAN<br />No id</br />No class</span>
<span class="test" id="second">SPAN<br />id="second"</br />class "test"</span>
<div class="test">DIV<br />No id</br />class "test"</div>


</div>


<p>
<strong>Toggles:</strong>
<input type="button" onClick="test_byid();" value="id='second'" />
<input type="button" onClick="test_byclass();" value="class='test'" />
<input type="button" onClick="test_bytag();" value="tag is 'span'" />
<input type="button" onClick="test_byfirstresult();" value="the first object where tag is 'span'" />
<input type="button" onClick="test_byfunction();" value="tag is 'span', but id is not 'second'" />
</p>

</body>
</html>

What it Looks Like

Retrieved from "http://www.webmonkey.com/codelibrary/Highlight_Spans_with_MooTools"
  • This page was last modified 16:45, 2 October 2008.
Edit this article
Reddit Digg