[jQuery] Re: Tabs, AJAX, and wanting to degrade safely
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] Re: Tabs, AJAX, and wanting to degrade safely
Ah, should have seen that in your original post. Yeah, you'll just have to duplicate the pages, having a normal page for standard links, and a 'content only' page for ajax calls. Not much else you can do without a server to build the html for you on the fly :-/ On Mar 25, 1:32 pm, zwaldowski [EMAIL PROTECTED] wrote: 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- Hide quoted text - - Show quoted text -
[jQuery] Re: Tabs, AJAX, and wanting to degrade safely
Hi, I have not understood your examples, but the classical approach with ajax, from a server side point of view, is to send the content of the page with header and footer if it is an http request and to send only the content if it is ajax. I think that you can detect an ajax call from the headers of the request, alternatively you can just add an ajax parameter to all your ajax calls and use it as a boolean on the serverside to decide what you have to sent, e.g, with or without header and footer. -Olivier zwaldowski 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] Re: Tabs, AJAX, and wanting to degrade safely
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
