Tabbed Pages with Javascript

Tabbed Pages with Javascript

by Steven A -
Number of replies: 6
I'm trying to create tabbed pages in a Moodle text page (Compose a text page)

Here's how I've set things up:
  • Compose a text page with <html> tags
  • JS and CSS are in <head>
  • Content is in <body>
  • The full code structure looks like this: <html><head>JS+CSS</head><body>CONTENT</body></html>
Things look great when I open the resource, but clicking *any* tab instantiates the JS (I assume), and the page breaks. The screenshot shows what's happening. Notice the "Update this resource" button and "Jump to..." dropdown menu go a bit wacky.

How can I get things working? Ideally, I would like to have the JS in <head> in the "Compose a text page" window, but I don't mind linking to an external JS file via my theme's header.html (which, by the way, I've tried to do, and the same break happens).
Attachment 2009-06-16_115457.png
Average of ratings: -
In reply to Steven A

Re: Tabbed Pages with Javascript

by Frank Ralf -
Hi Steven,

Do use your own JavaScript? I haven't tried it yet, but Moodle comes with YUI support (Development:YUI) so you should be able to use YUI's TabView feature (http://developer.yahoo.com/yui/tabview/). That might provide a more robust solution.

You might also have a look at the Tab Display plugin (http://moodle.org/mod/data/view.php?d=13&rid=1635&filter=1).

hth
Frank
Average of ratings:Useful (1)
In reply to Frank Ralf

Re: Tabbed Pages with Javascript

by Steven A -
Hi Frank,

Awesome! This is exactly what I was looking for. I've set things up exactly as before, but with YUI instead of my own homegrown JS, and everything works wonderfully now. Thanks! smile
Average of ratings: -
In reply to Steven A

Re: Tabbed Pages with Javascript

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Steven,

Why not simply compose all of your HTML pages, plus the necessary JS and CSS files (preferably external) in an external HTML editor, then upload everything to your moodle course files, then create a resource with a link to some index.html page (the first page of your uploaded contents pages), and there you go? This is what I routinely do for the contents pages of my moodle courses.

I find it much easier to compose HTML pages in an HTML editor (I use Macromedia Dreamweaver, but there are lots of editors available, either commercial or free).

Joseph

Average of ratings: -
In reply to Joseph Rézeau

Re: Tabbed Pages with Javascript

by Steven A -
Joseph,

Thanks for taking the time to offer advice. I've done things the way I've explained because I want all of the content that I deploy to be inside of the theme I'm using. Correct me if I wrong, but linking to an "index.html" file is going to go outside of the theme I'm using, i.e. users will be taken to just an HTML page.

The most elegant solution I've found is to compose everything in Dreamwaver then cut&paste it into "Compose a textpage..."

Here's what I've got:

<html>
<head> links to JS and CSS in the lib/yui folder</head>
<body> content </body>
</html>

Is there a way to link to an HTML file like this directly and still maintain the look of the theme complete with navbar, etc.?
Average of ratings: -
In reply to Steven A

Re: Tabbed Pages with Javascript

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Steven > "linking to an "index.html" file is going to go outside of the theme I'm using, i.e. users will be taken to just an HTML page."

Not sure what you mean by "going outside of the theme". Do you mean that you want uploaded HTML pages to remain inside the same window as your Moodle course? If so, then you just set your index.html page (let's call it introduction.html) to "keep navigation visible on the same page" (see attached screenshot). If your introduction.html page, composed in Dreamweaver, contains its own menu (side menu, tabs, links, etc.) then the student will be able to navigate from introduction.html to syllabus.html, gradingpolicy.html, etc. using your tabs, while remaining within your moodle course page all the time.

Joseph

Attachment image00.jpg
Average of ratings: -
In reply to Joseph Rézeau

Re: Tabbed Pages with Javascript

by Steven A -
>Not sure what you mean by "going outside of the theme". Do you mean that you
>want uploaded HTML pages to remain inside the same window as your Moodle course?

Yes, that's correct. It's difficult to explain these things sometimes. wink

I tried the method you're recommending (knowing what would happen), and unfortunately I don't believe it's ideal for what I'm trying to accomplish.

  1. No footer.
  2. I lose my theme's style. Extra linking required to get it back.
  3. Frames... Well, I won't say!
Sorry, Joseph, but I'm still not convinced that going with frames is the best alternative. Maybe there's something I'm not understanding? (always a concern wink)

Attachment 2009-06-20_213757.png
Average of ratings: -