Loading...
 
Skip to main content

Custom Share Module 0.1dev

Features / Usability

Features / Usability

Forum List Topic List

Forums » Features / Usability » All javascript disappears when trying to add a jquery plugin
 
Thread actions
Print this page
  • Print all pages

    • All javascript disappears when trying to add a jquery plugin

    Posted by Limen posts: 8

    As the title says, I can't install any jquery plugin because the moment I try the final code every default jquery pluging is disabled.

    I'm trying to install either this http://caroufredsel.frebsite.nl/ or this http://jquery.malsup.com/cycle/

    Using Tikiwiki 6.3, after days of trying, I managed to make the caroufredsel plugin work, but again, every other jquery plugin that comes with tikiwiki stops working, I've read that this is probably for security reasons, but I'm not using the tpl editor of the site. I can load the jquery and jquery plugin libraries from the header.tpl with no problems, but when I try to add this code to execute the jquery plugin, it doesn't work.

    Copy to clipboard
    $(document).ready(function() {

	// Using default configuration
	$("#foo1").carouFredSel();
	
	// Using custom configuration
	$("#foo2").carouFredSel({
		items				: 2,
		direction			: "up",
		scroll : {
			items			: 1,
			effect			: "easeOutBounce",
			duration		: 1000,							
			pauseOnHover	: true
		}					
	});	
});

    I know I have to change the name of the ID to what I want to use, this is just an example, it happens with every code that tries to execute the plugin. I can make the plugin work if I put it in the "Custom End of Code" or directly inside a .tpl like the footer.tpl with Dreameeaver or TextPad, but when I when do it with that and with the custom javascript (even if that one doesn't make it work), like I said, everything else stops working. Adding the code inside the wikipage editor doesn't seem to make it work, I have tried with
    Copy to clipboard
    {JQ()} *code* {JQ}
    and with
    Copy to clipboard
    {HTML()}   *code*  {HTML}


    I have tried this method http://doc.tiki.org/Custom+Code+HowTo+-+jQuery and this method http://themes.tiki.org/Infinite_carousel and many other combinations.

    Infinite Carousel works without destroying everything else and by adding the code in the wikipage, but I would prefer to use those other plugins, and I couldn't find a way for Infinite Carousel to use anything other than 11 items, it seemed buggy.

    Reads: 2997
    Posted by Jonny Bradley posts: 126891 United Kingdom
    Limen wrote:

    As the title says, I can't install any jquery plugin because the moment I try the final code every default jquery pluging is disabled.

    I'm trying to install either this http://caroufredsel.frebsite.nl/ or this http://jquery.malsup.com/cycle/

    [snip...]


    Hi Limen

    It is possible to add extra jQuery plugins to Tiki - how and where are you including the extra library? It might failing be because the extra plugin is getting loaded before jQuery. Try using $.getScript in a {JQ} block (which runs on doc.ready by default for you) and do your initialisation inside the callback.

    Your code looks ok - but also you might try Firefox with Firebug installed to break on JS errors (useful in general)

    Good luck!

    jonny

    Posted by Limen posts: 8
    Jonny Bradley wrote:

    Hi Limen

    It is possible to add extra jQuery plugins to Tiki - how and where are you including the extra library? It might failing be because the extra plugin is getting loaded before jQuery. Try using $.getScript in a {JQ} block (which runs on doc.ready by default for you) and do your initialisation inside the callback.

    Your code looks ok - but also you might try Firefox with Firebug installed to break on JS errors (useful in general)

    Good luck!

    jonny


    Thank you!

    You were right, apparently it wasn't necessary to include the libraries in the header.tpl or use the Custom End of body Code

    It seems so simple now:

    Copy to clipboard
    {JQ()}$.getScript('lib/jquery/carouFredSel/carouFredSel-4.0.3/jquery.carouFredSel-4.0.3-packed.js', function() {
    $(document).ready(function() {

	// Using default configuration
	$("#foo").carouFredSel();
	
	// Using custom configuration
	$("#foo2").carouFredSel({
		items				: 2,
		direction			: "up",
		scroll : {
			items			: 1,
			effect			: "easeOutBounce",
			duration		: 1000,							
			pauseOnHover	: true
		}					
	});	
});
});{JQ}

{HTML()}


	 c 
	 a 
	 r 
	 o 
	 u 
	 F 
	 r 
	 e 
	 d 
	 S 
	 e 
	 l 
{HTML}
    Posted by Jonny Bradley posts: 126891 United Kingdom
    Limen wrote:

    Thank you!

    You were right, apparently it wasn't necessary to include the libraries in the header.tpl or use the Custom End of body Code


    Glad i could help - by the way you don't actually need the $(document).ready inside your getScript function as the whole thing will be wrapped in $(document).ready as part of the {JQ} plugin (if you don't use the "notonready" parameter) - obviously doesn't hurt it though if it's working now.

    Could you add some of this to a page on doc.t.o somewhere summarising this for others? Would be nice! 😁

    jb