Tabbed Pages with Javascript

Tabbed Pages with Javascript

de Steven A -
Número de respuestas: 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).
Adjunto 2009-06-16_115457.png
Promedio de valoraciones: -
En respuesta a Steven A

Re: Tabbed Pages with Javascript

de 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
Promedio de valoraciones:Useful (1)
En respuesta a Frank Ralf

Re: Tabbed Pages with Javascript

de 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! sonrisa
Promedio de valoraciones: -
En respuesta a Steven A

Re: Tabbed Pages with Javascript

de Joseph Rézeau -
Imagen de Core developers Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de Testers Imagen de 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

Promedio de valoraciones: -
En respuesta a Joseph Rézeau

Re: Tabbed Pages with Javascript

de 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.?
Promedio de valoraciones: -
En respuesta a Steven A

Re: Tabbed Pages with Javascript

de Joseph Rézeau -
Imagen de Core developers Imagen de Particularly helpful Moodlers Imagen de Plugin developers Imagen de Testers Imagen de 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

Adjunto image00.jpg
Promedio de valoraciones: -
En respuesta a Joseph Rézeau

Re: Tabbed Pages with Javascript

de 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. guiño

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 guiño)

Adjunto 2009-06-20_213757.png
Promedio de valoraciones: -