Frontend

CSS Keyframe Animation fade out and hide without display:none

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 1.x if theres only one slide

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

      Webfont rendered a lot to thick in Google Chrome

      Webfonts currently will be rendered differently in Chrome and Firefox, so especially under Windows Chrome has a really bad font anti aliasing. But sometimes thats not the point.
       
      First make sure you have set the font-weight correctly. If this does not help, you might have the font installed locally? No? I´m sure, you have! You needed it for your screendesign 😉 
       
      Delete the font locally and reload your website (maybe you have to restart chrome), the font should be rendered fine now. Take care deleting the whole font.

        Sidebar auf gleiche Höhe wie den Content bringen (jQuery)

        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.

          Neu Laden bei Drehung eines Mobilgeräts

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

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

            How to use Icon Fonts

            Da ich das Thema Icon Fonts bis heute beharrlich ignoriert habe, es aber doch immer attraktiver wird, habe ich mich nun doch mal dazu durchgerungen die Geschichte in einem kommenden Projekt zu testen. Die Vorteile liegen auf der Hand: die Icons sind frei skalierbar, was insbesondere für die bei uns viel erstellten responsive Themes wichtig ist, und das Aussehen lässt sich rasant schnell per CSS anpassen.

            Nun geht es natürlich zuerst an ein Screendesign, wo ich gleich vor dem Problem stand diese kryptischen Binärcodes, welche mir zu den Icons angezeigt werden einzutippen. Meine kläglichen Versuche lasse ich an dieser Stelle mal hinten runter fallen. 

            Der korrekte Weg ist, einfach Buchstaben, Zahlen oder Sonderzeichen manuell zuzuweisen. Ich generiere die Iconfont auf Fontellio.com (1), eine Seite die man nur über alle Maßen loben kann, da bleiben keine Wünsche offen. 

            1. Icon Font zusammenstellen (nötige Icons markieren)
            2. Font oben einen Namen zuweisen
            3. Auf den Tab „Edit Codes“ wechseln
            4. Im oberen Feld die gewünschten Buchstaben, Zahlen oder Sonderzeichen eintragen
            5. Font runterladen & installieren
            6. Nun kann die Font schlicht und einfach ausgewählt und die Icons entsprechend per Text-Tool eingefügt werden

            Nutzung in der Website

            Als Beispiel soll uns das Suchfeld unserer Drupal Fachbereichsseite DROWL.de dienen, welche wir gerade neu gestalten. Hier haben wir auch gleich einen Sonderfall, da Input Elemente keine Pseudo Elemente gestatten (:before & :after), diese sind hier auf das umgebene Container Element anzuwenden.

            Search field icon with iconfont

            1. Iconfont einbinden, in unserem Beispiel nutzen wir dazu einfach das Drupal Modul @font-your-face (2)
            2. Konfiguration -> Benutzeroberfläche -> @-font-your-face-settings
            3. Tab oberhalb „Import local fonts“ (entsprechendes Submodul muss aktiv sein!)
            4. Unter Design -> @font-your-face einmal checken ob die Font drin ist

            Nun geht es im CSS File weiter, hier einfach entsprechend (am beispiel für ein Input Field) folgendes definieren:

            #YOUR-INPUT-FIELD-CONTAINER:before {
                content: "b"; /* Zugewiesener Buchstabe für das entsprechende Icon */
                display: inline-block;
                font-family: "drowl_iconfont"; /* Font-Family 1:1, wie beim @font-your-face Eintrag angegeben */
                font-size: 18px;
                left: 11px;
                position: absolute; /* Der Container braucht entsprechend position: relative! */
                top: 2px;
            }
            

            Es gibt für Drupal auch ein gesondertes Iconfonts Modul. Dieses liegt heute allerdings nur als Alpha Version vor, welche bei meinem Test Ihren Dienst nicht verrichtet hat. Aber wie man sieht, es geht auch sehr gut ohne. Viel Spaß beim Testen.

              Kleines 1140px Grid Helper Script

              Nachdem ich vergeblich nach einer vernünftigen Lösung für das 1140px Grid gesucht habe, bin ich einfach selber tätig geworden. Ganz simples Script, das nur genau diesen einen Zweck erfüllt: Ein Hilfsgrid zur Ausrichtung über die Seite legen (wobei es hier – erst mal – einzig um die Desktopansicht geht!). Es nutzt exakt die Werte vom 1140px Grid, positioniert schlicht und ergreifend per jQuery 12 Div´s im Page-Container nebeneinander und fertig. Das Ganze ist natürlich per Trigger am rechten Rand ein- wie auszublenden.

              Die bereits angebotenen Helper, sei es die Firefox Extension „GridFox“ oder auch diverse Bookmark- und Insitescripts, hatten alle Ihre Probleme mit diesem flexiblen Grid. Wenn sie mitunter auch noch so schön gemacht waren.

               

              #grid-helper{
                position:absolute;
                top:0;
                left:0;
                height:100%;
                width:100%;
                display:none;
              }
              #grid-helper .grid-row{ 
                float:left;
                height:100%;
                width:4.85%;
                margin-right:3.8%;
                background-color:rgba(185,255,110,0.5);  
              }
              #grid-helper .grid-row.last{
                margin-right:0; 
              } 
              
              #grid-trigger{
                position:fixed;
                top:50%;
                right:0;
                margin-top:-50px;
                background:#000;
                color:#fff;
                padding:20px;
                cursor:pointer;
                opacity:0.1;
              }
              #grid-trigger:hover{
                opacity:1.0; 
              }
              
              function webks_customer_theme_grid_helper() {
                (function($) {
              
                  $('#page').css('position','relative')
              		$('#page').append('
              '); //Trigger $('body').append('
              Show / Hide
              '); $("#grid-trigger").click(function() { $('#grid-helper').toggle(); }); //Load Stylesheets $('').appendTo("head"); })(jQuery); }

                Google Anfahrtsrechner flexibel (responsive) darstellen

                Leider sind viele Google Widgets aktuell nicht auf der der Höhe der Zeit, so auch der Anfahrtsrechner. Dieser lässt sich allerdings leicht anpassen:

                table.gadget, table.gadget iframe{ width:100% !important; } 
                table.gadget #fields table,table.gadget #fields #from, table.gadget #fields #to{ width:auto; }

                  Internet Explorer IE :hover reagiert nur direkt über der Border

                  Das Problem ist mir so noch nicht untergekommen, in diesem Fall ein Div, stellte den :hover-Style nur dar, sobald man sich direkt auf der Border des Divs befand, nicht aber über dem Inhalt. Die Lösung ist so einfach wie amüsant, man gebe dem Div einfach einen Hintergrund, seih es Grafik oder Farbe. 

                  Damit ist das schwarze Loch im Div dann gestopft!