How to make a single check box (or image, etc) align vertically

Consider this HTML:

<div style="line-height: 42px">
  <input type="checkbox" />
</div>

Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if it is the only element inside the container.

It will be aligned correctly if the HTML looks like this:

<div style="line-height: 42px">
  <input type="checkbox" /> foo
</div>

Complex explanation here.

So the ac…

Firefox 3.6 truncates long tables when printing

Possible fixes:

  • Upgrade your Firefox. It's fixed in 5.0.
  • Hunt down funny float or overflow directives in your CSS.
  • Remove <h1> and <caption> tags in proximity of your table (seriously).

Resque: Clearance authentication for dashboard

Resque comes with its own dashboard (Resque server) that you can mount inside your Rails 3 application with

#config/routes.rb:

require 'resque/server'

My::Application.routes.draw do
  # ...

  mount Resque::Server => '/resque'
end

Unfortunately, since this bypasses the filters in your ApplicationController, everyone can access this dashboard now (unless you have some Rack-based authentication in place, like Devise).

If you're using …

Linked content

Disable text selection on iOS and Android devices

When you double-tap a string of text on an iPhone or iPad a complicated context menu for copying and pasting will appear. This can confuse unexperienced users.

Use the Javascript hack below to disable text selection on mobile devices:

// Deactivating distracting Text Selection:
// from: http://stackoverflow.com/questions/1794220/how-to-disable-mobilesafari-auto-selection
$.fn.extend({
  disableSelection : function() {
    this.each(function() {
      this.onselectstart = function() {
        return false;
  ...

Check whether an element is visible or hidden with Javascript

jQuery

You can say:

$(element).is(':visible')

and

$(element).is(':hidden')

jQuery considers an element to be visible if it consumes space in the document. For most purposes, this is exactly what you want.

Native DOM API

Emulate jQuery's implementation :

element.offsetWidth > 0 && element.offsetHeight > 0;

Prototype

Don't use Element#visible(), it just checks if a CSS attribute display: none ex…

Test that a string of text is (not) linked in Webrat or Capybara

The step definition below allows you to write:

Then I should see a link labeled "Foo"
But I should not see a link labeled "Bar"

Webrat

Then /^I should( not)? see a link labeled "([^"]*)"$/ do |negate, label|
  expectation = negate ? :should_not : :should
  response.send(expectation, have_selector("a", :content => label))
end

Capybara

Then /^I should( not)? see a link labeled "([^"]*)"$/ do |negate, label|
  expectation = negate ? :should_not : :should
  page.send(expectat...
Linked content

Matching elements on complex web pages with Webrat

XPath matchers can be combined with CSS-selector matchers. This is really useful if not, for example, the content of an element should be matched but the element itself like in the following example. Here a form is used to display data as default value in its input elements. This can be the case in web applications in which data should be edited easily without additional clicks.

Using StaticMatic for static pages

Update: Staticmatic will not be further developed. They suggest to switch to middleman.


If you need to make a static web page and find yourself missing all your Rails comforts, take a look at StaticMatic.

This works like an extremely stripped down version of Rails, giving you

  • HAML
  • SASS
  • helpers
  • partials

When done, everything is simply compiled to s…

Playing audio in a browser

If you want to play music or sounds from a browser, your choice is to use either Flash or the new <audio> tag in HTML5. Each method has issues, but depending on your requirements you might not care about all of them.

Flash

  • Works in all desktop browsers, even Internet Explorer. Does not work on iPads or iPhones.
  • Requires you to embed a Flash component into your page which will later play the audio for you.
  • Can play MP3s or Wave files. Cannot play OGG Vorbis audio.
  • Cannot reliably seek to a given position when playing VBR-enco…
Linked content

Print-Friendly Images and Logos with CSS

The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.

Use CSS attribute selectors with Capybara

You can use CSS attribute selectors in your step definitions like this:

Then /^the page should have a meta description "([^"]+)"$/ do |description|
  page.should have_css("meta[name=\"description\"][content=\"#{description}\"]")
end

Note that you need to always quote attribute values or you will get a Nokogiri parsing error like this:

unexpected 'foo' after 'equal' (Nokogiri::CSS::SyntaxError)

Different CSS for IE using Sass

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.

Step 2

Create two new Sass files:

Call this one screen.sass:
$ie = false
@import screen

Call this one screen_for_ie.sass:
$ie = true
@import screen

Step 3

Change y…

Linked content

PhantomJS: Headless WebKit with JavaScript API

PhantomJS is a minimalistic headless WebKit.

It has fast and native support for various web standards:

DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS can be fully scripted using JavaScript. It is an optimal solution for headless testing of web-based applications, site scraping, pages capture, SVG renderer, PDF converter and many other usages.

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

<ul>
  <li class="active"><div class="content">Active element</div></li>
  <li class="inactive"><div class="content">Inactive element</div></li>
</ul>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

  back...

Speed up response time in development after a Sass change

When working with large Sass files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when you build sprites with the Lemonade gem.

To avoid this, have Sass watch the files for changes and compile them into CSS files immediately. Th…

Linked contentDeprecated

Prevent floating sibling elements from wrapping in CSS

When you style multiple adjacent block elements with float: left, they will be rendered next to each other similar to inline elements. Also like inline elements, they will wrap at the horizontal end of the parent container.

If you want to keep floating elements from wrapping, nest them in a really wide container:

<div class="tabs">
  <div class="really_wide_container">
    <div class="tab">...</div>
    <div class="tab">...</div>
    <div class="tab">...</div>
  </div>
</div>

This is the [Sass](http://sass-la…

Remove quotes from Sass mixin arguments

When calling a Sass mixins, you usually don't need to quote arguments:

+tint_article(#f21)

However, when a CSS property consists of multiple parts (like background or box-shadow), the Sass parser will trip up:

+box_shadow(0 1px 2px #000) // this will blow up

The solution is to quote the argument like this:

+box_shadow('0 1px 2px #000')

As the author of the box-shadow mixin you now need to unquote this string, so the quotes don't appear in the resulting CSS. E.g. the following version of the box-shadow mixin will…

Linked content

Styling and scaling for mobile devices

If you want your application to display properly on iPad, iPhone or Android there are two things to do:

Define a stylesheet for mobile devices

Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers:

<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'mobile', :media => 'only screen and (max-device-width: 1024px)' %>
<!--<![endif]-->

Here I chose 1024 pixels as the maximum device width to include the iPad. If you want to target only mobile phones, pick 960 to include high-end Android d…

This website uses cookies to improve usability and analyze traffic.
Accept or learn more