SHow/Hide a HTML 'Div' on Presence/Absence of CSS.

[RDQuery]

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:26 pm (utc) on Dec. 18, 2008]
[edit reason] disabled smileys [/edit]

[alt131]

Hi RDQuery,
and welcome to webmasterworld ;)

I am puzzled by this (plus the post in the JavaScript forum) because I am unsure why the display of the div is conditional on the presence/changes to the css. That's because sites are usually coded from the perspective of the user - not the css file, so the issue of how best to display/hide content is usually approached on the basis of when the content should be visible/hidden.

Similarly, why this is premised on the use of javascript and the existence/non-existence of the css file. In most cases javascript is not required to access css, and a solution dependent on the availability of a file is a maintenance issue most people try to avoid.

Can you clarify a little more?

[RDQuery]

Hello,
I need to have the content visible/hidden based on the presence/absence of CSS.For e.g normally the DIv will not be visible , but as soon as the new CSS is placed in the folder the Div should appear.This is because we have a lot of sites and all use the same CSS file , so we do not want to touch the main CSS file.For one particular page of all the site we will do the code change that on presence of a new css (e.g. box.css) show the Div, else do not show it.
We are ready to take the maintainance issue for this.Please suggest any solutions.

[eelixduppy]

Please keep discussion in one place: [webmasterworld.com...]