Frontend

CSS (fake) placeholder text for select elements

For now, there is no placeholder attribute available for HTML select elements what is really bad if you need to achive some kinda reduced form styling, without field labels and stuff.

HTML Select element with fake placeholder
Example form with placeholder style select label

But there is a workaround, we have to add the label as the first option with a value=““. Now we want to style it like the other placeholder texts. To do so we need just a little JS & CSS:

      var $placeholderSelects = $('form select');
      if($placeholderSelects.children().first().is(':selected')){
        $placeholderSelects.addClass('select-placeholder-option-active');
      }else{
        $placeholderSelects.removeClass('select-placeholder-option-active');
      }
      $placeholderSelects.on('change', function(){
        if($(this).children().first().is(':selected')){
          $(this).addClass('select-placeholder-option-active');
        }else{
          $(this).removeClass('select-placeholder-option-active');
        }
      });

The JS ensures that we just have the placeholder style / color, if the first value is selected. (Yes, i better should put this in a function …)

select{
  &.select-placeholder-option-active{
    color: $input-placeholder-color;
    > option:not(:first-child){
      color: $input-color;
    }
  }
}

    Fix blurry skewed pseudo elements (before & after) in Firefox

    Problem: I have some buttons with one skewed side using skewed, absolute positioned pseudo element. In Firefox the pseudo element (::before) looks blurry and the blur overlaps the parent element, so it looked really bad.

    Solution: After a failed Google search i tried to fix it on my own. The simple solution is: Add transform: skew(0) to the parent element.

    (mehr …)

      Keyframe animation is not starting in Safari

      Lately i was running into an Safari issue – what happens really often lately, i really start to fall in love with this „amazing“ piece of software. Whatever – the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.

      (mehr …)

        CSS Object-Fit ♥♥♥

        I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this ‚magic moment‘. It’s just so freaking helpfull for RWD that i won’t miss it anymore.

        The worse thing about it, like most new techniques, some major browsers do not support it. It’s just IE & Edge and personaly i wouldn’t give a shit about them, but as web professionals – sadly – we still have to care about those.

        So i found a nice workaround which will work in all Browsers supporting the background-size property.

        It’s pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.

        Please see the detailed solution here: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3

        Thank’s alot to Primož Cigler!

          Smart Sticky Sidebar via hcSticky

          If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar … try https://github.com/somewebmedia/hc-sticky

          Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.

            Smooth scrolling anchor links and hash url’s – also base tag fix

            This solution is also very usefull on pages with -Tag. Sometimes the basetag will make anchor links not working properly anymore (redirecting to the base url).

            $(document).ready(function () {
              // Anchor links on click based on Chris Coyier's solution: https://css-tricks.com/snippets/jquery/smooth-scrolling/
              $('a[href^="#"]:not([href="#"])').click(function(e) {
                if (location.hostname == this.hostname) {
                  var target = $(this.hash);
                  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                  if (target.length) {
                    $('html, body').animate({
                      scrollTop: target.offset().top - 80 + 'px'
                    }, 1000);
                    return false;
                  }
                }
              });
            
            });
            
            // Smooth scrolling anchor links
            // to top right away
            if (window.location.hash)
              scroll(0, 0);
            // void some browsers issue
            setTimeout(function () {
              scroll(0, 0);
            }, 1);
            
            $(function () {
              // *only* if we have anchor on the url
              $( window ).load(function() {
                if (window.location.hash && $(window.location.hash).length > 0) {
                  // smooth scroll to the anchor id
                  $('html,body').animate({
                    scrollTop: $(window.location.hash).offset().top - 80 + 'px'
                  }, 1000, 'swing');
                }
              });
            
            });
            

              Adaptive background (color taken from an image via JS)

              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“.

                iOS Radiobuttons & Checkox Label behavoir

                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.

                  How to detect multiline text with jQuery

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

                    Fixed positioned element is aligned relative to the parent

                    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.