29. July 2015

Adding a Webfont Fallback for Email Templates in Outlook

ADDING WEBFONTS

@font-face {
	font-family: 'YourFont';
	src: url('yourfont.eot');
	src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg');
}

@font-face {

font-family: 'YourFont';

src: url('yourfont.eot');

src: url('yourfont.eot?#iefix') format('embedded-opentype'), url('yourfont.woff') format('woff'), url('yourfont.ttf') format('truetype'), url('yourfont.otf') format('opentype'), url('yourfont.svg#YourFont') format('svg');

}

These are added within a <style> section in the header. This works all nicely in most modern email clients, but Outlook does not load webfonts and falls back to Times New Roman, which might not always be desired.

OVERRIDE FOR MODERN CLIENTS

[style*="YourFont"] {
	font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important
}

[style*="YourFont"] {

font-family: 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, Arial, sans-serif !important

}

Add this to the header <style> section as well. This makes sure that in clients, that allow Webfonts, your font is actually being used.

ARIAL FOR OUTLOOK

<table>
<tr>
<td style="background:white;height:30px;font-family:  Arial, 'YourFont', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;">
Some text!
</td>
</tr>
</table>

<table>

<tr>

Some text!

</td>

</tr>

</table>

In the body of the email template, you assign your font-family styles for the text, but making sure that Arial is listed first.

Outlook will than use Arial for the text styling.

In modern clients this will be overwritten with the “style rule” above, which checks for YourFont and updates the font-family styling accordingly.

Enjoy coding …

20. July 2015

Detecting if elements are visible in the current viewport

BASIC CHECK

using getBoundingClientRect & jQuery.

“The returned value is a DOMRect object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.”

$.fn.elOnScreen = function(){
    var ele = this.get(0);
    var client = el.getBoundingClientRect();
    return client.top < window.innerHeight && client.bottom > 0;
}

$.fn.elOnScreen = function(){

var ele = this.get(0);

var client = el.getBoundingClientRect();

return client.top < window.innerHeight && client.bottom > 0;

}

jQuery.visible

“This is a jQuery plugin which allows us to quickly check if an element is within the browsers visual viewport, regardless of the scroll position. If a user can see this element, the function will return true.”

Github

jQuery.isOnScreen

“Simple jQuery plugin to determine if an element is within the viewport. Optional parameters allow the user to specify a minimum percentage of the element’s dimensions that must be visible to qualify.”

Github

Enjoy coding …

20. July 2015

Fullpage.js / enhance SlimScroll to detect visible content for animations

When using Fullpage.js, overflowing section / slide content will be made scrollable with Slimscroll. If you want to use addons that rely on the natural scroll event, these will fail with Slimscroll. One of the candidates breaking is Scrollreveal.js for example.

I decided to work around that, to allow animations to be triggered when elements become visible or invisible to the viewport.

ADDITIONAL PLUGINS

You could code the viewport visibility check yourself or use the “visible” jquery plugin.

EXTENDING SLIMSCROLL WITHIN FULLPAGE.JS

The idea was to extend or hook into slimscroll without touching the fullpage.js codebase. Fullpage.js wraps overflowing content within a fp-scrollable container. Slimscroll itself provides events to track your position within the scrollable area in pixels or when top / bottom have been reached.

TRACK TOP / BOTTOM

$(selector).slimScroll().bind('slimscroll', function(e, pos){
    console.log("Reached " + pos");
});

$(selector).slimScroll().bind('slimscroll', function(e, pos){

console.log("Reached " + pos");

});

TRACK POSITION

$(selector).slimScroll().bind('slimscrolling', function(e, pos){
    console.log("Reached " + pos");
});

$(selector).slimScroll().bind('slimscrolling', function(e, pos){

console.log("Reached " + pos");

});

MAIN GOAL

Hook into fullpage.js
Track viewport & visible elements (jquery-visible)
Track direction of scroll
Get current position
Assign classes to elements to trigger animations

MY SOLUTION

This is just a crude and simple starting point, but should give you the basic idea. This still needs some throttling, so that its not called on every scroll position.

var currentScrollDirection = "down";
var currentScrollPosition  = 0;
$("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){
 
 // Top has been reached						
 if(cPos == 0){
  currentScrollDirection = "down";
 }
 
 // Scrolling up or down?
 if(currentScrollPosition > pos){
   currentScrollDirection = "up"
 }else{
   currentScrollDirection = "down"
 }
 
 // Store current position to compare on next check
  currentScrollPosition = pos;
 
 // Our scroll element
 var element = $(this);
 
 // Using the class "reveal" for all elements to track within 
 // Loop over elements on scroll
 
 element.find(".reveal").each(function(){
 
 // using the visible plugin						
 if ($(this).visible(true) ) {
  // add inView and direction classes
  $(this).addClass("inView")
  .removeClass("outView")
  .removeClass("up")
  .removeClass("down")
  .addClass(direction);
 }else{
  // add outView class and handle other classes
  $(this).addClass("outView")
  .removeClass("up")
  .removeClass("down")
  .removeClass("inView");
									
 }
})

var currentScrollDirection = "down";

var currentScrollPosition = 0;

$("body").delegate(".fp-scrollable", "slimscrolling", function(e, pos){

// Top has been reached

if(cPos == 0){

currentScrollDirection = "down";

}

// Scrolling up or down?

if(currentScrollPosition > pos){

currentScrollDirection = "up"

}else{

currentScrollDirection = "down"

}

// Store current position to compare on next check

currentScrollPosition = pos;

// Our scroll element

var element = $(this);

// Using the class "reveal" for all elements to track within

// Loop over elements on scroll

element.find(".reveal").each(function(){

// using the visible plugin

if ($(this).visible(true) ) {

// add inView and direction classes

$(this).addClass("inView")

.removeClass("outView")

.removeClass("up")

.removeClass("down")

.addClass(direction);

}else{

// add outView class and handle other classes

$(this).addClass("outView")

.removeClass("up")

.removeClass("down")

.removeClass("inView");

}

})

HTML EXAMPLE

<div class="scrollArea">
 <div id="elOne" class="reveal">
 </div>
 <div id="elTwo" class="reveal">
 </div>
 <div id="elThree" class="reveal">
 </div>
</div>

</div>

</div>

</div>

CSS EXAMPLE

Very basic idea to get some transitions working.

.inView.down{
border-left:4px solid red;
opacity: 1;
animation: scaleUpDown 1.5s ease both;
}
.inView.up{
border-left:4px solid blue;
opacity: 1;
}

.outView{
opacity: .6;
-webkit-transition:opacity 1500ms ease-out;
-moz-transition:opacity 1500ms ease-out;
-o-transition:opacity 1500ms ease-out;
transition:opacity 1500ms ease-out;
}

@keyframes scaleUpDown {
 from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)}; 
 to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)};
}

.inView.down{

border-left:4px solid red;

opacity: 1;

animation: scaleUpDown 1.5s ease both;

}

.inView.up{

border-left:4px solid blue;

opacity: 1;

}

.outView{

opacity: .6;

-webkit-transition:opacity 1500ms ease-out;

-moz-transition:opacity 1500ms ease-out;

-o-transition:opacity 1500ms ease-out;

transition:opacity 1500ms ease-out;

}

@keyframes scaleUpDown {

from{ opacity: 0; transform: scale(0.2) rotate(30deg) translate(50%)};

to { opacity: 1; transform: scale(1.0) rotate(0deg) translate(50%)};

}

Hopefully Fullpage.js will be switching to iScroll natively in the future, as it provides far more options to handle scrollable areas. You can use iScroll now, but you have to disable the scrolling feature within Fullpage.js and call iScroll yourself. Not that difficult to do :)

There is also a WordPress Plugin that wraps Fullpage.js natively with a nice interface (WP_Fullpage) and my upcoming Visual Composer integration, which already uses iScroll :)

Enjoy coding ….

17. July 2015

Time Lapse Assembler MacOSX

“Time Lapse Assembler allows you to create movies from a sequence of images. Provide it with a folder containing sequentially named JPEG images and it will produce a QuickTime compatible movie file for use in iMovie or other editing software.”

Download

17. July 2015

Ridiculously Responsive Social Sharing Buttons

Responsive social sharing buttons.

Github

15. July 2015

WPLMS Extras Addon

I am working on an Addon for WPLMS to automate some of the manual tasks. Will extend the list, as things progress.

Quizes
– list all
– show enlisted students + result
– action: reset auto-evaluation / remove evaluation / change marks
Improved redirects
Extend account menu
Maintenance
Secure languages

15. July 2015

WordPress redirect after login to referer

if ( (isset($_GET['action']) && $_GET['action'] != 'logout') ||
 (isset($_POST['login_location']) && !empty($_POST['login_location']))
 ) {
     add_filter('login_redirect', 'my_login_redirect', 10, 3);
}

 function my_login_redirect() {
         $location = $_SERVER['HTTP_REFERER'];
         wp_safe_redirect($location);
         exit();
 }

if ( (isset($_GET['action']) && $_GET['action'] != 'logout') ||

(isset($_POST['login_location']) && !empty($_POST['login_location']))

) {

add_filter('login_redirect', 'my_login_redirect', 10, 3);

}

function my_login_redirect() {

$location = $_SERVER['HTTP_REFERER'];

wp_safe_redirect($location);

exit();

}

3. July 2015

WOFF 2.0 – webfonts getting even smaller

The new WOFF 2.0 webfont format is coming to chrome.

“The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases).”

CONVERSION OPTIONS

http://www.fontsquirrel.com/tools/webfont-generator
http://everythingfonts.com/ttf-to-woff2

EMBED WITH FALLBACK

@font-face {
    font-family: MyFont;
    src:
        url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

@font-face {

font-family: MyFont;

src:

url('myfont.woff2') format('woff2'),

url('myfont.woff') format('woff');

}

BROWSER SUPPORT

Google Chrome 36
Opera 23
Firefox 35 (disabled by default)

Enjoy coding …

30. June 2015

Replace / Unload language files in WordPress

add_action( 'unload_textdomain', 'my_unload_textdomain' );

function my_unload_textdomain( $domain ) {
 switch($domain){
  case "remove_textdomain":
   unload_textdomain( 'remove_textdomain' );  
   load_plugin_textdomain( 'remove_textdomain', false, $your_location.'/languages/' );
  break
 }
}

add_action( 'unload_textdomain', 'my_unload_textdomain' );

function my_unload_textdomain( $domain ) {

switch($domain){

case "remove_textdomain":

unload_textdomain( 'remove_textdomain' );

load_plugin_textdomain( 'remove_textdomain', false, $your_location.'/languages/' );

break

}

Sometimes you might like to store all language files in your own central location, so that translators have one easy place to access all language files.

Put the above into the functions.php and add textdomain handling for those you want to centralize.

Most current plugins should include the option to store language files to the global WordPress language folder, but that is sometimes just not enough :) Its all about options ;)

Enjoy coding …

28. June 2015

Fixing SVG height problems in many older browsers

Make sure that the viewbox, width and height are defined within the SVG.

Many older browsers misbehave, if those are defined in the image source tag only and not in the image file itself.

<svg version="1.1" id="mainLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 180.7 166.9" width="230" height="212" enable-background="new 0 0 180.7 166.9" xml:space="preserve">

....

</svg>

viewBox="0 0 180.7 166.9" width="230" height="212" enable-background="new 0 0 180.7 166.9" xml:space="preserve">

....

</svg>