webksde

Take a look at this amazing library. You may now the effect from Googles image search.

The library take´s the „primary color“ of an image, and set it to the image container as background color. Similar to the tv technique „Ambient Light“.

For some reason, a click on the label of radio- & checkbox form elements does not work (to check the related form item). After some research we figured out, that we have to set the css attribute cursor:pointer to fix this issue.

Another amazing „feature“ made by Apple, big thx for wasting my time guy´s, you´re so great.

Currently there is no way to do this job just with css. I saw various Javascript solutions to do this, most of them are way to complicated (for my use case).

In my case i just need it to detect multiline field labels. So … as i have a fix font size here, i just look out for the elements height via jquery and add a multiline class if its higher then on line of text.

Idea to modify this: Get the height of a one-liner label dynamically (compare the determined height values and use the flattest, also check for empty labels …).

        /* Check if field labels are heigher then one line */
        $(".entityform label").each(function( index ) {
          label = $(this);
          labelHeight = label.height();
          if(labelHeight > 20){
            label.addClass('multiline-label');
          }
        });

If you have an fixed element which is curiously positioned relative to it´s parent (what is definitely against the specification „An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled – http://www.w3schools.com/css/css_positioning.asp“), you probably have something done with the transform-property on any of the parent elements.

This will cause this totally absurd behavoir (in every major browser, so maybe the transform specification sucks, or the w3c has some.. reason to do this kind of sh** … whatever).

Here is an example of the „bug“: http://codepen.io/anon/pen/gpPVZV

Thanks a lot to Mr. Blairhippo you saved my day.

The Display property is not working well with CSS animations, if you read this, you already know. So we have to find a way around.

In my case, i have a layer above the entire page which is overlaying the page content. As you already tried out, visibility won´t work also, as it´s the same as opacity:0;

Solutions:

1. You can move the entire layer out of the viewport eg. position:absolute; left:-9000px;
2. You can try out using a negative z-index to get the layer behind the page-content (makes only sense for layers which are absolute / fixed positioned over the page, not in normal element flow).
3. Make overflow:hidden; and height:0; – take a look:

@keyframes fadeOutAndHide {
    0% {
      opacity:1.0;
    }
    99%{
      opacity:0;
      height:100%;
    }
    100% {
      height:0;
    }
}
.page-welcome-layer.hidden{
  animation:fadeOutAndHide ease-in 1.5s;
  animation-fill-mode:forwards;
  animation-iteration-count: 1;
  overflow:hidden;
}

        // Stop OWL Carousel if theres only one slide
        $owlContainers = jQuery(".owl-carousel");
        $owlContainers.each(function () {
          $owlContainer = $(this);
          $owlSlides = $owlContainer.find('div.owl-item');
          alert($owlSlides.length);
          // More than one slide - initialize the carousel
          if ($owlSlides.length <= 1) {
            $owlContainer.data('owlCarousel').stop();
          }
        });