I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German


BLOG FILTER



“This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you’re building a website using flexbox and something isn’t working as you’d expect, you can find the solution here.”

Github (CanIUse)

readmore

Chartist is currently my goto solution to add a quick responsive charting lib for projects …

Chartist

readmore
29. September 2015

Emulate click in Safari Mobile

This often comes up, when you work with jQuery and try to do a simple $(“#YourElementID”).trigger(“click”); or similar.

Enjoy coding …

readmore

With inline content being loaded via ajax, you are loosing a lot of interesting usage data. These can be tracked using Google Analytics Events or by sending a Pageview.

LETS SHOW IT ALL FIRST

The above allows to automate tracking by attaching simple classes and use HTML5 data attributes to assign category, action and label.  Direct tracking is also possible. Lets split it up :)

EVENT TRACKING INIT

This monitors links with the class .trackEVENT attached and fills the event data using HTML5 data attributes. All attributes have default values assigned.

A possible link would look like this:

The sendEvent function than sends this to Google Analytics.

PAGEVIEW TRACKING

Much simpler,  this just gets the element text and submits the click as a new Pageview. The label gets the pagename attached and the actual page url is constructed from the label. The sendPageview function than sends this to Google Analytics.

DIRECT USE

Really simple and effective way within a simple OnePager or a bigger web application. BTW I am using delegation to make sure that also links within AJAX content can be tracked.

Enjoy coding …

readmore

Finally identical inputs across different browsers and devices — both desktop and mobile.

iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.

iCheck

readmore

We are getting closer to Boostrap 4 and I really love what we are getting with the first alpha version.

  1. Improved grid system
  2. Opt-in flexbox support is here. Nice.
  3. Dropped wells, thumbnails, and panels for cards.
  4. Consolidated all our HTML resets into a new module, Reboot. Much cleaner.
  5. Dropped IE8 support and moved to rem and em units. Finally REM units and IE8 free. I know there will be still projects with IE8 requirements, but the amount of projects is getting less and less :)
  6. Improved auto-placement of tooltips and popovers. They are using Tether, have been using that for projects for some time now. GREAT!

Bootstrap Alpha 4 / Documentation

readmore

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.”

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 …

readmore

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.

“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.” jquery-visible on Github

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

TRACK POSITION

MAIN GOAL

  1. Hook into fullpage.js
  2. Track viewport & visible elements (jquery-visible)
  3. Track direction of scroll
  4. Get current position
  5. 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.

HTML EXAMPLE

CSS EXAMPLE

Very basic idea to get some transitions working.

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 ….

readmore

“Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.”

Supported languages
Prism

readmore

  • Fully responsive. Scales with its container.
  • Separate settings per breakpoint
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging
  • Infinite looping.
  • Fully accessible with arrow key navigation
  • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc…

slick

readmore