Member Avatar for julianmoors

Hi,

I wish to select an <a>'s alt property and use it to create a message to display help to the user. This is what I've got so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="zh-HK" />
	<script type="text/javascript" src="includes/js/mootools-1.2.5-core-nc.js"></script>
	<title>MooTools: Lab</title>
	<script type="text/javascript">
		window.addEvent('domready', function()
		{				
			$('help').setStyle('opacity', 0);
			$$('.help').addEvents({
				'mouseover' : function() {
					var message = $(this).getProperties('alt');
					$('help').set('html', '<p>' + message + '</p>');
					$('help').tween('opacity', 1);
				},
				'mouseout' : function() {
					$('help').tween('opacity', 0);
				}
			});

			$$('tr:even').highlight('#fff');
		});
	</script>
	<style>
		table {
			border: 2px solid #333;
			width: 50%;
			margin: auto;
		}
		table tr.even {
			background-color: #666;
			color: #fff;	
		}
		table tr th {
			background-color: #333;
			color: #fff;
		}
		table tr th a {
			text-decoration: none;
			color: #fff;	
		}
		table tr td {
			border: 2px solid #333;
			margin: 0px;
			padding: 0px;
		}
		
		div#help {
			width: 948px;
			margin: auto;
			border: 2px solid #333;	
		}
		div#help p {
			display: block;
			text-align: center;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th>Date <span class="help"><a href="#" alt="This shows the Date column.">(?)</span></a></th>
			<th>Subject <span class="help"><a href="#" alt="This shows the Subject column.">(?)</span></a></th>
			<th>Tutor <span class="help"><a href="#" alt="This shows the Tutor column.">(?)</span></a></th>
			<th>Centre <span class="help"><a href="#" alt="This shows the Centre column.">(?)</span></a></th>
			<th>Type <span class="help"><a href="#" alt="This shows the Tutor column.">(?)</span></a></th>
		</tr>
		<tr>
			<td>2010-08-29</td>
			<td>English</td>
			<td>Mr. Brown</td>
			<td>HH</td>
			<td>Live</td>
		</tr>
		<tr class="even">
			<td>2010-09-05</td>
			<td>Science</td>
			<td>Mr. Blue</td>
			<td>HH</td>
			<td>Live</td>
		</tr>
		<tr>
			<td>2010-10-01</td>
			<td>Business</td>
			<td>Miss Pink</td>
			<td>HH</td>
			<td>Live</td>
		</tr>
		<tr class="even">
			<td>2010-09-15</td>
			<td>Math</td>
			<td>Mr. Black</td>
			<td>HH</td>
			<td>Live</td>
		</tr>
		<tr>
			<td>2010-10-03</td>
			<td>English</td>
			<td>Mr. Beige</td>
			<td>HH</td>
			<td>Video</td>
		</tr>
	</table>
	<div id="help"></div>
</body>
</html>

Any ideas?

Thanks,
Julian

  • 2 Contributors
  • 3 Replies
  • 111 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Julian,

Quick look at the Mootools API indicates you need to use var myProp = myElement.getProperty(property);(see here)

So for alt text, I guess you would use var myProp = myElement.getProperty('alt');

It's up to you how you identify myElement to be the <a> of interest.

If in doubt, consult the API.

Edited by happygeek because: fixed formatting
Member Avatar for julianmoors

Julian,
Quick look at the Mootools API indicates you need to use var myProp = myElement.getProperty(property);
So for alt text, I guess you would use var myProp = myElement.getProperty('alt');
It's up to you how you identify myElement to be the <a> of interest.
If in doubt, consult the API.
Airshow

Airshow,

Thank you for not giving me the answer and making me work for it. As the saying goes "Give a man a fish and he can feed himself for one day. Teach him how to fish and he can feed himself for a lifetime."

For everybody else I moved the class to the <a> and got rid of the <span>, this enabled me to keep the MooTools code as it was. Please see below for full listing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="zh-HK" />
    <script type="text/javascript" src="includes/js/mootools-1.2.5-core-nc.js"></script>
    <title>MooTools: Lab</title>
    <script type="text/javascript">
        window.addEvent('domready', function()
        {               
            $('help').setStyle('opacity', 0);
            $$('.help').addEvents({
                'mouseover' : function() {
                    var message = $(this).getProperty('alt');
                    $('help').set('html', '<p>' + message + '</p>');
                    $('help').tween('opacity', 1);
                },
                'mouseout' : function() {
                    $('help').tween('opacity', 0);
                }
            });
            $$('tr:even').highlight('#fff');
        });
    </script>
    <style>
        body {
            font-family: Verdana, Helvetica, Arial, sans-serif;
            font-size: 0.8em;   
        }
        p {
            margin: 0px;
            padding: 0px;   
        }
        table {
            border: 2px solid #333;
            width: 900px;
            margin: auto;
        }
        table tr.even {
            background-color: #666;
            color: #fff;    
        }
        table tr th {
            background-color: #333;
            color: #fff;
        }
        table tr th a {
            text-decoration: none;
            color: #fff;    
        }
        table tr td {
            border: 2px solid #333;
            margin: 0px;
            padding: 0px;
        }

        div#help {
            height: 50px;
            width: 900px;
            margin: auto;
        }
        div#help p {
            display: block;
            text-align: center;
            padding-top: 15px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Date <a class="help" href="#" alt="This shows the Date column.">(?)</a></th>
            <th>Subject <a class="help" href="#" alt="This shows the Subject column.">(?)</a></th>
            <th>Tutor <a class="help" href="#" alt="This shows the Tutor column.">(?)</a></th>
            <th>Centre <a class="help" href="#" alt="This shows the Centre column.">(?)</a></th>
            <th>Type <a class="help" href="#" alt="This shows the Type column.">(?)</a></th>
        </tr>
        <tr>
            <td>2010-08-29</td>
            <td>English</td>
            <td>Mr. Brown</td>
            <td>HH</td>
            <td>Live</td>
        </tr>
        <tr class="even">
            <td>2010-09-05</td>
            <td>Science</td>
            <td>Mr. Blue</td>
            <td>HH</td>
            <td>Live</td>
        </tr>
        <tr>
            <td>2010-10-01</td>
            <td>Business</td>
            <td>Miss Pink</td>
            <td>HH</td>
            <td>Live</td>
        </tr>
        <tr class="even">
            <td>2010-09-15</td>
            <td>Math</td>
            <td>Mr. Black</td>
            <td>HH</td>
            <td>Live</td>
        </tr>
        <tr>
            <td>2010-10-03</td>
            <td>English</td>
            <td>Mr. Beige</td>
            <td>HH</td>
            <td>Video</td>
        </tr>
        <tr>
            <td colspan="5">
            <div id="help"></div>
            </td>
        </tr>
    </table>
</body>
</html>

Gotta love MooTools!
Julian

Edited by Dani because: Formatting fixed
Member Avatar for Airshow

Julian,

Thank you for not giving me the answer and making me work for it.

I'm kind like that sometimes ;)

Good fishing.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.