[SOLVED] Problem with "jQuery Expander Plugin"

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
arstach
Forum Members
Forum Members
Posts: 27
Joined: Tue Jun 01, 2010 5:21 pm

[SOLVED] Problem with "jQuery Expander Plugin"

Post by arstach »

I've found complete tutorial on http://plugins.learningjquery.com/expander/, it's very easy to plug it in (tried it on my local "test-page" and it worked just fine). I did everything like tutorial says, but it is still not working.. any ideas why? maybe there is some kind of conflict with CMS MS?

p.s. or maybe there is other simplier solution to do so, but I don't know about it.. ?? ;/ please help ???
Last edited by arstach on Mon Feb 14, 2011 10:22 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Problem with "jQuery Expander Plugin"

Post by Dr.CSS »

You will have to give better description of what it is you did, step by step, to try and get it to work in CMSMS, maybe a link to a working example and a non working example...
arstach
Forum Members
Forum Members
Posts: 27
Joined: Tue Jun 01, 2010 5:21 pm

Re: Problem with "jQuery Expander Plugin"

Post by arstach »

I did everything like it was said in tutorial above..
-I starded with adding "expandable" class to my content div
-then I've uploaded jquery.js and jquery.expander.js to my server
-last thing was adding

Code: Select all

<__script__ src="jquery.js" type="text/javascript"></__script>
<__script__ src="jquery.expander.js" type="text/javascript"></__script>

<__script__ type="text/javascript">
{literal}
$(document).ready(function() {

  // simple example, using all default options
  $('div.expandable p').expander();
  
  // *** OR ***
  
  // override some default options
  $('div.expandable p').expander({
    slicePoint:       80,  // default is 100
    expandText:         '[...]', // default is 'read more...'
    collapseTimer:    5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '[^]'  // default is '[collapse expanded text]'
  });
  
});
{/literal}
</__script>
to head section in my cmsms template..

to show that it really works, i've uploaded my simple test page, you can see how it works on http://85studio.pl/test/informacje.html
and here is my current project http://85studio.pl/nowastrona/oferta/ in which epander plugin is not working
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Problem with "jQuery Expander Plugin"

Post by Dr.CSS »

First you have to call jQuery first then all the other JS that uses it, you have it second, you should remove all but the expanding ones to get them working then add the others below it, and you may have the main jQuery script called twice which will stop it from working...
arstach
Forum Members
Forum Members
Posts: 27
Joined: Tue Jun 01, 2010 5:21 pm

Re: Problem with "jQuery Expander Plugin"

Post by arstach »

I didn't thought that the order is so important.. It took a while before i found the right one, but now everything works just fine.. here is how the head section looks at the end..

Code: Select all

	<head>
		{metadata}
		<title>{sitename} - {title}</title>
		{stylesheet}
		<__script__ type="text/javascript" src="uploads/85studio/js/jquery.js"></__script>
		<__script__ type="text/javascript" src="uploads/85studio/js/jquery.expander.js"></__script>
		<__script__ type="text/javascript">{literal}
		$(document).ready(function() {

		  // simple example, using all default options
		  $('div.expandable p').expander();
  
		  // *** OR ***
  
		  // override some default options
		  $('div.expandable p').expander({
		    slicePoint:       80,  // default is 100
		    expandText:         '[...]', // default is 'read more...'
		    collapseTimer:    0, // re-collapses after 5 seconds; default is 0, so no re-collapsing
		    userCollapseText: '[^]'  // default is '[collapse expanded text]'
		  });
  
		});{/literal}
		</__script>
		<__script__ type="text/javascript" src="uploads/85studio/js/scripts.js"></__script>
		<__script__ type="text/javascript" src="uploads/85studio/js/first_word.js"></__script>
		<link rel="icon" href="uploads/images/85studio/85studio_logo32.png" type="image/x-icon"/>
	</head>
many thanks for Dr.CSS :)
Post Reply

Return to “Modules/Add-Ons”