View

Soft-scroll to an anchor with jQuery

This snippet makes links that refer to an anchor (like "<a href="#something">...</a>") scroll softly to it.\
In this example we only do it for links that also own a data-animate attribute.

$('a[href^="#"][data-animate]').live('click', function() {
  var hash = $(this).attr('href');
  var offset = $(hash).offset();
  if (offset) {
    $('html, body').animate({ scrollTop: offset.top }, 'slow');
    location.hash = hash;
    return false;
  }
});

Note that this could basically work for any element whos…

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…

Linked content

Move Window Buttons Back to the Right in Ubuntu 10.04 / 10.10

One of the more controversial changes in the Ubuntu 10.04 beta is the Mac OS-inspired change to have window buttons on the left side. We’ll show you how to move the buttons back to the right.

Or run this via console:

gconftool-2 --set /apps/metacity/general/button_layout \
 --type string "menu:minimize,maximize,close"

Conditional comments for Internet Explorer with Haml

Internet Explorer 5+ is aware of conditional comments that let you target HTML for selected versions of IE. For example the HTML below would ask users of IE 6 and IE 7 to install Firefox:

<!--[if lt IE 8]>
  <a href='http://www.mozilla.com/en-US/firefox/'>Get a real browser</a>
<![endif]-->

You might wonder how to express such a conditional comment in your favorite templating language, Haml. You might even have converted a template back to ERB just for this …

Putting static content on Cloudfront

We recently decided to put static content for HouseTrip.com to Amazon Cloudfront for a faster user experience. This happens fully automatically on deploy and is transparent in development. Together with a heavy use of sprites this sped up page load time quite nicely.

These are a couple of the problems you need to solve in order to do this:

  • There is no good way to invalidate Cloudfront cached assets, and Cloudfront will ignor…

Setting up Ubuntu Server as Virtual Machine in VMware

Install Ubuntu Server

  • Download an image from this site
  • Select File > New… to and follow the instructions, choose the .iso file you downloaded as image file
  • Deselect "Simple installation" – you want to configure your system yourself
  • Start the new virtual machine and follow the instructions

Install VMware Tools

  • Choose Virtual Machine > Install VMware Tools from the VMware menu, then:

# install required packages
sudo apt-get install build-essential psmisc

# m...

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.

Linked content

Apprise - The attractive alert alternative for jQuery

An alert alternative for jQuery that looks good. Apprise is a very simple, fast, attractive, and unobtrusive way to communicate with your users. Also, this gives you complete control over style, content, position, and functionality. Apprise is, more or less, for the developer who wants an attractive alert or dialog box without having to download a massive UI framework.

Linked content

Why a Rails flash message is shown twice

You set a flash message and it shows up as it should. However, it is displayed again the next time you follow a link. Here is why:

You have to differentiate between a render and a redirect_to because a flash message is only deleted after a redirect. If you want a message to be seen in the next request after a redirect, use flash[]. If you want a message to be seen in the current request, use flash.now[].

Workaround for the lazy

If you cannot be bothered to decide which flash hash to use, or if the fl…

Linked content

Haml and Sass 3.1 are Released

Sass now comes with user-defined functions, keyword arguments, list manipulation. Haml and Sass are now two separate gems.

How to fix strangely disappearing or misbehaving forms

You most likely have a form element inside another form element. Don't do that. Ever.

Firefox and Chrome will discard the first form nested inside another form (but for some reason keep others). Internet Explorer will possibly act like nothing is wrong – but break (send the outer form) when you submit.

If your application behaves normal at first but removes forms from the DOM when you Ajax around, this could be the cause. Remember this note when you think your browsers are broken once again and check for such things thoroughly bef…

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)

Opera: How to use outlining for better layout debugging

I prefer using Opera's "User mode" to toggle an outlining of HTML elements quickly. This helps greatly when you want to see the actual dimensions of elements, e.g. for floating elements inside containers, instead of opening up the Dragonfly inspector every time.

Navigate to View → Style → "Manage Modes…" and tick the checkboxes like in the attached image. Then, switch to the User Mode by pressing the shortcut (Shift+G for the 9.2-compatible layout or for the default layout with enabled "single-key shortcuts") and select "Outline" from…

Weird margin at top of page

If there is some weird margin at the top of your page for no apparent reason, chances are one of your views contains a BOM (Byte Order Mark).

To remove it, open the file with VIM, and type
:set nobomb
:wq

Linked content

Imperative vs Declarative Scenarios in User Stories

Bryan talked about the differences between imperative and declarative scenarios. In my opinion, both styles have benefits and should be used appropriately based on the situation. The majority of examples on rspec's story runner currently on the web, including mine, are of the imperative type. Since the declarative type has many advantages I thought it would be worth while to present some examples and contrast the differences between the two styles.

Deprecated

Making IE 9 happy

If you're using jQuery, you need to update to 1.5.1 to get Internet Explorer 9 to work.

Apart from that there seem to be surprisingly few problems. Many CSS3 attributes work and no major layout problems at first glance.

I only recommend to take a look at your box shadows, since IE does render those a bit differently (generally lighter and offset by what looks to be half a pixel).

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