Mootools Accordion

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
4/27/2009 2:38:04 PM
Gravatar
Total Posts 8

Mootools Accordion

I cannot for the life of me figure out how to make this work in this CMS. Has anyone run into any issues getting mootools or prototyle to work? It's such a basic accordian, and I have it wired to the js files... the accordion does not work. Any thoughts?

4/27/2009 2:52:56 PM
Gravatar
Total Posts 18439

Re: Mootools Accordion

If you are having problems with custom development it helps if you give more information about what you have done, code fragments etc. You say you have wired it up correctly but if that were so would it not work? You should tell exactly how you tried to wire it up and don't assume you got it right but something about the cms makes it not work. 

I don't know anything about mootools accordion but I recently implemented a control that wraps the YUI Accordion and makes it easy to attach it as progressive enhancement to the markup of an existing <ul id=foo" runnat="server">...li elements in markup.

You can see an example on the left side of the page here http://www.mojoportal.com/SiteOffice/yui.aspx

and you can study my code if you are working with the mojoportal source code, its in Web/SiteOffice/yui.aspx

Hope it helps,

Joe

4/27/2009 2:56:44 PM
Gravatar
Total Posts 18439

Re: Mootools Accordion

I forgot to mention the code example for YUI Accordion is not in the latest zip release of source code but is available in svn trunk.

Best,

Joe 

4/27/2009 3:02:56 PM
Gravatar
Total Posts 8

Re: Mootools Accordion

I'm sorry if I came off as blaming the CMS... I know this has to be user error, honestly. The mootools sample is very easy, and found here:http://demos.mootools.net/Accordion

In the head, I wired up the links in the layout.Master:

<script src="http://site135.mysite4now.net/mstgroup/site1/ClientScript/mootools.js" language="javascript"></script>

<script src="http://site135.mysite4now.net/mstgroup/site1/ClientScript/demo.js" language="javascript"></script>

Then I created a page (http://site135.mysite4now.net/mstgroup/site1/our-work.aspx) and pasted the dummy text accordion. I pasted the CSS into my skin css file. It just doesn't make sense, why it's not working. I"ll check out the YUI interface, in the meantime.

Thanks,

Tim

4/29/2009 8:43:54 AM
Gravatar
Total Posts 18439

Re: Mootools Accordion

Hi,

I guess you mean you pasted the markup from the moottools example into an instance of the Html content feature using the source view.

In theory (after looking at the files in the mootools demo), that would work if you added the js to the master page and pasted the html from inside the <body> of the demo example it should work.

The problem is if you include that demo.js file in the layout.master it will be present in every page using that skin and therefore it would cause errors because the html elements that script is expecting only exists in the one page. 

I don't know much about mootools but with jQuery you can select elements by css class names so it would be better to have some specific class names you use to mark an accordion, then create your own js to select the elements with the class name and create the accordion. That way you could use an accordion on any page just by marking it up correctly and there would be no errors because its not expecting elements with a particular id. If there are no elements with the designated css class then it would do nothing.

I used a similar approach to make it possible to use YUI tabs from within content as shown here.

To me its quite different to use js widgets in development of features using server side code to wire everything up and another thing entirely to make widgets creatable inside the content editor. I've done a lot of work wrapping up the YUI stuff in .NET Controls to make it easy to use them in development of features, but so far I've only wired up the tabs as something that can be used easily in the content editor, but I would like to do more. I think it would be very useful to be able to create accordions within the content by merely assigning a class name.

Best,

Joe

4/29/2009 8:47:42 AM
Gravatar
Total Posts 18439

Re: Mootools Accordion

The other issue that could have been a factor is we use jQuery in mojoPortal so jQuery scripts are included and it looks like mootools also uses the $ sign in a way similar to jQuery so it may have a conflict. If you use Firebug plugin in Firefox you can find out if it was causing any js errors.

It might be better to try jQuery accordion since there should be no conflict http://docs.jquery.com/UI/Accordion

Maybe I will look into making the jQuery one available in the content editor in the same way we hacve the tabs.

Best,

Joe

 

4/29/2009 10:09:41 AM
Gravatar
Total Posts 18439

Re: Mootools Accordion

fyi, I just implemented this in my local copy so it will be in the next release of mojoPortal. You will be able to create an accordion like the one shown here, by simply pasting in markup like this:

<div class="mojo-accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Section 4 content</p>
</div>
</div> 

I will create a documentation page about it after the next release.

Best,

Joe

4/29/2009 10:20:34 AM
Gravatar
Total Posts 8

Re: Mootools Accordion

I figured out the majority of my problem. I was trying to link a css file in the master page, rather than put it in the style.config. I'm new to CMS and mojoportal, so please excuse my mess. I did however happen to get the YUI accordion to work beautifully.

Thanks for all your help, Joe!

Tim

4/29/2009 1:20:39 PM
Gravatar
Total Posts 18439

Re: Mootools Accordion

I just updated this site with the latest code to show off the new accordion

 

Section 1

Section 1 content.

Section 2

Section 2 content

Section 3

Section 3 content

Section 4

Section 4 content

its created simply by pasting in this markup in source view

<div class="mojo-accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Section 4 content</p>
</div>
</div>

Cheers,

Joe

4/29/2009 1:44:17 PM
Gravatar
Total Posts 8

Re: Mootools Accordion

Very nice. What would I have to do to get that to work on my site?

4/29/2009 1:54:55 PM
Gravatar
Total Posts 18439

Re: Mootools Accordion

It will be in the next release of mojoPortal which will probably be in 2-8 weeks. If you're a developer and can get the code from svn trunk and make and deploy your own build, it will be in svn trunk by the end of the day tomorrow.

Its also themeable using a bunch of already made jquery ui themes. If you try it out on the demo site, you'll see if you change the skins, some skins have the accordion styled differently.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.