The Eclectic Quill

Website of Joshua McGee

By

jQuery Tricks I learned from writing ManabaseCrafter

In writing the third version of ManabaseCrafter in Ruby on Rails, I used a lot of jQuery and figured out a bunch of tricks to make the programmer's life easier.  Here are a few of them:

Make some of your links do nothing

The easiest way to indicate that something is clickable is to enclose it in an <a> tag, then trap the click in javascript.  But to get HTML to validate, there has to be something within the href attribute of an anchor tag.  Usually what's put in there is a hash sign (#) which is interpreted by browsers as "go to the top of the page".  But you usually don't want the user to go back to the top.  This is easily handled with javascript that looks for a given class in an <a> tag and, if found, returns the value of false, which prevents the default event from happening.  I call my class "kill".

Add this code to your page:

$('document').ready(function(){
  $('.kill').click(function(){
    return false;
  })
});

After you do that:

<a href="#">This link will take you to the top of the page.</a>
<a href="#" class="kill">This link will do nothing.</a>

Disable Google Analytics tracking of admin accounts on your Ruby on Rails site

So, you have a site you've developed and on which you are using Google Analytics, but you want to ignore your own impressions.  This is easy if you have a user model set up; you can have your code suppress GA reporting for logged-in admins.

I use Devise, which has a helper called user_signed_in.  Additionally, I have an admin flag in my user model called is_admin.

Add this code to your user model:

def admin?
  return self.is_admin
end

Then in your application.html.erb file, look for this line:

_gaq.push(['_trackPageview']);

And replace it with this:

<% unless user_signed_in? and current_user.admin? %>
_gaq.push(['_trackPageview']);
<% end %>

If you are tracking events too, create the following javascript function and place it in a script area of your application.html.erb file:

function gaqTrack(category, label, value) {
  <% unless user_signed_in? and current_user.admin? %>
  _gaq.push(['_trackEvent', category, label, value]);
  <% end %>
}

Then instead of calling _gaq.push(['_trackEvent', 'foo', 'bar', 'baz']); directly, call the function gaqTrack('foo', 'bar', 'baz');.  The events from logged-in users will now be ignored.

Make a floating box that can be minimized and will stop floating

Floating elements -- boxes that stay in place relative to the viewport of your browser -- are useful, but can cause problems with small screens such as those of mobile phones.  So we'd like a box that follows the user around, but that the user can minimize and make stay in place.  I have one of these on the front page and all results pages, such as a search for Captain Sisay.  Go to that second link and play with the minimize button on the "Include" box as you scroll up and down.

The trick is to make a box that will behave differently if it has the CSS class "minimized" on it, then add and remove that class with javascript.

Here is some skeleton CSS for a floating box:

#box {
  position: fixed;
  top: 30px;
  left: 30px;
  height: 300px;
  width: 250px;
  border: 1px solid black;
}
#box-header {
  height: 30px;
  background-color: black;
}
#box-title {
  color: white;
  font-size: 22px;
}
#box-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background-image: url("http://manabasecrafter.com/assets/icons/minimize.png");
}
#box-content {
  background-color: white;
  color: black;
    padding: 8px;
}

This defines a square box with a header and body, as well as an icon in the upper-right of the title area.  You will see that the box defaults to its full height and showing the "minimize" icon.

Then we add a few more lines to represent the minimized state:

#box.minimized {
  position: absolute;
  height: 30px;
}
#box.minimized #box-icon {
  background-image: url("http://manabasecrafter.com/assets/icons/maximize.png");
}
#box.minimized #box-content {
  display: none;
}

The first tells the browser what to do with an element with id of "box" and a class of "minimized".  The second tells the browser how to handle an element with an id of "box-icon" if it is inside of an element with an id of "box" and a class of "minimized".  The last explains what to do with an element with an id of "box-content" inside that same "box" element.

Then we need some HTML for a box that conforms to the CSS:

<div id="box"><div id="box-header"><div id="box-title">Box Title</div><a href="#" id="minimize-box"><div id="box-icon"></div></a></div><div id="box-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>

And finally some jQuery that adds and removes the "minimized" class:

$(document).ready(function(){
    $('#minimize-box').click(function(){
        if ($('#box').hasClass('minimized')) {
            $('#box').removeClass('minimized');
        } else {
            $('#box').addClass('minimized');
        }
    });
});

I set this up as a jfiddle so you can play with it.

I may do more of these.  Stay tuned.

Leave a Reply

Your email address will not be published. Required fields are marked *