anybody using prototype.js - please help to get me going

616 Posts

mmjaeger Reply #1, 21 years ago

Hello,

Despite Sergio’s excellent documentation on prototype, I’m still struggling to get started. I hope somebody is able to help me a with a little example to get me going.

Please see html code below – I have this little navigation bar and I like to add some events/functions to the buttons.

Let’s say, onmouseover, I like to change e.g. the background-color of the button and onclick, I like to execute a specific function. How would I do that using prototype?

Thank you in advance for your help.

<div id="fm-navbar">
      <ul>
        <li><img class="fm-btn-home" onmouseover="return escape(this.alt)" src="images/spacer.gif" alt="Top level" title="Top level" width="16" height="16" /> </li>
        <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> </li>
        <li><img class="fm-btn-dirup" src="images/spacer.gif" alt="Up level" title="Up level" width="16" height="16" /> </li>
        <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> </li>
        <li><img class="fm-btn-search" src="images/spacer.gif" alt="Search" title="Search" width="16" height="16" /> </li>
        <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> </li>
        <li><img class="fm-btn-refresh" src="images/spacer.gif" alt="Refresh screen" title="Refresh screen" width="16" height="16" /> </li>

        <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> </li>
        <li><img class="fm-btn-filter" src="images/spacer.gif" alt="Filter" title="Filter" width="16" height="16" /></li>
        <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> </li>
        <li><img class="fm-btn-config" src="images/spacer.gif" alt="Settings" title="Settings" width="16" height="16" /> </li>
        <li><img src="images/btn_spacer.gif" alt="" width="2" height="16" /> </li>
        <li><img class="fm-btn-info" src="images/spacer.gif" alt="Info" title="Info" width="16" height="16" /> </li>
      </ul>
    </div>

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 21 years ago

Why not wrap the IMG in an A element, use the :hover selector for the bg color swap and just use a regular onclick call to do whatever you need?

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

616 Posts

mmjaeger Reply #3, 21 years ago

the following code seems to work but I was hoping to use some more prototype stuff like the event observers.

	var x = $('fm-navbar').getElementsByTagName('li');
	for (var i = 0; i < x.length; i++) {
		if (x[i].className   == 'fm-navbtnUp') {
			x[i].onmouseover = btn_over;
			x[i].onmouseout  = btn_out;
			x[i].onmousedown = btn_down;
			x[i].onclick     = btn_click;
		}
	}		
}
// ============================================================
// = menu buttons V 1.0, date: 10/16/2005                     =
// ============================================================	
	function btn_over() {	// menu button hover
		if (this.className != 'fm-navbtnDown') {
			this.className  = 'fm-navbtnOver';
		}
	}	
	function btn_out() {	// menu button out
		if (this.className != 'fm-navbtnDown') {
			this.className  = 'fm-navbtnUp';
		}
	}
	function btn_down() {	// menu button down
		if (this.className != 'fm-navbtnDown') {
			this.className  = 'fm-navbtnDown';
		}
	}
	function btn_click() {	// menu button click		
		var x = $('fm-navbar').getElementsByTagName('li');
		for (var i = 0; i < x.length; i++) {
			if (x[i].className == 'fm-navbtnDown') {				
				if (x[i].id != this.id) {					
					x[i].className = 'fm-navbtnUp';
				}
			}
		}
		
		var btnclass = this.firstChild.className;		
		switch (btnclass) {
			case 'fm-btn-home': alert('home'); break;
			case 'fm-btn-dirup': alert('dirup'); break;
			case 'fm-btn-upload': alert('upload'); break;
			case 'fm-btn-download': alert('download'); break;			
			case 'fm-btn-createfolder': alert('create'); break;
			case 'fm-btn-delete': alert('delete'); break;
			case 'fm-btn-showdetails': alert('show details'); break;
			case 'fm-btn-showicons': alert('show icons'); break;
			case 'fm-btn-showthumbs': alert('show thumbs'); break;
			case 'fm-btn-showfstrip': alert('show filmstrip'); break;
			case 'fm-btn-search': alert('search'); break;			
			case 'fm-btn-refresh': alert('refresh'); break;			
			case 'fm-btn-filter': alert('filter'); break;			
			case 'fm-btn-config': alert('config'); break;			
			case 'fm-btn-info': alert('info'); break;			
			default: break;
		}
	}

MODX Staff
12,272 Posts

Ryan Thrash Reply #4, 21 years ago

Are you trying to use prototype simply for the sake of using prototype, or are you just wanting the effects. You can achieve the same thing with using the CSS pseudo-selectors, without requiring JS functions.

a/a:link = onmouseout (default state)
a:hover = onmouseover
a:active = onmousedown/onclick

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me