Develop Reference

Re-apply JQuery in Meteor template

I have a template with a slick carousel, depending on some JQuery. I add this code to the template as follows:
Template.show_house.rendered = function () {
$('#carousel').slick({
dots: true,
arrows: true
});
};
This template depends on a helper:
Template.show_house.helpers({
house : function() {
return Houses.findOne({_id : Session.get("selectedHouse")});
},
...
When the session changes (user clicking on another item), the data in the template changes, but the JQuery isn't applied again, and the images are just shown as a list rather than a carousel.
I've been playing around with UI.render, but to no avail. What can I do?

I had the same problem, the things for is that i wasnt applying the event Template.foo.rendered to the specific template. Try to apply the jquery event on "rendered" to the proper template and see if it works!

How to use tablesorter plugins cssStickyHeaders widget?

$.noConflict();
jQuery(document).ready(function ($) {
var options = {
sortList: [
[1, 1]
],
theme: 'ice',
widgets: ['zebra', 'cssStickyHeaders'],
};
$("#myTable").tablesorter(options);
});
I use tablesorter and need to use cssStickyHeaders widget but I have two problems that I could not fix.
1) I have another sticky header on my page, and I need this tables sticky header to appear under it. I tried to understand widget options parameters from here but could not make it work.
2) CSS does not update automatically, so I have to turn on and off the developer tools in browser to make it work, to make the header move. In example everything works but it doesn't work with my page, though I do everything in the same way as it is presented in the example.
I am new to javascript. I hope someone will help me.

How to make a slider autoscroll using jquery

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex

You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});

you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

dojo show() and hide() porting from jquery()

I am just porting a bunch of code from jQuery to DOJO (1.8). I was stumbling upon show/hide of DOM elements (may it be layers or anything else).
Let's say we have a layer that we want to show or hide, without animation. Imagine a Buttonbar that changes on some event, I don't necessarily want to bring in graphical effects all the time.
<div id="myLayer">hide me</div>
In jQuery I would do:
$("#myLayer").show(); // to show
$("#myLayer").hide(); // to hide
which I find very nice and slim. Now porting to DOJO I found that I need to do the following:
require(["dojo/fx/Toggler"], function(Toggler) {
// Create a new Toggler with default options
var toggler = new Toggler({
node: "myLayer",
hideDuration: 0,
showDuration: 0
});
// Hide the node
toggler.hide();
// Show the node
toggler.show();
});
That's 8 lines of code versus 2 lines of code. Am I missing something? Is there any faster way to do a simple hide?
Thanks a lot,
Tobi

require(["dojo/query", "dojo/NodeList-dom", "dojo/domReady!"], function(query){
query("#myLayer").style("display", "none");
});

Stop and Start controls for jquery innerfade

I am trying to control this animation with a stop and start button. Does anyone know how to accomplish this without using the cycle plugin?
<script type="text/javascript">
$(document).ready(
function(){
$('ul#portfolio').innerfade({
speed: 9000,
timeout: 5000,
type: 'sequence',
containerheight: '100%'
});
});
link: http://daveywhitney.com/ok/

not sure what you mean but theres is a stop() function you can use, and then recall the animation func
Edit: I found this page using the plugin, which very nice, and includes a pause func. See the example #2, the bgFrame: 'squelettes/img/frame.png' I guess you may like to photoshop some nicer controls, but keep in mind to use the same dimensions, in order to implement it simply and fast.