small medium large xlarge

27 Dec 2016, 15:32
Dima Rogov (1 post)

I’ve encountered strange issue with the cart’s appearance in the sidebar. To reveal the hidden cart after adding any item to it the following snippet of code is used:

if ($('#cart tr').length == 1) { $('#cart').show('blind', 1000); }

But in my case no effect has been shown. What I see is some empty space appears in its place (but not as much as whole cart can take), and after 1 sec the whole cart pop-ups. I have fixed part of the issue deleting the code marked with an arrow (‘>’) from the application.scss:

#side {
  padding: 1em 2em;
  background: #141;
>  form, div {
>    display: inline;
>  }

Ater that cart appears smoothly in sidebar, but in some strange way: width of sidebar isn’t changed and table looks “compressed” during the ‘blind’ animation. After animation is finished, table widens #side container without any effect, which looks a bit jumpy. Since the original intention of the chapter was to smooth cart appearance inside sidebar, I wonder if I’m doing something wrong or everything works as it should? Do I need to fix this strange behavior? If so, how could I achieve this?

19 Feb 2017, 15:35
Sam Ruby (634 posts)

While I can’t reproduce these symptoms, it looks to me like you have your Rails logic correct, but somehow aren’t including everything needed to do the JQuery UI blind effect. Look in app/assets/javascripts/application.js for “//= require jquery-ui/effects/effect-blind.js”. Note that recent versions of this gem changed the path (added /effects/).

27 Jun 2017, 08:48
Wolfgang Kubisiak (2 posts)

I experience the same problem on my mac (working on the 5.1 version of the book). I definitely set effects/effect-blind.js but with display:inline the blind effect is not visible. Using display: block for example the blind effect is visible. This seems to be a Safari feature - on Firefox it works even with inline setting.

03 Jul 2017, 23:23
Bijan Hoomand (3 posts)

I am having the same problem on Mac, on both Chrome 59.0.3071.115 (Official Build) (64-bit) and Firefox 52.2.0 (64 bit). Changing display to block in application.scss did not make the blind effect work either:

side {

padding: 1em 2em;
background: #141;
color: #bfb;

form, div {
  display: block;

Here is the content of my application.js:

//= require rails-ujs //= require jquery //= require jquery-ui/effects/effect-blind //= require jquery_ujs //= require turbolinks //= require_tree .

You must be logged in to comment