If you turn on stylesheet caching, it might happen that stylesheets from different locations with different relative pathes will be put together to one big stylesheet.
This stylesheet then resides in /stylesheets but still holds the old pathes, which aren't valid anymore. This leads to the effect that images are displayed on your local development machine (where caching is turned off automatically) but not on the server.
To fix this, either:
^
Gem to generate entity relationship diagrams from your Rails 3 ActiveRecord models. The diagram style is pretty and configurable.
If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this easily by using the lang attribute in your views (ERB):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>" lang="<%= I18n.locale || 'en'%>">
...
</html>
or in HAML:
%html :xmlns => "http://www.w3.org/1999/xhtml", :"xml:lang" => I18n.locale || 'en', :lang => I18n.locale || 'en'
Then, in your stylesheet you can for example declare different background-images fo...
If you embedded web fonts in the past years (e.g. by copying CSS from a Font Squirrel @font-face kit), that CSS won't work in Internet Explorer 9.
You can fix it by turning these styles...
@font-face
font-family: 'MyFont'
src: url('myfont.eot')
src: local("☺"), ('myfont.ttf') format("truetype")
font-weight: normal
font-style: normal
... into these:
@font-face
font-family: 'MyFont'
src: url('myfont.eot')
src: local("☺"), url('myfont.e...
Web fonts are awesome. After being restricted to Arial for two decades there is finally a cross-browser way to embed fonts into web pages.
Unfortunately while web fonts look awesome on Linux and MacOS, they look horrible on Windows, a problem that gets worse with smaller font sizes.
The culprit is something called font hinting:
...
If you want to distribute a <table>'s width equally over its columns, you can use the following CSS property:
table-layout: fixed
It is supported by every browser ever.
If you want to know the exact hits on your website (or whatever logfile you want) for a specific date without duplicates, here's how.
"Unique" means you don't want to count hits to an URL originating from the same IP twice.
You can use the attached script to do so:
# ./log_parser.rb 2011-10-04
27 hits on /rss.xml
36 hits on /stylesheets/fonts/slkscr-webfont.woff
37 hits on /stylesheets/fonts/slkscrb-webfont.woff
37 hits on /images/bullet.png
38 hits on /images/download.png
38 hits on /images/play.png
39...
Since version 11.10 Opera provides support for linear gradients using -o-linear-gradient.
The syntax is pretty similar to Mozilla's -moz-linear-gradient. This will create a vertical gradient from yellow to red:
background-image: -o-linear-gradient(top, #ff0, #f00);
The first parameter defines where the gradient starts and which direction it will go. \
You can use top/left/bottom/right (and combinations of those) but also set any angle you like (0° being the left side, going counter-clock-wise):
background-image: -o-l...
Good guide to different ways you can write CSS selectors that select elements by their attribute values.
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>
So the ac...
Detecting if a Javascript is running under Selenium WebDriver is super-painful. It's much easier to detect the current Rails environment instead.
You might be better of checking against the name of the current Rails environment. To do this, store the environment name in a data-environment of your <html>. E.g., in your application layout:
<html data-environment=<%= Rails.env %>>
Now you can say in a pi...
The Capybara API is somewhat hard for parse for a list of methods you can call on a Capybara node. Below you can find such a list. It's all copied from the Capybara docs, so all credit goes to the Capybara committers.
When you talk to Capybara from a Cucumber step definition, you always have page as the document root node, or whatever you scoped to by saying within(selector) { ... }. You can select child notes by calling page.find(selector) or page.all(selector). You can call the same ...
tl;dr: Always have your attachment path start with :rails_root/storage/#{Rails.env}#{ENV['RAILS_TEST_NUMBER']}/.
The directory where you save your Paperclip attachments should not look like this:
storage/photos/1/...
storage/photos/2/...
storage/photos/3/...
storage/attachments/1/...
storage/attachments/2/...
The problem with this is that multiple environments (at least development and test) will share the same directory structure. This will cause you pain eventually. Files will get overwritten and...
When your Cucumber feature needs to browse the page HTML, and you are not sure how to express your query as a clever CSS or XPath expression, there is another way: You can use all and find to grep through the DOM and then perform your search in plain Ruby.
Here is an example for this technique:
Then /^I should see an image with the file...
Select as many rows as you'd like to insert by dragging over the row numbers on the left. Then right-click on any selected row number and select "Insert Rows". Calc will now insert multiple blank rows.
The inserted rows will copy the style from the row above the selection.
This is horrible.
Possible fixes:
float or overflow directives in your CSS.<h1> and <caption> tags in proximity of your table (seriously).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;
...
Thunderbird 5 brings a custom chrome on Windows Vista/7 that uses translucent Aero decorations on toolbars and menubars. Here is how to restore solid backgrounds if you don't like it.
Put the following into chrome\userChrome.css in your Thunderbird profile directory:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
window {
background-color: -moz-dialog !important;
}
(Re-)start Thunderbird afterwards.
If you need more info on where the userChrome.css is suppose...
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.
Emulate jQuery's implementation :
element.offsetWidth > 0 && element.offsetHeight > 0;
Query 3 slightly modifies the meaning of :visible (and therefore of :hidden).
Emulate jQuery'...
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.
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
When done, everything is simply compiled to s...
Note: We have card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.
If you cannot use display: inline-block, centering a float can be useful if you want to center something and at the same time make its width automatically fit some content.
Use this SASS:
.center_float_outer_container
overflo...
The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.