New module: miniHero - Banners

sky writer · June 22, 2017, 04:53:18 PM

You are my ~~mini~~ Hero!

Ruud, are you sure you aren't a teacher or a Jedi??? You have the ability to say something that I have read about many times, and without spelling it out much more than those before you, inspire me to see what I have been missing. I still have to work at it a bit, which is not a bad thing, as I will always have more to learn along the way. Perhaps I am just starting to catch on to all this stuff finally, so things are beginning to fall into place.

I just had to move the foundation jquery call to the head, leaving the rest of the foundation calls at the bottom of the <body>, and now everything works beautifully.

Code Select

<script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/jquery.js"></script>
<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
    register_frontend_m odfiles('css');
    register_frontend_m odfiles('js');
} ?>

</head>

Code Select

    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/what-input.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/foundation.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/app.js"></script>
   
</body>

When I was first building my custom template, I put all the foundation calls in the <head> but the off-canvas function didn't work. So I did more research and found the appropriate Docs. What confused me was the instructions on the Foundation Docs page - http://foundation.zurb.com/sites/docs/javascript.html
That state:

QuoteOnce you have the files, add links to jQuery and Foundation as <script> tags at the bottom of your page, just before the closing <body> tag.

It doesn't specify that the placement is for page loading speed only, so I took it as a necessity and moved everything to the end of the body.

Actually, the only call that has to be at the bottom of the <body> is the app.js:

Code Select

<script src="<?php 
    echo TEMPLATE_DIR; ?>/js/app.js"></script>

which contains the Initializing function:

Code Select

$(document).foundation()

This is a custom responsive template I am creating which implements some foundation elements such as buttons and the off-canvas menu for smaller viewports. I was actually inspired to build this template by playing around with another of your progressive modules - Bootstrap Multiple Columns. I had initially planned to use it extensively, but it turns out I haven't needed to use it... yet. But your miniHero with parallax was a design "pop" element I was missing.

Thank you!

Ruud · June 22, 2017, 10:29:32 AM

It is advised to always have jQuery loaded in the <head> of your template.
Many modules using frontend.js will rely on the existence of jQuery.

In your foundation based template, the other scripts could be loaded in the bottom of the page without problems (this may speed up page loading).
Just make sure jquery.js (or jquery.min.js) is never loaded twice.

Note that the line register_frontend_modfiles('jquery'); also loads a version of jquery. So when loading your own jQuery version make sure not to use this WebsiteBaker functioncall.

sky writer · June 22, 2017, 03:33:31 AM

I added a link to the jquery CDN into the head, and removed the register_frontend_modfiles jquery, and everything is working now.

Code Select

<script
              src="https://code.jquery.com/jquery-1.8.3.min.js"
              integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
              crossorigin="anonymous"></script>

<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
    register_frontend_modfiles('css');
    register_frontend_modfiles('js');
} ?>

</head>

sky writer · June 22, 2017, 02:02:01 AM

Thanks for the follow up Ruud.

Yes, the module on your site looks great and functions on my browser.

I suspected js or jquery, but tried every combination of Output Filter and nothing worked. I currently only have droplets and email active.
I have register_frontend_modfiles in my head:

Code Select

<?php 
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
    register_frontend_modfiles('css');
    register_frontend_modfiles('jquery');
    register_frontend_modfiles('js');
} ?>
</head>

But I guess since there is no jquery included with your module, that doesn't help.

I suspected it had something to do with my implementation of Zurb Foundation and more specifically the "off-canvas" menu for mobile view ports, but I couldn't find the actual cause. You are correct, it is a jquery issue.

For the off canvas to work, I have to put these scripts at the end of the body:

Code Select

<script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/jquery.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/what-input.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/vendor/foundation.js"></script>
    <script src="<?php 
    echo TEMPLATE_DIR; ?>/js/app.js"></script>
    
</body>

If I move them to the head, then the parallax effect works... but my off canvas menu breaks.

Not knowledgeable enough to know where to go from here.

Ruud · June 22, 2017, 12:47:02 AM

Quote from: sky writer on June 21, 2017, 07:31:43 PM
If the parallax is working for others, then I will try to figure out the issue on my end. I'll report if I find anything.

Have a look on https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/
If that works, it is not your browser but more probably a jQuery issue (none or multiple jQuery scripts loaded)

Ruud · June 22, 2017, 12:44:50 AM

I forgot to mention..

The parallax wil need jQuery to be loaded. If no jQuery is loaded it will just act as the original miniHero (static background image).

Also when viewing on mobile devices parallax is disabled.
This is because IOS (iPhone) does not handle this technique at all and for "budget android" parallax scrolling is too much processor consuming.
So on mobile devices the module will also show the static image.

dbs · June 21, 2017, 07:38:11 PM

Short tested in a local environment 2.10 with PHP5.6: works also.
Hope you find the reason.

sky writer · June 21, 2017, 07:31:43 PM

Hi, sorry.

PHP-Version: 5.6.26
WebsiteBaker-Version: 2.10.0

Local install on WBPortable, so no link unfortunately.

If the parallax is working for others, then I will try to figure out the issue on my end. I'll report if I find anything.

dbs · June 21, 2017, 07:18:37 PM

Hi. WB-version, PHP-version, link to the problem?

sky writer · June 21, 2017, 06:35:45 PM

Thank you for yet another useful and progressive module!

I upgraded from version 0.1 and am not seeing the parallax effect. I tried uninstalling and installing 0.2 clean, but still don't see parallax.

Also, is the only difference between the "Title", "Textblock 1" and "Textblock 2" the preset CSS formatting? Or if it more subtle or important a difference?

johnbroeckaert · June 21, 2017, 05:53:09 PM

Just where i was waiting for. The parallax thing I was using wasn't easy for most customers!
A big Thanks!!

dbs · June 21, 2017, 04:24:15 PM

Tested and works great.

Good idea, looks very very nice.

Ruud · June 21, 2017, 04:14:37 PM

Version 0.2 released today.

Added parallax scrolling for the hero image.
Demo: https://dev4me.com/modules-snippets/opensource/minihero-banners/parallax-demo/

Hans · June 09, 2017, 11:45:18 PM

Thanks man (again)!

dbs · June 09, 2017, 06:28:49 PM

Next easy mini module. Works. Thanks Ruud.

VSG · June 09, 2017, 05:20:23 PM

Thanks, great module!

johnbroeckaert · June 09, 2017, 05:05:09 PM

Thanks @ruud! Usefull!!

Ruud · June 09, 2017, 03:02:44 PM

Create a large image (no slider) with captions on your (home)pages. Fully responsive.

Demo and download: https://dev4me.com/modules-snippets/opensource/minihero-banners/

News:

New module: miniHero - Banners

johnbroeckaert

johnbroeckaert