HansR Posted August 3, 2006 Share Posted August 3, 2006 Thank you for reading my question.Can a single .HTML file have the ability to call any one of several .CSS style sheets?I am attempting to create a calendar which will allow users to select the groups of content they wish to view using the .CSS visibility tag.I am able to create various styles which effectively controls which elements display. [b]all.css[/b]p.a {visibility: visible}p.b {visibility: visible}[b]groupa.css[/b]p.a {visibility: visible}p.b {visibility: hidden}[b]groupb.css[/b]p.a {visibility: hidden}p.b {visibility: visible} By calling a new style sheet, I can toggle the visibility of elements targeted to groups a or b from a single .HTML file. <p class="a">a info</p><p class="b">b info</p> This works adequately; depending on which style sheet is called, elements appear correctly. However, the only way I know to switch style sheets is by linking to a new .HTML page set to call a different style sheet. (Is there another way?) The problem is, by requiring a separate .HTML page for every group, this prevents updating the calendar from a single data source. (Using different .HTML files to call a single iframe will keep the data in a single file, but won't inherit the styles, loosing the visibility toggle.)How can I a: include an external data file which inherits styles or b: choose from multiple .CSS styles from within a single .HTML?Is there a better way to accomplish this? Is there a simple .ASP solution a "front-end only" person like me can implement?Thanks! Link to comment Share on other sites More sharing options...
Chandra.Vedantham@gmail.com Posted August 4, 2006 Share Posted August 4, 2006 Hi,You can change the stylesheet being used as given below: <!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title></title> <meta name="Author" content="Chandra Vedantham"> <meta name="Description" content="Html Page"> <link id="lnkSheet" href="Chandu.css" rel="stylesheet" /></head><body> Chandu <script> var lnkSheet = document.getElementById("lnkSheet"); lnkSheet.href = "style.css"; </script> Chandu</body></html> Tweak the javascript code given above to suit your requirement.Still need some further help, let me know. Link to comment Share on other sites More sharing options...
HansR Posted August 8, 2006 Author Share Posted August 8, 2006 Still need some further help, let me know.The code works, but I'm having trouble triggering it. I sent a PM with the details, thanks! Hans Link to comment Share on other sites More sharing options...
reportingsjr Posted August 9, 2006 Share Posted August 9, 2006 Its alot easier to use javascript alone to do it instead of making 5 different files for one thing. just do this: <script type="text/javascript" language="javascript">var a = document.getElementById("a");var b = document.getElementById("b");b.style.display = "block";a.style.display = "none";</script><p id="a">a info</p><p id="b">b info</p> Now a wont show and b will. if you want it to change when the user clicks it or something do this: <a href="java script:myvoid(0)" onclick="var a = document.getElementById('a');var b = document.getElementById('b');a.style.display = 'none';b.style.display = 'block';">hide a</a><a href="java script:myvoid(0)" onclick="var a = document.getElementById('a');var b = document.getElementById('b');b.style.display = 'none';a.style.display = 'block';">hide b</a><p id="a">a info</p><p id="b">b info</p> That should work Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now