Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

« Newer Snippets
Older Snippets »
Showing 1-2 of 2 total  RSS 

using Event.observe for when a page loads

I just prefer this implementation as opposed to window.onload.

Event.observe( window, 'load', function() {
  // Put the Javascript that needs to happen when the page
  // loads here
} );


For example, here's a way to make most of your input fields and all of your textareas have a different class when they're selected. Useful if you want to style them differently with CSS.
Event.observe( window, 'load', function() {
  var inputs = document.getElementsByTagName( 'input' );
  var textareas = document.getElementsByTagName( 'textarea' );

  for ( var i=0; i<inputs.length; i++ ) {
    type = inputs[i].type;

    if (
      ( type == 'button' || type == 'reset' ||
      type == 'password' || type == 'text' ||
      type == 'submit' ) &&
      ( inputs[i].onfocus == '' ||
      !inputs[i].onfocus )
    ) {
      inputs[i].onfocus = function() {
        this.className = 'selected';
      }

      inputs[i].onblur = function() {
        this.className = '';
      }
    }
  }

  for ( var i=0; i<textareas.length; i++ ) {
    if ( textareas[i].onfocus == '' || !textareas[i].onfocus ) {
      textareas[i].onclick = function() {
        this.className = 'selected';
      }
      textareas[i].onblur = function() {
        this.className = '';
      }
    }
  }
} );

classify() for alternating rows, columns, etc.

I often want different rows in a table to alternate in color, and I do this by assigning each row a class name and styling it with CSS. This is a simple helper method designed to return a class name based on the given row count.

It is also convenient for me to assign a class to table cells based on the type of content they hold. For example, if I have a cell with a float value in it, I want to display it with a monospace font, whereas if I have a cell with a string in it, I want to display it in a serif font.

# Determines the CSS class based on either the count given
# (returns 'even' or 'odd' as the CSS class name) or the class
# given (returns the string version of the class, lowercased,
# as the CSS class name)
def classify( count_or_class, include_class_text = true )
  if count_or_class.class == Fixnum
    value = ( count_or_class % 2 == 0 ? 'even' : 'odd' )
  else
    value = count_or_class.to_s.downcase
  end

  if include_class_text
    'class="' << value << '"'
  else
    value
  end
end


Example usage with alternating 'even'/'odd' row class names:
<table>
<% count = 0 %>
<% @collection.each do |value| %>
  <tr <%= classify( count ) %>>
    <td><%=h value %></td>
  </tr>
  <% count += 1 %>
<% end %>
</table>


Example usage with data type class names:
<tr>
<% @columns.each do |column| %>
  <% data = row.send( column.name ) %>
  <td <%= classify( data.class ) %>>
    <%=h data %>
  </td>
<% end %>
</tr>
« Newer Snippets
Older Snippets »
Showing 1-2 of 2 total  RSS