July 2015

Using SASS breakpoint mixin

One of the SASS mixins that I used a lot is the breakpoint. It makes the media queries in SASS simple and elegant. But first get the mixin at https://github.com/at-import/breakpoint. We can now write our media queries in SASS in the following manner:

  
@import "stylesheets/breakpoint";
.menu {
  @include breakpoint($screen-xs) { 
    font-size: 1em;
  }
  font-size: 1.4em;
}
  

The CSS output:

Adding autocomplete to custom Drupal form using Search API autocomplete module's API

The Search API autocomplete module works well on views page with exposed filter form but we know that views exposed filter form generates less clean URL for its filtered page. Using views contextual filter is the quick way to solve clean URL issue but it requires to develop your own custom search form to pass the query to this views contextual filter. This article will show how to add autocomplete feature to custom Drupal form where data shown in dropdown suggestions are pulled from Search API index using Search API autocomplete module's API.

Drupal Search API Solr spellcheck setup for foreign language

The task is to setup the spellcheck feature of Solr in Drupal for foreign language (in this article I will demonstrate enabling German language and adding new language - Filipino). The Solr spellcheck is a feature where it gives list of suggestions if there is no search result due to spelling error.

Setup short and easy to remember URL for multi-site in Windows local PC

When developing on multi-site in our local development environment we wanted a short and easy to remember URL for each site. We will take a look on how to setup http://webfoobar and http://myotherwebsite address for our sites. The following instructions are for Windows with XAMPP web server solution stack package.

Efficient way to target the outer HTML element in jQuery

Given the HTML structure below. The goal is to modify the inner text of closest outer div tag with "log" class when an anchor tag is clicked. For example when the anchor tag with content "3a" is clicked, the div tag with "log" class inside the div wrapper with "content-a" class inner text should have a value of "3a clicked".

HTML: