Using jquery us map to Create a Map of States That Can Be Toggled

The us-map plugin was already in use elsewhere and I wanted to create a clickable map that would display an anchor state and allow for configuration of related states.

Also in use is the gon gem to allow passing of data directly into Javascript, included in a Rails 4.1 project.

Controller code:

  # assume @state is the current state
  gon.current_state_code = @state.state_code 
  gon.regional_states = @state.related_state_codes # returns ["AL", "AK", ...]

View code:

<%# this is inside a form and states_list maintains the current list of selected states%>
  <div id="map" style="width: 800px; height: 600px;"></div>
  <%= hidden_field_tag 'states_list' %>

Associated CoffeeScript:

 
states = ->
  # initialize the hidden field for states selected
  $('#states_list').val(JSON.stringify(gon.regional_states))
  $('#map').usmap(
    stateStyles:
      fill: 'lightGray'
    stateSpecificStyles: do ->
      # current state is red, selected states green
      specificStyles = {}
      specificStyles[gon.current_state_code] = fill: 'red'
 
      for state in gon.regional_states
        specificStyles[state] = fill: 'green'
 
      specificStyles
    click: (event, data) ->
      # don't allow current state to be selected
      if data.name != gon.current_state_code
        # add green as a specific style or delete to toggle state highlight
        if this.stateSpecificStyles[data.name]
          delete this.stateSpecificStyles[data.name]
        else
          this.stateSpecificStyles[data.name] = fill: 'green'
 
      # this could be more intelligent, but I'm just recalculating along the way
      regionalStates = []
      for key of this.stateSpecificStyles
        if this.stateSpecificStyles[key]['fill'] != 'red'
          regionalStates.push(key)
      $('#states_list').val(JSON.stringify(regionalStates))
  )
 
$(document).ready ->
  if gon? && gon.regional_states?
    states()

Updated... Add Bookmarklets to Mobile Safari for iPhone / iPad

Today's iPhone has a nice article on adding bookmarklets to mobile Safari:
TiPs & Tricks: Add bookmarklets to mobile Safari

However, with iOS5, I found that the steps are a little more convoluted:

  1. Add a dummy bookmark using the [->] button in the middle of Safari
  2. Copy the code for the bookmarklet
  3. Tap the Bookmark button (second from the right in Safari).
  4. Tap the [Edit] button
  5. Tap on the dummy bookmark you created
  6. (x) out the URL on the second line
  7. Paste the bookmarklet code on the second line.
  8. (x) out the title and name the bookmarklet appropriately
  9. Tap [Done] when finished.

UPDATED 01/27/2012 bufferapp has new code.

javascript:void(location.href='bufferapp://?u='+encodeURIComponent(location.href))

I also found that the Buffer code was missing, so I captured it and posted it below:

javascript:(function(){
var%20a=document.getElementsByTagName('head')[0],
b=document.createElement('script');
b.type='text/javascript';
b.src='http://bufferapp.com/js/bookmarklet.v1.js?'
+Math.floor(Math.random()*99999);
a.appendChild(b);
})();void%200

Ambi - an RPN programming language

Thanks to @ConstantineXVI for pointing this out...

Ambi - an RPN programming language.  This language is implemented completely in Javascript.

Rip page to new window in firefox

On the bookmark toolbar, right-click and select "New Bookmark..."

Under name, give your bookmark a fitting title, like, "Rip page."
Under location, enter the following code:

javascript:var x=window.open(document.URL, '_blank','width=800,height=600')

Or... just drag the following link to your bookmark toolbar.
Rip page.


Update on August 5, 2008:

I found the following works well for ripping a Google Docs page to a new window (former window closes as well.)

javascript:var%20x=window.open(document.URL,%20'_blank','width=800,height=600
,status=1,toolbar=1,location=1');window.close();

Rip page.

Update on April 13, 2009 :
This code adds scrollbars.

javascript:var%20x=window.open(document.URL,%20'_blank','width=800,height=600,status=1,toolbar=1,location=1,scrollbars=1');window.close();

Rip page.

Writing an onLoad function that includes a delay.

This code was written out of desperation when I could not use an embedded APPLET's isActive() function to check if the APPLET was loaded. Instead, I waited for 500 milliseconds. Hopefully, there are better uses for this code.


<SCRIPT>

function
OnLoadFunction(milliseconds_time)
{
setTimeout("delayedOnLoadFunction()", milliseconds_time);
}

function delayedOnLoadFunction()
{
/* Function body */
}
</SCRIPT>

<body
onLoad="OnLoadFunction(500)">