rhombus prhombus p 17 Jan 2010 02:47

Ever wanted to use jquery to make those cool animation effects, but didn't know how to do it in wikidot? Well, now you can!

This tutorial only explains how to use the javacript library JQuery with Wikidot. This doesn't include any tuts on using jquery itself, that can be found at w3schools.com and at jquery.com. Okay here how to do it

First, you will need to download a copy of jquery. That can be done by clicking here and then clicking the download button. (download the production version.) Then you will need to upload it to you wikidot site by clicking the files button at the bottom of your page. Once it is uploaded click the info button and copy the link it gives you. (look at below graphics.)

jquery2.PNGjquery3.PNG

Once you have copied the link add this code to a wikidot page

[[code type="HTML"]]
 
  <script src="http://yoursite.wikidot.com/local--files/yourpage/jquery.js"></script>  
<!-- ^^  put your copied link above ^^-->
 
<!-- put your html/javascript/jquery code below. enjoy -->
 
[[/code]]

Once you have added that code to your page, change the appropriate links and insert you code after the link that says "put your html/javascript/jquery code below. enjoy."

Then, for wikidot to actually render your code, add this code to your wikidot page. (changing "yoursite" and "yourpage" to the name off your site and the page the code is located)

[[iframe http://yoursite.wikidot.com/yourpage/code/1 scroll="0" width="100%" height="400px"]]

After you do that, you should be good.

For an example of it working and the code click here

note: due to the way wikidot cache iframes like this, you may need to refresh the page, wait, or even log out for your page to reflect iframe updates.


Recommend this post?

rating: +1+x

What do you think? Give us your thoughts!

Add a New Comment