Backbone    Development    HTML5    Javascript    jQuery    Mobile    PHP    Visual Composer    WordPress   

3. June 2015

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

  1. Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
  2. Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
  3. Define section and slide anchors, which are reflected in the browser history.
  4. Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
  5. Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
  6. Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
  7. Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
  8. iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
  9. iScroll custom scrollbars are on my list, but not sure I will add these yet.
  10. Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
  11. Visual Composer requirement will be 4.5+.
  12. The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.

Regards
Alexander

Updates

  1. Quickly choose which section / slide to load, when the page is opened.
    cubicFusion_VC_Fullpage_Bchoose
  2. The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
  3. 21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes

readmore
Design    Development   

29. July 2015

ADDING WEBFONTS

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

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

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 …

readmore
Development    Javascript    jQuery   

20. July 2015

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
Development    Javascript    jQuery    Visual Composer    WordPress   

20. July 2015

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
Design   

17. July 2015

“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

readmore
Design    Development    HTML5   

17. July 2015

Responsive social sharing buttons.

Github

readmore
Development    WordPress    WPLMS   

15. July 2015

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

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

readmore
Development    WordPress   

15. July 2015

 

readmore
Design    Development   

3. July 2015

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

BROWSER SUPPORT

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

Enjoy coding …

readmore