Hello, and if this is incredibly stupid, please forgive me!
- I'm creating a play website for learning.
- I have one main page (all CSS, no tables, etc.)
- One left-hand <div> with menu options, and another right-hand <div> that will contain the contents of the "page" selected in the menu. The basic idea is to create a website that has zero refreshes, via Ajax. Each content page that appears in the right-hand <div> is in it's own PHP page.
So far, this works just fine. The problem(s) I'm running into came about when I created a <form>. The form appears just fine in the content <div>, however, I found that all of my form-specific CSS code in the content PHP file was ignored, dropped, whatever. When I moved this CSS code to the original page (index.php) everything worked as expected.
So, Question #1: Is there a way to nest CSS within the PHP file retrieved by Ajax? BTW, the PHP is some PHP and some HTML, etc., the <?PHP and ?> do not encompass all of the code in the file. Right now, it seems as if ALL of the CSS code must be available when the initial page is loaded. This doesn't seem right.
Keep in mind, all I want to accomplish is a complete site with no refreshes.
If this is not clear, I apologize. I'm happy to clear up anything that is fuzzy.
Anyone have any thoughts on organizing a site so that all of the CSS code does not need to be read in at the beginning for a "refreshless" site?
You can try the following:
1. get the updated content from the server via XHR
2. find all css tags like <link rel="stylesheet" type="text/css" href="mycss.css">
3. insert them into HEAD tag of your document if they do not exist
As i recall, that worked for sure in IE and FF. Not 100% sure regarding Opera, Safari, etc
If the simple solution won't work, then you can try loading the CSS files via XSR and create the actual stylesheets objects via DOM API
BTW, with such site you would face the "back button/bookmark" problem, which is a tough nut anyway...
Thanks for the input. I'll research the X** technologies and see how they fit my needs.
Also, I realize that this technique will produce forward/back issues, however, my concept is more of a web-application than a web site, and as such the idea of forward/back goes away (at least I think/hope so).
The CSS file is rather large and I feel that inline code, although necessary at times defeats the purpose of separating style and content.
What I'm looking for is a method to keep the styles separate from the content throughout an entire site. Perhaps an external CSS file for the site as a whole, and then a series of separate CSS files for each of the "pages" that are called in via AJAX.
It seems that browsers parse the CSS file at the beginning, and that makes sense. However, it also seems as if the browsers are not parsing the CSS files that are brought in as a result of an AJAX call.
Since I only have one "real" page read at the beginning, I suppose I could have all of my separate CSS files listed and parsed at the very beginning (not a horrible work-around), but this might make things quite slow at load time.
What I'm really looking for is a means of forcing the browser to parse a CSS file that is downloaded as a result of making an AJAX call.
As I said previously, I'm playing with this idea and looking for ideas to create a refresh-less site, akin to a web application rather than a group of pages.
Interesting idea rwedge. If I had an index.php page as a root with one <div> for menu options, and a second <div> for the contents of each of the menu options (where each menu option was an AJAX call to bring in a new page), how would I select and then use "alternative" style sheets if I needed one for each of the possible menu options?
As I said above, it seems that the style sheets are read in during the load of the original file (like index.php). Each ajax call brings in a new "page" into the content <div>, but I haven't been able to get the browser to refresh the style sheet.
Right now, I think I need to have all of my style sheets for the entire site/application when loading the initial page (index.php). The problem then becomes one of managing the namespace of the various elements, styles, etc. Of course these can be maintained by establishing naming rules, but a namespace would be helpful as well.
I'm a bit wordy, but how do you use/implement alternative style sheets?
Thanks again to everyone with their thoughts and ideas.