Tabbed Pages with Javascript

Tabbed Pages with Javascript

ໂດຍ Steven A -
ຈຳນວນການຕອບກັບ: 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).
ເອກະສານຊ້ອນທ້າຍ 2009-06-16_115457.png
ການຈັດອັນດັບສະເລ່ຍ: -
ໃນການຕອບກັບຫາ Steven A

Re: Tabbed Pages with Javascript

ໂດຍ 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
ການຈັດອັນດັບສະເລ່ຍ:Useful (1)
ໃນການຕອບກັບຫາ Frank Ralf

Re: Tabbed Pages with Javascript

ໂດຍ 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! ຍິ້ມ
ການຈັດອັນດັບສະເລ່ຍ: -
ໃນການຕອບກັບຫາ Steven A

Re: Tabbed Pages with Javascript

ໂດຍ Joseph Rézeau -
ຮູບພາບຂອງ Core developers ຮູບພາບຂອງ Particularly helpful Moodlers ຮູບພາບຂອງ Plugin developers ຮູບພາບຂອງ Testers ຮູບພາບຂອງ 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

ການຈັດອັນດັບສະເລ່ຍ: -
ໃນການຕອບກັບຫາ Joseph Rézeau

Re: Tabbed Pages with Javascript

ໂດຍ 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.?
ການຈັດອັນດັບສະເລ່ຍ: -
ໃນການຕອບກັບຫາ Steven A

Re: Tabbed Pages with Javascript

ໂດຍ Joseph Rézeau -
ຮູບພາບຂອງ Core developers ຮູບພາບຂອງ Particularly helpful Moodlers ຮູບພາບຂອງ Plugin developers ຮູບພາບຂອງ Testers ຮູບພາບຂອງ 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

ເອກະສານຊ້ອນທ້າຍ image00.jpg
ການຈັດອັນດັບສະເລ່ຍ: -
ໃນການຕອບກັບຫາ Joseph Rézeau

Re: Tabbed Pages with Javascript

ໂດຍ 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. ກະພິບຕາ

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 ກະພິບຕາ)

ເອກະສານຊ້ອນທ້າຍ 2009-06-20_213757.png
ການຈັດອັນດັບສະເລ່ຍ: -