Frontend

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();
          }
        });

Kleiner Linktipp und Erinnerung an mich 😉

Das Problem besteht schon, solange es Webdesign gibt. Per CSS gibt es nur die bekannten Möglichkeiten per position:absolute; + top:0; + bottom:0; oder aber per background-image. Diese Möglichkeiten sind bei Flexiblen (responsive) Seiten allerdings oft unbrauchbar. Zudem hat die Absolute-Methode das Problem, dass hier die Sidebar keinesfalls länger sein darf als der Content, sonst überlappt diese in den Footer, oder sogar aus der Seite heraus.

Per jQuery ist das ganze natürlich kein wirkliches Problem:

/* Full Height Sidebar */
function fullHeightSidebar() {
  (function($) {

    jQuery(window).load(function (){ // execute when document.ready scripts are finished
      var heightContent = $('#content-column').height();
      var heightSidebar = $('.region-sidebar-second').height();

      if( heightContent > heightSidebar){
        $('.region-sidebar-second').css('height',heightContent);
      }
    });

  })(jQuery);
}

Hier ist das ganze schon in ein Resize Script gekapselt, dieses müsst Ihr bei euch ggf. ergänzen, damit es dann auch live, on resize, etc. funktioniert.

Kleines JavaScript Codeschnipsel zum neu laden bei Drehung des Mobilgeräts.

    // Reload on Orientation Change!
    $(window).bind("orientationchange", function(e) {
      location.reload();
    });