Help needed executing js on pages other than discussion page (1st plugin attempt)

whu606

Background - I'm a happy amateur, who can follow instructions to add js elements to my sites, but don't know anything about js coding itself.

Thanks to the Interwebby and the kindness of strangers, plus the Vanilla WIki, I have added a 'slide out on click' feature to hold the panel elements, which stays on the page as it scrolls down, to my testing Vanilla site, and it works fine when I have the js calls in the Head section of my default.master.php file.

I was experimenting with making this a plugin (partly for the experience, but also in case others found it useful.)

I set up my plugin.php file, and a slider.js file, and everything works fine on the discussion page, but the following code (in slider.js) doesn't 'fire' on other pages, even though slider.js is loaded in the source html of the other pages.

$(document).ready(function(){

$( '#example' ).scrollFollow();


    $(".label2").click(function(){
        $(".slide2").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });

$(".label1").click(function(){
        $(".slide1").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
    
});

This is called from my plugin.php file like this:

class SliderPlugin extends Gdn_Plugin {

   public function AddJsCss($Sender) {
        
$Sender->AddCSSFile('testslide.css', 'plugins/Slider');
$Sender->AddJsFile('plugins/Slider/js/slider.js');
$Sender->AddJsFile('plugins/Slider/js/jquery.scrollFollow.js');
$Sender->AddJsFile('plugins/Slider/js/ui.core.js');
$Sender->AddJsFile('plugins/Slider/js/jquery.js');


   }
    public function Base_Render_Before($Sender) {
        $this->AddJsCss($Sender);
    }
   }

As I say, if I put the code from slider.js directly into the default.master.php file it works fine on all pages.

I guess there is something fairly simple I'm not doing,

If someone can suggest what I'd be grateful, as then I could more easily share this with the community.

422

Try firing jquery before other js elements.

So jquery then ui then js files. Incidentally jquery.js should be fired with vanilla by default.

422

Try firing jquery before other js elements.

So jquery then ui then js files. Incidentally jquery.js should be fired with vanilla by default.

whu606

@422

Thanks.

That suggestion worked perfectly. You are a champion.

Oddly, although jquery is fired by default in Vanilla, and shows up in the source html of a page, if I don't also link to that specific version of the file (linked in the original example), I can't get the fixed element to work. No idea why.

422

Could be a version issue of jquery. Note vanilla i think comes with built in custom ui elements.

You could initiate on dom ready, or add the js elements within the footer. Do you get console errors in firebug

whu606

@422 no js errors reported.

tbh although I'm not quite in over my head, the water is certainly lapping my chin!

Essentially I took two pre-existing solutions, one that uses jquery to create a clickable slideout box, and another that keeps such elements on the page as you scroll down.

I first tried them in a 'plain' html page, so I could be sure I could get the concept right, then tried to apply them to my test Vanilla site.

Once I achieved that with snippets directly in the default.master file, I used the Vanilla WIki example to try to create it as a plugin.

So at each stage I was using a pre-existing solution, without really having to (or probably being able to) understand quite how they worked.

I may well have ended up going a very long way round to achieve the effect I wanted.

Once I've made sure it works, I'll post up the plugin, and if anyone can make it slicker or more efficient, that would be great.

422

Goodonya, bush mechanics we call it.