Frontpage

Smart Sticky Sidebar via hcSticky

HC Sticky Demo

If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar ... try https://github.com/somewebmedia/hc-sticky

Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.

Smooth scrolling anchor links and hash url's - also base tag fix

This solution is also very usefull on pages with -Tag. Sometimes the basetag will make anchor links not working properly anymore (redirecting to the base url).

Typesetter Documentation

As the Typesetter documentation currently lacks a lot of informations, i will share some further things here.

(Known) Javascript Callbacks editor_area:loaded SectionAdded SectionCopied (Unclear - looks like only SectionAdded fired if a section is copied) SectionRemoved SectionSorted section_sorting:loaded section_options:loaded PreviewAdded PreviewRemoved

to be continued ...

Firefox Development Edition added new features

Firefox Development edition Settings

Just removed 3 plugins from my dev Firefox we do not need anymore! Just press F12 and hit the settings button. At the left bottom, you see some amazing options, like: Colorpicker, Ruler, Screenshot. Another interesting thing ist the "Scratchpad" a JavaScript console, who can store and run JS snippets.

The activated tools are now available at the top right.

Typesetter aka gpEasy - Remove edit and login locks

To remove the edit lock, simply navigate to your main directory, open the "data" folder, and delete the temporary "lock_...." file.

To reset the login lock, navigate to: "/data/_site/" and edit the "user.php". Now simply reset the "attempts" to 0.

Adaptive background (color taken from an image via JS)

Adaptive background color

Take a look at this amazing thing. Love it.

The library take´s the "primary color" of an image, and set it to the image container as background color. Similar to the tv technique "Ambient Light".

Webfont "Amiri" wrong underline position

In a current project we used the beautiful looking font "Amiri". After hovering the first link, i saw the underline appearing way too to far at the bottom.

As we can´t fix this via CSS, i modified the font with FontForge. The result is called "Amirifix" and is attached to this post.

Amiri is an Open Font by Khaled Hosny & Sebastian Kosch.

Credits:

Copyright (c) 2010-2013, Khaled Hosny <khaledhosny@eglug.org>.Portions copyright (c) 2010, Sebastian Kosch <sebastian@aldusleaf.org>This Font Software is licensed under the Open Font License, Version 1.1.

iOS Radiobuttons & Checkox Label behavoir

For some reason, a click on the label of radio- & checkbox form elements does not work (to check the related form item). After some research we figured out, that we have to set the css attribute cursor:pointer to fix this issue.

Another amazing "feature" made by Apple, big thx for wasting my time guy´s, you´re so great.

Drupal Mimemail Module (HTML Mails, Newsletter, ...) unwanted attachment.dat *Update*

In a current project we ran into a curious problem, every HTML Mail has an file attachment named "attachment.dat".

After some research in the "mimemail.theme.inc" (function "template_preprocess_mimemail_message()"), we figured out that the problem is located inside the $css content.

In our case the implementation of the google webfont produces this issue (@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400...)). Basicly @import has to work inside html mails, so mimemail seems to do something wrong here?

Whatever. We can work around this problem, using the <link ...> - implemantation inside the mimemail-message.tpl file instead of the declaration directly inside the css code.

 

How to detect multiline text with jQuery

Currently there is no way to do this job just with css. I saw various Javascript solutions to do this, most of them are way to complicated (for my use case).

In my case i just need it to detect multiline field labels. So ... as i have a fix font size here, i just look out for the elements height via jquery and add a multiline class if its higher then on line of text.

Idea to modify this: Get the height of a one-liner label dynamically (compare the determined height values and use the flattest, also check for empty labels ...).

/* Check if field labels are heigher then one line */ $(".entityform label").each(function( index ) { label = $(this); labelHeight = label.height(); if(labelHeight > 20){ label.addClass('multiline-label'); } });