VSLIDER: The addon could not be enabled because it generated a fatal error

sanicki

Installed under /plugins, moved vslider to root directory then vslider.html to root as well. Tried to enable plugin and received this message on Vanilla 2.1.1.

vrijvlinder

ok let me check it out and I will get back to you.

vrijvlinder

I found the error, there was an extra } in there I uploaded a fixed version

http://vanillaforums.org/addon/vslider-plugin-1.3

Thanks for helping me find my mistake

sanicki

No need to thank me. Thank YOU for making it.

Now I can enable it and can open vslider.html directly, but it doesn't appear in any page. I tried both options in vslider.js but don't see it on the categories page.

I'm using the Bootstap theme if that makes a difference.

(This is my first time using Vanilla Forums so apologies in advance if it's my dumb mistake.)

vrijvlinder

I have not tested it with the Bootstrap them but I suspect you need to change the name of the element it is prepended to.

If you give me a link to see your page where you want it to show I can tell you what to change in the js file.

Bootstrap does not use the same name for classes of elements that are in the default. So it is just a matter of changing the name of it to match in the js file of the vslider plugin.

This is the js for the plugin , you will possibly need to change #Body to .container  

 $(document).ready(function() {
//comment this if you want it in the categories page you will need to add the full url to the vslider.html file

$('body.Vanilla.Discussions.index #Body').prepend('<iframe class="slider" src="vslider.html" style="height:450px;width:980px;overflow:hidden;"></iframe>');

//uncomment this if you want it in the categories page you will need to add the full url to the vslider.html file

//$('body.Vanilla.Categories.all #Body').prepend('<iframe class="slider" src="full url goes here/vslider.html" style="height:450px;width:980px;overflow:hidden;"></iframe>');



});

sanicki

Thanks. This is the page: http://sanickiosk.com/categories

I've unsuccessfully tried:

• body.Vanilla.Categories.index

• body.Vanilla.Categories.all

• body.Vanilla.Discussions.index

• body.Vanilla.Discussions.all

vrijvlinder

No that is not what needs to be changed those are all options as to where you want it to appear as far as page .

You want it to appear in the categories page ? You need to un comment that section in the default.php of the plugin and comment out the other if you don't want it to show there.

public function DiscussionsController_Render_Before($Sender) {
//comment this if you want it in the categories index page

  if(IsMobile()){
 return;
}
else
{
$Sender->AddJsFile('plugins/VSlider/js/vslider.js');

   }

}


 public function CategoriesController_Render_Before($Sender) {
//uncomment this if you want it in the categories index page
//   if(IsMobile()){
 //return;
//}
//else
//{
//$Sender->AddJsFile('plugins/VSlider/js/vslider.js');
//} 

     }
     public function OnDisable() {
      return TRUE;
   }

}

Then you need to change the js file of the plugin to this but you need to test with the theme.

 $(document).ready(function() {
//comment this if you want it in the categories page you will need to add the full url to the vslider.html file

$('body.Vanilla.Discussions.index section.container').prepend('<iframe class="slider" src="vslider.html" style="height:450px;width:980px;overflow:hidden;"></iframe>');

//uncomment this if you want it in the categories page you will need to add the full url to the vslider.html file

//$('body.Vanilla.Categories.all section.container').prepend('<iframe class="slider" src="full url goes here/vslider.html" style="height:450px;width:980px;overflow:hidden;"></iframe>');



});

Using this js you can put it anywhere just a matter of figuring out what to attach it to within the theme's html

Normaly you would have #Head #Body #Content #Foot #Panel . The theme loads these assets normally but the container they are in are called something else.

If you look at the default.master.tpl of the theme you can see the elements and try different things to see what works.

sanicki

To be honest, it's a bit over my head. I'm not seeing anything defined by id in the Bootstrap default.master.tpl.

vrijvlinder

It is very simple . I gave you the code to change in the js file of the plugin to try that element. section.container is an option to use to see if it shows there.

Uncommenting means removing the // in front of the code so it works. Adding the // makes it not work if you don't want it to be used. Make sure you add the full url of your site .

$('body.Vanilla.Categories.all section.container').prepend('<iframe class="slider" src="full url goes here/vslider.html" style="height:450px;width:980px;overflow:hidden;"></iframe>');

sanicki

I do appreciate the attempts to help, and I have made the changes you advised, but I'm still having no luck. I tried it with section.container then when that didn't work thought you were saying section.container was a placeholder for an id I'd find in Bootstrap's default.master.tpl. Tried a number of things without success, which I'm sure has more to do with my novice comprehension than your plugin.

vrijvlinder

I would need to install bootstrap and test it myself to see what is going on. Give me a couple days or so.

sanicki

I do believe I'm going to owe you a beer.

vrijvlinder

It's ok just don't sing victory until I can make it work for you...

sanicki

Fair enough. Until then I'll just hum it...

vrijvlinder

Sorry it took me a while but I was busy with other things...

Ok change the contents of the file vslider.js to this

    $(document).ready(function() {
    $('body.Vanilla.Discussions.index section.container').prepend('<iframe class="slider" src="vslider.html" style="height:450px;overflow:hidden;width:100%;border:none;margin:0 auto;float:none;"></iframe>');

$('body.Vanilla.Categories.index section.container').prepend('<iframe class="slider" src="vslider.html" style="height:450px;overflow:hidden;width:100%;border:none;margin:0 auto;float:none;"></iframe>');
    });

Change this part to this in the default.php of the plugin so it shows in the categories page also.

 public function CategoriesController_Render_Before($Sender) {
if(IsMobile()){
return;
}
else
{
$Sender->AddJsFile('plugins/VSlider/js/vslider.js');
} 
}

This works for me using Bootstrap

sanicki

It's alive! Thank you!!! Do you have a donate link?

vrijvlinder

That's great ! please download one of peregrine's plugins that contain the donate link, he is my manager

sanicki

Donation made. Thanks again! Is there any documentation for a CSS noob?

peregrine

Donation made. Thanks again! Is there any documentation for a CSS noob?

we thank you for the donation. that was a nice way to show your appreciation for plugins and help.

there are links to documentation theme in link below and Tutorials and Wiki

http://vanillaforums.org/discussion/comment/206536/#Comment_206536

googling css tutorials of css design for general css info.

vrijvlinder

Hey thanks for the donation!!

My favorite tutorial site http://www.w3schools.com/css/ it is great because you can even test the stuff out to see how it works right then and there.

sanicki

My pleasure!