Decoupled Drupal mit Gatsby

Heute kam ich endlich mal dazu, dieses Tutorial zu Decoupled Drupal mit GatsbyJS nachzubauen. In kürzester Zeit war Folgendes möglich:

  • CMS-Setup inklusive Einrichten der JSON-API
  • Anlegen einer von Drupal völlig unabhängigen statischen Site, die CMS-Content von der API konsumiert und rendert.

Oh, ich freu mich auf die Zukunft und auf reale Projekte mit Drupal als Headless CMS. Ungeahnte Möglichkeiten öffnen sich.

Slick Slider inside Table Display

Today I ran into an issue when trying to use Slick Slider within an element that has display: table. The layout broke almost completely and in all browsers on small width viewports. Simply adding table-layout: fixed; to the element that has display: table solved it.

Bootstrap Dropdown on Hover

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience. http://cameronspear.com/demos/bootstrap-hover-dropdown/

https://github.com/CWSpear/bootstrap-hover-dropdown

Run a JavaScript only on the First Page Load / only on Succeeding Page loads

On a site I’m currently building I need to do some JavaScript scrolling on every page load, except for the first on (to scroll beyond a huge image slider that I don’t want to be in the way on succeeding page loads.

Note: this example makes use of jquery.cookie Plugin by Klaus Hartl, so make sure you include it, too.

(function ($) {
  $( document ).ready(function() {
    var cookieName = 'firstPageLoad';
    var cookieValue = 1;
    // if the cookie doesn't exist we're on the first page load...
    if (!$.cookie(cookieName)) {
      // and set a cookie that is valid for the entire domain
      $.cookie(cookieName, cookieValue, { path: '/'});      
    } 
    // if the cookie does exist, its (most probably) a succeeding page load...
    else {
      // ... so we want to scroll to the navigation
      $('html, body').animate({
          scrollTop: $("#navigation").offset().top
      }, 1000);    
    }
  }); // document ready
})(jQuery);

Dynamic Offset for jQuery One Page Nav

jQuery-One-Page-Nav is a nice script that enables you to scroll smoothly to anchors anywhere on a page while and while it does so it sets a current class for your currently active navigation item.

As this is often combined with a fixed or sticky navigation design there’s an option to set an offset to define how far scrolling takes you. With Responsive Webdesign your sticky element (header in my example) might have a different height depending on the viewport the page is being displayed on.

So I thought it’s a good idea to set this offset dynamically so I scrolling never takes me accidentally under my fixed header:

var top_offset = $('header').height() - 1;

$('.active-parent .dropdown ul').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollOffset: top_offset,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
}); 

Keep navigation bar fixed after scrolling to a certain element

Say you want to tack younav bar fixed at the top of the browser’s viewport after a user has scrolled to a certain element in the DOM. In my example this is the menu itself. This snippet checks the vertical position of my main menu and adds a class to it after a visitor has been scrolling that far that it reached the top of the page.

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  console.log(navpos.top);
    $(window).bind('scroll', function() {
      if ($(window).scrollTop() > navpos.top) {
        $('#mainnav').addClass('fixed');
       }
       else {
         $('#mainnav').removeClass('fixed');
       }
    });
});

Source

jQuery scrollTo without a Plugin

Today, when I quickly needed a solution to smoothly scroll to another position on the same page I was hesitant to just throw another jQuery plugin into my site so I started looking for a more lightweight solution. Here’s what I found:

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

It can just be put inside any callback function, e.g. click(). The following example will scroll to an ID called page-title upon clicking a link with the class scroll-to-title (in 500 ms):

$("a.scroll-to-title").click(function() {
  $('html, body').animate({
    scrollTop: $("#page-title").offset().top
  }, 500);
});

Thanks to A Beautiful Site for sharing!

Swipebox: the colorbox replacement for my next responsive project

Swipebox looks really sweet and works well on both classic computers and touch devices. I’m considering to give it a shot and maybe try to take the time to write a little Drupal module to provide field formatters for swipebox!

Features:

  • Swipe gestures for mobile
  • Keyboard Navigation for desktop
  • CSS transitions with jQuery fallback
  • Retina support for UI icons
  • Easy CSS customization

http://brutaldesign.github.com/swipebox/

Ajax bei jQuery mobile deaktivieren

jQuerymobile ist toll, aber die Ajaxifizierung von Links nervt mich gelegentlich. Mit folgender Anweisung kann man dieses Verhalten global ausschalten und bekommt klassische http-Links!

// disable jquerymobile ajax 
jQuery.mobile.ajaxEnabled=false