Show/Hide a HTML 'Div' on Presence/Absence of CSS using javascript.

[RDQuery]

Hello,
I need to Show/Hide a ‘box/Div’ in HTML based on changes in CSS.
My Current implementation is as follows:
HTML code snippet for the Div:
<div id=" cntDivAlertBox">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>< Concerned about your Future?</td></tr>

Main CSS for the Div:

.cntDivAlertBox
{
/*display:none */
}

As per my implementation, the Div would appear or disappear , if I commented/uncommented the ‘display:none’ property.
I had added this CSS class ‘cntDivAlertBox’ in my main CSS that is referenced by all the other pages in my site.

Change in requirement:
As per a change in requirement, the client does not want to touch the main CSS for the ‘DIv’ to appear/disappear.
They want the main CSS to call another CSS,e.g box.css.
When the box.css is present in the required location then the ‘Div’ will appear on the page else the Div will not be present on the page.

I have tried doing this by using AlternateCSS and Javascript, but how will the Javascript get called at page load to use the alternate CSS,if it exists?
My Javascript is:
--In the head
<link rel="alternate stylesheet" href="css/box.css" type="text/css" title="wacky"/>
<link href="css/main.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" language="javascript">
strFileName = "css/box.css"
var fso = new ActiveXObject("Scripting.FileSystemObject");
if fso.FileExists(server.mapPath(strFileName));
document.write('<link href="'+css/box.css+'" type="text/css" rel="stylesheet">);
</SCRIPT>

I am really not sure how to do this.Please help me with any ideas.

[edited by: eelixduppy at 8:25 pm (utc) on Dec. 18, 2008]
[edit reason] disabled smileys [/edit]

[daveVk]

One approach is to define 2 classes
.cntDivAlertBox1{ display:none }
.cntDivAlertBox2{ }

and have the javascript change all class=cntDivAlertBox1 to cntDivAlertBox2 or vis versa

Not sure if that answers your question ?

[RDQuery]

Hello,
I think the javascript I will write for this would be something like this:It will check if the new CSS file(box.css) exists then use that CSS, else use the main css (main.css)

<script type="text/javascript" language="javascript">
strFileName = "css/box.css"
var fso = new ActiveXObject("Scripting.FileSystemObject");
if fso.FileExists(server.mapPath(strFileName));
document.write('<link href="'+css/box.css+'" type="text/css" rel="stylesheet">);
</SCRIPT>

Please let me know how to run this javascript automatically on page load.

[edited by: eelixduppy at 8:22 pm (utc) on Dec. 18, 2008]
[edit reason] disabled smileys [/edit]

[alt131]

This thread re-directed from the css forum by an admin:

RDQuery, I did understand you want the div to display when the css is available. Also that you do not want to modify the main css. The confusion (for me) is that the question (how to show/hide a div), plus the goal (don't use main.css, but use it to import another style sheet) are different from what you're asking for help on (implement this by parsing the site, then writing a <link> via javascript).

Find help for parsing for files in the forum specific to the programming language you intend to use, then assistance from the javascript guru's here to write the link using javascript. But on the provided code, am wondering if you're trying these complicated implementations because your link and css didn't work. If so, here's one option (there are others). Both css files can be uploaded with no more work required.

In the document head of the document(page) that needs box.css so the div displays, link to your main stylesheet as usual:

<link href="main.css" rel="stylesheet" type="text/css" media="screen" />

But note no title - that designates the sheet "preferred" and other sheets are ignored.

Immediately after (not before as your example), link to box.css:

<link href="box.css" rel="stylesheet" type="text/css" media="screen" />

Note do not use rel="alternate stylesheet" - it is used when users have the option of choosing a different style and a sheet with that rel will be ignored unless they do.

In main.css you already have

.cntDivAlertBox {
/*display:none */
}

Unquote it so the div will be hidden for all pages.

In box.css write

.cntDivAlertBox {
display:block /* The cascade means this will "undo" display:none in main.css so the div is displayed */
... /*continue with other styles for the div*/
}

This means the div will display on the pages that have both links.

If you want to display for printing only, change the link for box.css link to:

<link href="box.css" rel="stylesheet" type="text/css" media="print" />

Importing ("calling") box.css into main.css as the client specified won't work: A valid import must appear at the top of the sheet. Cascade/inheritance means box.css would be imported, but display:block over-written by the display:none later on in main.css. That would make the last rule display:none - so the div would never show.

Does this help clarify options for what you are trying to do?

[RDQuery]

Thanks a lot.
I added the Styles for the box in the new CSS and Placed the code for calling the CSS after the line of code that calls the main CSS, and my issue is resolved.
<link href="box.css" rel="stylesheet" type="text/css" media="screen" />

Thanks for understanding the issue and providing the resolution.

Regards,