webksde

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

    Safari transform z-index bug workaround

    If you have trouble with your z-index using the transform property, you should try to set transform: translate3d(0,0,0) translateZ(1000px) on the element what should overlay the other element(s).

    But be careful, this fucks up all your z-indexes, you have to add translateZ(xxxx) to all elements who should overlay your overlaying element. If you have some position: fixed elements inside your overlaying element, they will fail as well (you must move it outside any container on which you have applied the translateZ property).

    Example:

    // (Animated) element behind the page
    .background-animation-element{
      position:absolute;
      left:50%;
      top:100px;
      z-index:1;
      transform: perspective(200px) rotateX(26deg);
      animation: whatever 1s;
      // ...
    }
    // Page wrapper in front of the element
    .page-wrapper{
      // The part that should work in all major browsers - except safari:
      position:relative;
      z-index:50;
      // The Safari fix:
      transform: translate3d(0,0,0) translateZ(1000px);
    }

    Android TV: Google Play Filme spielt (einige) Videos nicht mehr ab (Nvidia Shield)

    Seit geraumer Zeit konnte ich einige Videos nicht mehr abspielen, der Abspielversuch wurde – abhängig vom Film – mit der Meldung „Es ist ein Fehler aufgetreten“ quittiert. Gleiches beim Abspielen von Trailern.

    Der Versuch das Problem per Chromecast zu umgehen schlug ebenfall mit der Meldung „Die Wiedergabe wird auf diesem Gerät nicht unterstützt. (Fehlercode: 119)“ fehl.

    Die Lösung ist denkbar einfach: Öffnet die Einstellungen eures Android TV Geräts und sucht den Punkt „Apps“, bei Nvidia Shield auf erster Ebene der Einstellungen im Bereich „Allgemeine Einstellungen“ zu finden. Hier wählt hier nun „Google Play Filme & Serien“ und löscht zuerst den Cache. Ich habe direkt alles durchgezogen, daher kann ich nicht abschließend sagen was nun geholfen hat: Cache geleert, Daten gelöscht, Deaktiviert und wieder aktiviert.

    Anschließend ließ sich – bis auf einen einzelnen Film („Suborbicon“) – alles wieder abspielen.

      JTL Shop 4 EVO Template – Kundenpasswörter Maximallänge anpassen

      Aus Gründen beschränkt JTLs EVO Template die Maximallänge von Kundenpasswörtern leider hart im Template.

      Ich will an der Stelle nicht beurteilen warum so ein niedriger Wert angesetzt wurde, sehe jegliche Passwort Restriktionen (welche nicht zur erhöhten Sicherheit beitragen) aber als extrem kontraproduktiv an.

      Die Maximallänge kann in der register/form/customer_account.tpl angepasst werden – im eigenen Sub Theme, nicht im EVO versteht sich. Der Wert muss für beide Passwortfelder angepasst werden, Attribut „maxlength“.

        JTL Shop 4 LESS Kompilierung ohne EVO Theme Editor

        Einerseits ist das JTL Plugin „EVO Theme Editor“ sehr praktisch, um ohne Entwicklungsumgebung kurz eine Änderung zu machen, andererseits für die Entwicklung von Themes / Templates von Grund auf eine ziemliche Quälerei. Einfach weil die Handhabung auf Dauer zu umständlich ist und ein ‚richtiger‘ & personalisierter Code Editor dem eingesetzten ACE Editor eben doch stark überlegen ist.

        (mehr …)

          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 …)

              Typesetter Contact Form released

              We have just released our first bigger Typesetter CMS Plugin. It’s a highly configurable contact form section, where you can add multiple types of fields, send (HTML) Mails to the administrator and the submitter (optional).

              The whole markup and class structure is based on Bootstrap 3, so if you already use a Bootstrap theme, you can install it and you’re ready to go. If you won’t use Bootstrap you have to implement your own styles.

              Currently it’s just a „type“ inside the CustomSections Plugin, which you have to modify a little, please find detailed instructions on Github: https://github.com/webksde/Typesetter-Custom-Sections–Contact-Form

                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!