Libraries, i.e. jQuery, MooTools, etc

Community resources Product feedback
1

Would be nice to have the hard coded jQuery 2.0.3 removed from webflow.js (smooth scrolling/form submit effect) and make it an option in the dashboard to include the core library (latest from CDN) in the head section, i.e. check boxes for common libraries, also when checking the option for smooth scrolling, a dialog pops up stating that this will automatically include the jQuery library. That way we can include our own scripts that use the library without having to duplicate it or add it post export. As of right now I tried adding the following in a script element (to un-hide a section on button click) but jQuery is not defined because it is not global.

  <script>
    jQuery(function($){
      $('.form-container').on(click, '.contact-button', function(e) {
        $(this).fadeIn(500);
        e.preventDefault();
      });
    });
  </script>
2

Why do you need jQuery(function($) { ... }? It should work with

<script>
 $('.form-container').click(function(e) {
  e.preventDefault();
  $(this).fadeIn(500);
});
</script>

Also I don’t understand the concept here… You want to click on a form container that appears to be hidden to show it but… How can you click something that is hidden?

3

Edited for clarity: It doesn’t work that way as jQuery is not included as a global function in webflow.js, (feel free to try it, its a self-invoking function only usable in webflow.js) and no, the “on” method doesn’t work that way either, its backwards from the deprecated but still supported .click event, the target is defined first, the event handler is the button element that is clicked, defined after the event type.

Oh, it makes more sense if you know the button is not within the hidden .form-container, here is an example of a hidden form I did post webflow export but now that we have an embed element I wanted to try giving my clients a nice preview experience before the dissection and coding process -http://murrietavalleychoir.com/

4

Nice one :slight_smile: But that “Still writing our perfect song, check back soon.” should be less distractive. And shouldn’t need any user interaction (click button) to close it). Try to give it a clean look somewhere where it will be an information rather than popup. That’s just my suggestion :wink: The contact is very nice. I still like to use CSS instead of jQuery for effects if I can since CSS has “more fps” than jQuery. That’s just my suggestion :slight_smile: Maybe you could use css opacity + z-index + ease in&out instead of fadeIn/Out?

~Bartek

5

Thanks for the feedback, I also prefer css animations over js but 2 main reasons, lack of current ability to use parent or another element as the trigger (coming soon hopefully) and 2 the dreaded IE and lack of support for css3 animations, IE8 and some even in IE9. If it was simply for effect, no biggie, IE users miss out but since its a modal (one-page) type design js is the fallback for now.

actually it looks like I was wrong, IE10 is needed to support css transitions - CSS Animation | Can I use... Support tables for HTML5, CSS3, etc man, can’t IE just die already? =)

6

Also, for others that may want to do this, i.e. use jquery in webflow hosted presentation, this is what works for me.

Drop in a script block and first include the library and then include your custom code.

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$('body').on('click','.contact-button', function(e){
$('.form-container').fadeIn(500);
e.preventDefault();
});
</script>

Additionally, as @bartekkustra suggested, this could also be a way to add css transitions to an element via another elements action or state by simply using js to add and remove classes.

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$('body').on('click','.contact-button', function(e){
$('.form-container').toggleClass('visible');
e.preventDefault();
});
</script>

Here are a few css animation helpers:
http://www.justinaguilar.com/animations/index.html

7

I agree with @pingram3541. As we need extensive js script for things like “scroll down to refresh” or slide galeries, my dev coders says it’s pain to have JQuery hard coded.

I personnally don’t care but for bigger project, with e-coomerce, multi language, blogs, it does matter.

Cheers !

8

Oh and obviously …

That could create conflicts when using Bootstrap Twitter (3.0) on top of things programed in WF.

I can say that our team will get there soon.

Cheers !

9

This might not be related, but I get errors unless I re-include the jquery library…and when I do re-include it, the page obviously gets past the problem of not having $ or jQuery defined. But I am wondering if the error generated by my code below is caused by some kind of conflict. (error is “Uncaught TypeError: Object [object Object] has no method ‘iosSlider’”)

Sorry, I neglected to put code in the code formatting, but when I try to edit my post, it won’t let me re-post so similarly.

10

Hi all! Just to update you on this issue, jQuery has been separated from webflow.js in both published and exported sites. Both script tags are being inserted before the closing </body> tag.

More JavaScript guidelines can be found in this post.

-Dan