Where to put things right?

1

Hi all,

I want to know how Meteor load my js file? Cause I still don’t know how to make it work.
I have a simple html template (which I download from web, including some css, javascript) and want to convert it into Blaze template. Here what I done:

  1. I put js/, images/ and font/ folders in public/ and css/ html in client/.
  2. Fix html file to correct blaze template.

I run OK. but some cool function of the template disappear. From browser console, I got these:

Uncaught TypeError: $(…).wmuSlider is not a function
Uncaught TypeError: $(…).UItoTop is not a function

I tried many ways but can’t make it work.
Some weird things in HTML file make me confused:

<script>
    $('.example1').wmuSlider();
</script>
<script src="js/jquery.wmuSlider.js"></script>

This caused issue.

But this:

<script type="text/javascript">
    $(window).load(function() {
        $("#flexiselDemo3").flexisel({
            visibleItems: 3,
            animationSpeed: 1000,
            autoPlay: true,
            autoPlaySpeed: 3000,
            pauseOnHover: true,
            enableResponsiveBreakpoints: true,
            responsiveBreakpoints: {
                portrait: {
                    changePoint: 480,
                    visibleItems: 2
                },
                landscape: {
                    changePoint: 640,
                    visibleItems: 2
                },
                tablet: {
                    changePoint: 768,
                    visibleItems: 3
                }
            }
        });

    });
</script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

Work perfect, image is sliding.

Could someone help me understand why?

Thanks.

2

Steps to fix:

  1. Move all of your external JS files from /public/js into /client/compatibility (see the Special directories section of the Guide for more details).

  2. Remove your script references from your template; that is, remove the following references from wherever you have them:

<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script src="js/jquery.wmuSlider.js"></script>

Adding your files to /client/compatibilty will take care of the necessary internal references so the above is unnecessary.

  1. Add your .flexisel() call in an onRendered callback of your Blaze Template. For example:
Template.someTemplate.onRendered(function onRendered() {
  $("#flexiselDemo3").flexisel({
    visibleItems: 3,
    animationSpeed: 1000,
    autoPlay: true,
    autoPlaySpeed: 3000,
    pauseOnHover: true,
    enableResponsiveBreakpoints: true,
    responsiveBreakpoints: {
      portrait: {
        changePoint: 480,
        visibleItems: 2
      },
      landscape: {
        changePoint: 640,
        visibleItems: 2
      },
      tablet: {
        changePoint: 768,
        visibleItems: 3
      },
    }
  });
});
3

@hwillson

Thank you, it worked perfect.

4

Please, no html-ids.

Always scope your $ to the template and use classes:

this.$(".flexisel").flexisel({...
```
1 Like
5

Definitely, great advice (sorry, was just copying/pasting his code - too many forum posts to read - always in a rush! :slight_smile: ).

6

:wink:

I jost pointed that out, because I see it A LOT in samples. And it can lead to hard-to-track errors, if the same id is used twice.

So my general advice is always: never use ids :wink:

1 Like