Using Jquery on wikidot - YES it works!

rhombus 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.)

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?

What do you think? Give us your thoughts!

Hide All Comments Unfold All Fold All

Fold

gerdami 18 Jan 2010 08:03

Rhombus, thank you for your post.
May I ask you to respect the structure we set up at the community:
1- create a HowTo
2- announce it on the blog
Thank you.

gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!

Reply Options

Unfold by

gerdami, 18 Jan 2010 08:03

Fold

Great one Rhombus

HobStarCS 18 Jan 2010 12:43

Very interesting.

Reply Options

Unfold Great one Rhombus by

HobStarCS, 18 Jan 2010 12:43

Fold

JQuery Slideshow

RobElliott 30 Jan 2010 22:12

Rhombus, thanks for nudging me into spending more time getting to grips with JQuery. I like it. An example of a Jquery slideshow I have done is on the start page of a site at http://www.fossoway.org and uses code from http://jonraasch.com/blog/a-simple-jquery-slideshow with an html codeblock/iframe combination to make it work on a Wikidot site. I was pointed towards this particular JQuery slideshow implementation by the slideshow at http://montefizi.wikidot.com/ which is a nice clean and simple site done by Squark

The page the jquery code is on has the jquery-1.2.6.min.js file uploaded to it which is required to get jquery to work.

The html codebock, jquery code and iframe are as follows:

Show Code

Hide Code

codeblock

<html>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<title>Simple jQuery Slideshow from JonRaasch.com</title>
<script type="text/javascript" src="http://www.fossoway.org/local--files/jquery/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
 
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
 
    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
 
    $active.addClass('last-active');
 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
        var $images =[
 "<img src='http://www.fossoway.org/local--files/gallery:zoom/heron_rc.jpg' alt='Slideshow Image 1' class='active' />",
"<img src='http://www.fossoway.org/local--files/gallery:zoom/butterfly_rc.jpg' alt='Slideshow Image 2'/>",
"<img src='http://www.fossoway.org/local--files/gallery:zoom/crowfoot_rc.jpg' alt='Slideshow Image 3'/>",
"<img src='http://www.fossoway.org/local--files/gallery:zoom/dragonfly_rc.jpg' alt='Slideshow Image 4'/>",
"<img src='http://www.fossoway.org/local--files/gallery:zoom/grasshopper_rc.jpg' alt='Slideshow Image 5' />",
"<img src='http://www.fossoway.org/local--files/gallery:zoom/bluebells_rc.jpg' alt='Slideshow Image 6'  />"];
 
    $div = $("<div />");
    $div.attr("id","slideshow");
    var $str = ""
    $.each($images,function(){
        $str = $str +  this;
        });
    $div.append($str);
    $(".my_slide").append($div);
    setInterval( "slideSwitch()", 5000 );
});
 
</script>
 
<style type="text/css">
 
/*** set the width and height to match your images **/
<!--[if IE]>
#slideshow {
    left: -10px;
    position:relative;
}
<![endif]-->
 
#slideshow {
    left: -8px;
    position:relative;
    top: -8px;
}
 
#slideshow IMG {
    left:0;
    opacity:0.0;
    position:absolute;
    top:0;
    z-index:8;
 
}
 
#slideshow IMG.active {
    opacity:1.0;
    z-index:10;
}
 
#slideshow IMG.last-active {
    z-index:9;n
}
 
</style>
</head>
 
<body>
 
<div class="my_slide">
</div>
</body>
</html>

iframe

then the iframe referencing the codeblock above:

[[iframe http://www.fossoway.org/jquery/code/1 width="250px" height="240px" scrolling="no" frameborder="0"]]

I will do a proper how-to on this with more examples of jquery in action as soon as time allows.

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Last edited on 30 Jan 2010 22:44 by RobElliott Show more

Reply Options

Unfold JQuery Slideshow by

RobElliott, 30 Jan 2010 22:12

Add a New Comment

Wikidot Community

hints / tips / help / discussion

Recommend this post?

What do you think? Give us your thoughts!

codeblock

iframe