When using @media CSS queries, Internet Explorer 8 and below will fail to respect them.
Though there are several options (like mediatizr and css3-mediaqueries), Respond.js was the only one that worked for me.
If you do not want to pollute your application's default JS file with Respond.js, simply:
Create an extra JS file (like media_queries_polyfill.js) that loads Respond.js:
//= require respond-1.4.2
Make sure it's added to config.assets.precompile
Embed that JS fi...
When you want the table headers to always stay around (e.g. because that table is huuuge), use the code below.
table.fixed_table_header{
position: fixed;
top: 0;
width: auto;
display: none;
border: none;
margin: 0;
}
;(function($) {
$.fn.fixHeader = function() {
return this.each(function() {
var $table = $(this),
$t_fixed;
function init() {
$t_fixed = $table.clone();
$t_fixed.find('tbody').remove().end().addClass('fi...
If you want to do JavaScript-style camelization, ActiveSupport's String#camelize method can actually help you out. Simply pass a :lower argument to it.
>> 'foo_bar_baz'.camelize
=> "FooBarBaz"
>> 'foo_bar_baz'.camelize(:lower)
=> "fooBarBaz"
Check out the jsFiddle Demo.
.absoluteCenterWrapper {
position: relative; /* Declare this element as the anchor point for centering */
}
/* Positioning */
.absoluteCenter {
margin: auto; /* Required */
position: absolute; /* Required */
top: 0; bottom: 0; /* Aligns Vertically */
left: 0; right: 0; /* Aligns Horizontally */
}
/* Make sure the centered element fits into its container. If you know that's the case, you can omit this part. */
.absoluteCenter {
max-height: 100%;
max-width: 100%;
}...
Vanilla JavaScript way, but removes any other onbeforeunload handlers:
$(function(){
document.body.onbeforeunload = function() {
for(editorName in CKEDITOR.instances) {
if (CKEDITOR.instances[editorName].checkDirty()) {
return "Unsaved changes present!"
}
}
}
}
Note: Don't forget to mark the 'search as you type' forms with the skip_pending_changes_warning class.
var WarnBeforeAccidentallyDiscard...
Add to ckeditor/config.js
CKEDITOR.editorConfig = function(config) {
config.contentsCss = [
'/assets/myCkeditorStyles.css', // any other file to encapsulate custom styles
'/assets/myFontFaceTags.css'
];
}
It's not enough to provide the font face tags within your public folder. You have to explixitly call it within the ckeditor/config.js.
...
Non-static elements will not inherit their parent's opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.
To fix it, give the parent element defining the opacity a non-static positioning. For example:
.parent {
opacity: 0.2;
position: relative; /* for IE */
}
While the linked article describes this problem for IE9 and below, I have encountered the same issue in IE10 and IE11.
Just go away, Internet Explorer!
Crazy hack. Might be useful one day.
The code required has since been extracted into a library.
Colorizes code in LibreOffice Writer.
Note that you need to create a paragraph style _code for this to work.
Clever hack to allow user interaction without Javascript (by using radio buttons and selecting on :checked).
table-layout: fixed
Setting the colorbox opacity by hash parameter when initializing doesn't work the way like the documentation tells you.
$(selector).colorbox({ ..., opacity: 0.5, ... }); // has no effect
The opacity value of 0.5 will be overwritten by the inline style attribute style="opacity: 0.9" that colorbox sets.
To manually set the opacity you have to add the following css rule
#cboxOverlay { opacity: 0.5 !important; }
An annoying part of using font icons is that the icons usually need to live in the DOM. This is a step back from the time when we defined raster icons with background-image, in the CSS.
It doesn't have to be that way.
Copy the attached file font-awesome-sass.css.sass to your assets (we recommend /vendor/asset-libs/font-awesome-sass).
You can now use Font Awesome icons from your Sass files:
@import font-awesome-sass
...
Ubuntu 12.04 LTS x64, Ruby 1.8.7, Rails 2.13, PDFKit 0.5.4, Phusion Passenger Apache 2
I ran into this, when I started using passenger to deal with the Single Thread Issue which caused my webrick to deadlock when an ActionController::RoutingError (No route matches "...") occurred.
(1) assert dependencies are installed
sudo aptitude install openssl build-essential xorg libssl-dev
(2) only for 64bits OS Run one by one the follo...
I recently created a survey asking fellow designers about the problems they faced when creating fully responsive sites. This article will list the most common problems they reported and offer possible solutions, along with suggestions to consider on your next projects.
Motion is quickly becoming one of the most important emerging techniques in building a quality user experience on the web. Angular 1.2, currently in release candidate form, provides an overhaul of Angular's animation system and makes it spectacularly easy to bring your interface to life.
Rails has always included a scaffold script that generates a default controller implementation for you. Unfortunately that generated controller is unnecessarily verbose.
When we take over Rails projects from other teams, we often find that controllers are the unloved child, where annoying glue code has been paved over and over again, negotiating between request and model using implicit and convoluted protocols.
We prefer a different approach. We believe that among all the classes in a Rails project, controllers are some of the hardest to...
Using text-transform: uppercase - especially on form labels - can cause you serious headaches in Selenium tests. Sometimes the web driver will see the uppercase text, sometimes it won't, and umlauts will be a problem as well.
Simply disable it in tests, by
adding a body class for tests
%body{'data-environment' => Rails.env}
overriding the transforms
[data-environment="test"] *
text-transform: none !important
Did you know you can color your line-throughs or underline, or make them wavy like spell-checkers do?
Awesome slide deck about taking liberties with design requirements in order to keep the CSS simple.
A list of FontAwesome icons in the form of copyable Unicode characters or HTML entities.
You might prefer to use FontAwesome by simply typing out these characters instead of using CSS classes. Of course you need to then give the containing element as style:
font-family: FontAwesome
An opinion how to implement BEM. I don't agree with all of Nico's choices, but I applaud his approach to compile a simple and short list of rules.
Box shadows are awesome. Unfortunately they are also very costly to render. You will rarely notice the rendering time on a laptop or desktop PC, box shadows can make your app completely unusable on smartphones and tables. By "unusable" I mean "device freezes for 10 seconds after an user action".
Not yet. Eventually mobile devices will become powerful enough to make this a no...
Using CSS sprites for background images is a technique for optimizing page load time by combining smaller images into a larger image sprite.
There are ongoing arguments on how useful this still is, as modern browsers become more comfortable to load images in parallel. However, many major websites still use them, for example amazon, [facebook](...
