Javascript function to detect stylesheet being used?

[Bravogolf]

Over at

http://www.eye-floaters.com/floaters-talkingtoadoctor.php

I have a page on which the user can change the stylesheet to be a dark style or light style.

On that page, as you can see, are two Google AdSense units but, since Google does not allow customisation of the ad units with CSS, I have to create two seperate ad units. One for the dark layout and one the light layout. Therefore, I need to create a javascript function that essentially says if(style=main-default.css) then show this ad else show the dark ad.

Is there a cleancut JS function that does that (check which style sheet is in use)?

My two stylesheets are being declared as:

<style type="text/css" media="all">@import url(css/main-changes.css);</style>
<style type="text/css" media="screen, projection">@import url(css/main-default.css);</style>

Am using IOTBS: Look Who's Switching Too to switch style sheets. I imagine I could insert a variable and detect that but I don't know the code well enough

 

[BillyRayPreachersSon]

While I'm not wishing to put down the IOTBS swithcing solution, it really is considerably more bloated than it needs to be to do the job in hand.

You can do it in a few lines of easy-to-understand JS, which would allow you to put your Google ad swithcing code in the switcher function. Take a look here:

http://www.alistapart.com/stories/alternate/

Althgouh even that's a whole lot more bloated than it needs to be (unless you want the cookie saving routine). If you don't, consider something like this:

Put your regular 'normal' CSS in your head:

<link rel="stylesheet" href="css/whatever.css" type="text/css" media="all" />

then put an override style sheet:

<link rel="alternate stylesheet" href="css/colourOverrideDarker.css" type="text/css" title="Darker colour scheme" media="all" />

Then all you need to do is have some JS to switch the alternate one(s) on or off... something like this:

function setColourScheme(schemeTitle) {
	var styles = document.getElementsByTagName('link');

	for (var loop=0, max=styles.length; loop<max; loop++) {
		var linkEl = styles[loop];
		if (linkEl.getAttribute('rel').indexOf('alternate stylesheet') != -1 && linkEl.getAttribute('title')) {
			linkEl.disabled = true;
			if (linkEl.getAttribute('title') == schemeTitle) linkEl.disabled = false;
		}
	}
}

which you would call with something like this:

<a href="#" onclick="setColourScheme(''); return(false);">Normal colour scheme</a>
<a href="#" onclick="setColourScheme('Darker colour scheme'); return(false);">Darker colour scheme</a>

Then in the setColourScheme, you can simply test for the "schemeTitle" parameter being one thing or another, and set your Google ads accordingly.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Bravogolf]

Thank you, BillyRayPreachersSon, for your help and detailed response. I like the IOTBS function myself but agree it does use up a lot of code! I'd rather not truncate it now after investing so much work into it and I don't imagine anytime soon I'll have the time to make that degree of code change and test it!

For now, I had hoped there would be a relatively simple workaround to determining what stylesheet is in use and then run a function (function being to display the type of ad that suits the stylsheet in use). Is that possible?