▼
Streaming live at 10am (PST)

How to add custom jquery

Design help General
#1

Hello,
If someone could post how to add some jquery scripts (for example slider or toggle navigation or any jquery script) ?
At firsti i tried to add custome code to head section (jquery and function) than enter div codes in embed, but not working.

Is it possible to preview the effect in Webflow?

Thank you
Maciej

#2

Add a link to jQuery library firt. Remember that if you add uniqueID to the element it has “page-nav-” before that id. Eg. uniqueid: “something” means that that element has “page-nav-something” id.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

You can also check my latest screencast here: http://quick.as/grkspkr

3 Likes
#3

Thank you Bartek, really helpfull.

#4

Is it possible to make this transitions like here in 0:21 or from 0:34 to 0:39 http://tiny.pl/qh2mw ? with little drop or maybe from left/right to center.
Thank you.

#5 
<script>
$(document).ready(function() {
  $("#trigger_to_scale").click(function() {
   $("#object_to_scale").toggle("scale");
 });
});
</script>
#6

Can you show how to paste this datepicker http://www.eyecon.ro/bootstrap-datepicker/ ?

1 Like
#7

I came here because I was having issues with implementing a jQuery script into my design and the answer provided was not enough for me to find my error so after a pain staking process I found the answer and here it is:

In order to properly use a jQuery plug in, it is NOT necessary to include the jQuery library in the head. Webflow already loads it and it does so before the end of the body tag

So first load the plugin by pasting its location before the end of the body tag in your site´s “Custom Code” settings. Should be something like this:

<script src="http://pathtoyourscript/thescript.min.js"></script>

then you can load the functions like this:

<script>
$("button").click(function(){
  $("#div1").fadeIn();
});
  </script>

Hope it helps :smile:

1 Like
#8