[jQuery] Re: Tabs, AJAX, and wanting to degrade safely

2008-03-25 Thread zwaldowski

This website is essentially for a contest.  I'm working with a couple
of friends on a historical competition.  The genius historians that
run the competetion's website division think they're next-gen by
requiring you to put an HTML site on a CD.  So, no.  :-D

On Mar 24, 3:57 pm, Hamish Campbell [EMAIL PROTECTED] wrote:
  However, taking this approach
  would have multiple headers and
  footers.  How should I go about this?

 If you're using plain HTML then yes, you'll need to duplicate the
 header/footer data in the fall back pages.

 Do you have a database and/or server-side scripting language at your
 disposal?

 On Mar 25, 7:15 am, zwaldowski [EMAIL PROTECTED] wrote:

  I currently use the jQuery tabs plugin for displaying a static website
  I am working on.  Since it's small, I initially just put the four
  pages together on one page and let the tabs plugin do its work as
  scheduled.  Now, it's getting bigger and loading more and more,
  therefore making the whole experience slower to load.  I already know
  that the tabs plugin can load external pages via AJAX, which just
  loads the pages from regular anchor links within the tabs.

  So, here's my problem.  To have the pages external, I would pretty
  much just cut-and-paste the contents of that tab into a new HTML file
  and have it load externally.  But how should I have it degrade?
  Having JS disabled is a distinct possibility with this website
  (running off a CD + MSIE), so I should ideally have the pages link to
  each other with identical headers/footers as the website originally
  was.  However, taking this approach would have multiple headers and
  footers.  How should I go about this?

  For a more visual approach, check out the following:

  Old Site:
  |__ index.html
  |__ page1.html
  |__ page2.html
  |__ page3.html
  |__ page4.html

  All five pages have duplicated headers and footers, save for the tab
  bar which has static selected classes.  They link to each of the
  other four pages.

  New Site:  (Bulgy, slow)
  |__ index.html
  -|-- Header
  -|-- Tabs
  -|-- Contents of home
  -|-- Contents of page 1 (hidden by JS on default)
  -|-- Contents of page 2 (hidden by JS on default)
  -|-- Contents of page 3 (hidden by JS on default)
  -|-- Contents of page 4 (hidden by JS on default)
  -|-- Footer

  New ideas:  (Fast, speedy, and good-looking)
  |__ index.html
  -|-- Header
  -|-- Tabs, links to pages
  -|-- Contents of home
  -|-- DIV container, loads others
   |__ page1.html
   |__ page2.html
   |__ page3.html
   |__ page4.html
  -|-- Footer


[jQuery] Tabs, AJAX, and wanting to degrade safely

2008-03-24 Thread zwaldowski

I currently use the jQuery tabs plugin for displaying a static website
I am working on.  Since it's small, I initially just put the four
pages together on one page and let the tabs plugin do its work as
scheduled.  Now, it's getting bigger and loading more and more,
therefore making the whole experience slower to load.  I already know
that the tabs plugin can load external pages via AJAX, which just
loads the pages from regular anchor links within the tabs.

So, here's my problem.  To have the pages external, I would pretty
much just cut-and-paste the contents of that tab into a new HTML file
and have it load externally.  But how should I have it degrade?
Having JS disabled is a distinct possibility with this website
(running off a CD + MSIE), so I should ideally have the pages link to
each other with identical headers/footers as the website originally
was.  However, taking this approach would have multiple headers and
footers.  How should I go about this?

For a more visual approach, check out the following:

Old Site:
|__ index.html
|__ page1.html
|__ page2.html
|__ page3.html
|__ page4.html

All five pages have duplicated headers and footers, save for the tab
bar which has static selected classes.  They link to each of the
other four pages.

New Site:  (Bulgy, slow)
|__ index.html
-|-- Header
-|-- Tabs
-|-- Contents of home
-|-- Contents of page 1 (hidden by JS on default)
-|-- Contents of page 2 (hidden by JS on default)
-|-- Contents of page 3 (hidden by JS on default)
-|-- Contents of page 4 (hidden by JS on default)
-|-- Footer

New ideas:  (Fast, speedy, and good-looking)
|__ index.html
-|-- Header
-|-- Tabs, links to pages
-|-- Contents of home
-|-- DIV container, loads others
 |__ page1.html
 |__ page2.html
 |__ page3.html
 |__ page4.html
-|-- Footer