Page 1 of 1

[SOLVED] Problem with "jQuery Expander Plugin"

Posted: Mon Feb 14, 2011 3:29 am
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 ???

Re: Problem with "jQuery Expander Plugin"

Posted: Mon Feb 14, 2011 6:10 am
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...

Re: Problem with "jQuery Expander Plugin"

Posted: Mon Feb 14, 2011 6:24 pm
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

Re: Problem with "jQuery Expander Plugin"

Posted: Mon Feb 14, 2011 7:43 pm
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...

Re: Problem with "jQuery Expander Plugin"

Posted: Mon Feb 14, 2011 10:21 pm
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 :)