javascript

Override Superfish's Mobile Menu Trigger in Drupal

The Superfish integration for Drupal works nicely for all kinds of menus from Mega Dropdowns down to Mobile. What bothered me with Superfish's Mobile Menu implementation is that the Button that opens the Mobile Accordion (.sf-accordion-toggle) is always named after the name of the actual menu and normally can't be overridden.

One possible approach to overcome this is using plain CSS to hide the span and place something different inside the link tag using the content property. I don't like that idea too much so instead I tried figuring out how to change this with JavaScript. Turned out it's not possible to simply selecting the DOM element and changing its value because the original value gets re-assigned anytime you resize you browser windows. What does work is overriding the Superfish behavior. I just copied it over from superfish.js form the Superfish Module into my theme's JS and there I set my desire value, like so: options.plugins.smallscreen.title = '<i class="glyphicon glyphicon-menu-hamburger "/><span>Menü</span>';

Here's the entire function:

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);
Tags: 

Adding Touch support for jQuery Superslides using TouchSwipe

I was a bit confused when first using Superslides to find out it doesn't come with touch support out of the box. Here's what I did to enable it, maybe it of use for somebody who's wondering, too.

All Superslides examples use Hammer.js as an additional library to support touch. Recent versions of Hammer don't seem to work with Superslides anymore, though. TouchSwipe, on the other hand, does. Nice side effect: TouchSwipe has a smaller footprint than Hammer (11 vs 18 kB minified).

So I simply made sure jquery.touchSwipe.min.js gets included and added the following script to trigger the slide animations on swiping (.views-superslides-wrapper is my main Superslides wrapper):

// adding touch support for the main slider (using SouchSwipe)
var $slides = $('.views-superslides-wrapper');
$slides.swipe( {
  swipeLeft:function() {
    $slides.data('superslides').animate('next');
  },
  swipeRight:function() {
    $(this).superslides('animate', 'prev');
  }
});
Tags: 

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:

Tags: 

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.

Tags: 

Swipebox: the colorbox replacement for my next responsive project

Swipebox Logo

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/

Pages