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.

Drupal: Insert JavaScript for Every Page except Front Page

Just a quick reminder for myself how to simply load an asset only if a certain condition is true.

In template.php we need to implement template_preprocess_page() check our condition and load our script using drupal_add_js():

<?php
function MYTHEME_preprocess_page(&$vars) {
  // if we're NOT on the front page load a script from the currently active default theme
  if (!$vars['is_front']) {
    $active_theme = drupal_get_path('theme',$GLOBALS['theme']);
    drupal_add_js($active_theme.'/js/notfront.js');
  }
}
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):

Tags: 

Using Node.js modules in your Drupal Themes

As my frontend development workflow gets more and more dependent on Grunt and node.js there are are issues coming up when Drupal tries to parse .info files from theme directories. I've had a hard time working around this by putting Gruntfile.js and package.json in a hidden subdirectory of my theme, but this resulted in a lot of broken Grunt tasks (and it's basically yet another hack because it simply relies on the fact that Drupal doesn't scan directories starting with a dot).

So I went the easy yet dirty way and hacked the Drupal core. Yes, yes, it's bad, but I didn't see another way without wasting yet even more hours just to be able to employ a modern frontend workflow.

All I had to do was changing the nomask value in line 2109 of includes/file.inc to 'nomask' => '/(\.\.?|CVS|node_modules)$/',

Multi line text shadow in Firefox

I've been using Fabien Doiron's Box-Shadow Method to create multi line padded text for a while. Just recently I had to find out that this isn't working anymore in later versions of Firefox.

Turns out starting with Firefox 32 Mozilla has introduced text-decoration-break: split as default. Setting it to box-decoration-break: clone; does the trick.

Thanks to Chris Coyier for pointing this out.

Tags: 

Help the GNOME project defend its trademark!

Groupon has announced a product called Gnome, trying to claim the name of the popular desktop for Linux and BSD desktops that has been around for 17 years. This is outrageous!

Even if you don't use the GNOME desktop yourself (I don't do neither) please consider donating to the GNOME Foundation to help them protect their trademark and set a signal that FLOSS projects will be protected.

This legal defense is not just about protecting GNOME's trademark; it is about asserting to the corporate world that FLOSS trademarks can and will be guarded. Not just by the project in question, but by the community as a whole. As a result, all FLOSS trademarks will be strengthened at once.

Responsive Sticky Footer with flexible height

Thanks a lot to Galen Gidman for sharing his solution to create Responsive, Flexible-Height Sticky Footers in CSS – works like a charm.

Update
Turned out this causes Firefox and Internet Explorer to ignore max-width: 100% on images. To solve this we need to add table-layout: fixed; to the body tag (CSS below updated).

Markup

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

Tags: 

Pages