ANNOUNCE: SectionUI: transform the UI of sections on a page

[guido]

oww,
you are right. I work on firefox now and it works. But not in IExplorer.

[jdaniel3760]

Hi,

I like this template a lot.
However I'd like to run it as a local resource to suit my business policies.

I see this syntax in the template
<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.all.css" rel="stylesheet" /><link type="text/css"
href="http://scripts.mindtouch.com/res/jqueryui/ui.base.css" rel="stylesheet" /><link type="text/css"
href="http://scripts.mindtouch.com/res/jqueryui/ui.core.css" rel="stylesheet" /><link type="text/css"
href="http://scripts.mindtouch.com/res/jqueryui/ui.theme.css" rel="stylesheet" /><link type="text/css"

I'm a noob with dekiscript/xml so how to change this to refer to say /var/www/dekiwiki/scripts/res instead of the mindtouch website?

Thanks
Jeremy

[neilw]

First: Editing is now fixed for Firefox and Chrome. IE8 does not work, and I don't know about IE9 (anyone want to test?) Use version 1.2.0 from the app catalog.

Next: if you want to host the resource files locally, you'll need to do the following:
0) Recommend you install version 1.2.0 of SectionUI from the MCP first.
1) Create the directory /var/www/dekiwiki/extensions/jqueryui
2) Install the resource files: download and copy the following files into /var/www/dekiwiki/extensions/jqueryui:
- http://scripts.mindtouch.com/res/jqueryui/ui.core.css
- http://scripts.mindtouch.com/res/jqueryui/ui.theme.css
- http://scripts.mindtouch.com/res/jqueryui/ui.tabs.css
- http://scripts.mindtouch.com/res/jqu...ui.core.js.txt
- http://scripts.mindtouch.com/res/jqu...ui.tabs.js.txt
- http://scripts.mindtouch.com/res/jqu...cordion.js.txt
3) Edit Template:SectionUI. For each resource URI in the code, replace "http://scripts.mindtouch.com/res/" with "/extension/". So, if you start with this (line 76):

<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.core.css" rel="stylesheet" />

After changing it you should have this:

<link type="text/css" href="/extensions/jqueryui/ui.core.css" rel="stylesheet" />

The main disadvantage you'll have to deal with is that whenever the script is updated, you'll need to re-modify to install the changes. But ya do what ya gotta do.

[jdaniel3760]

Thanks for quick response Neil

I tried all this and when I test the sectionUI template I now get a page that can't be displayed or edited.

<link type="text/css" href="/extensions/jqueryui/ui.core.css" rel="stylesheet" />
<link type="text/css" href="/extensions/jqueryui/ui.theme.css" rel="stylesheet" />
style == "tab" ?
<link type="text/css" href="/extensions/jqueryui/ui.tabs.css" rel="stylesheet" /> :
<link type="text/css" href="/extensions/jqueryui/ui.accordion.css" rel="stylesheet" />;

<script type="text/javascript" src="/extensions/jqueryui/ui.core.js.txt"></script>
style == "tab" ?
<script type="text/javascript" src="/extensions/jqueryui/ui.tabs.js.txt"></script> :
<script type="text/javascript" src="/extensions/jqueryui/ui.accordion.js.txt"></script>;

fyi I'm using fiesta on 10.1.0

[guido]

Neil,
I changed skin, now I use Deuce light blue. Suddenly mu tabs are all lowest level headers, no matter which levels I give them. Do you think you may be able to fix this? I eally feel squized between all posibilities and problems that are coming from using different skins and different templates that only seldom work together.

[neilw]

Guido,
Sorry for your troubles. As you know (I hope), the templates in question are not supported by Mindtouch, and as a result it can be difficult to keep their operation in sync with the skins, especially templates like SectionUI that depend heavily on the skin-dependent HTML markup used to generate the page.

I'll see if I can figure out what's going on with deuce light blue.

[guido]

Neil, it looks like you are standing up to be my saviour! Thanks man. I am now using deuce, with expanding tree (with the hover thing!) and HideElements. The latter is partially working, if I get back my tabs, I am done experimenting.

[guido]

Neil,
I understand this is a lot of work, and I do not feel ok with me sitting around, just waiting for a solution. But I have not enough knowledge to do it myslef. Maybe you can help me get started so that I can do the rest myself?
Could you explain wich steps you take to get the right css-codes to change in your script?

[rbunnage]

This app worked great on the page where I used it. However, when referencing that page through transclusion, it does not function correctly. Is there an "option" I can set to fix this? Anything which can be done about it?

[neilw]

I don't think I've tried transcluding a SectionUI'ed page, but I'm not surprised it doesn't work. Transcluding pages with a lot of jQuery gets very confusing very quickly. That said, I suppose it's possible it could be made to work, but it's likely to take some effort and I probably won't have time in the immediate future. If/when I do, I'll post back here.