Alternate stylesheets with Master pages and content : The Official Microsoft ASP.NET Forums

Reply

rajthomson

Member

1 Points

Alternate stylesheets with Master pages and content

Jun 18, 2007 02:45 PM|LINK

Greetings! I am trying to provide a way to the user to increase the font size for our portal site. The site uses Master pages so I put the link tags in the master page and in the content page I added a simple drop-down list with the list of the stylesheets available. I added this javascript code to the content page to change the stylesheet:

<link rel="stylesheet" type="text/css" media="screen" title="style-default" href="style-default.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="style-a" href="style-a.css">
<link rel="alternate stylesheet" type="text/css" media="screen" title="style-b" href="style-b.css">

<script language="javascript" type="text/javascript">

function makeCookie(Name,Value,Expiry,Path,Domain,Secure){
if (Expiry!= null) {
var datenow = new Date();
datenow.setTime(datenow.getTime() + Math.round(86400000*Expiry));
Expiry = datenow.toGMTString();
}

Expiry = (Expiry!= null)? '; expires='+Expiry : '';
Path = (Path!= null)?'; path='+Path:'';
Domain = (Domain!= null)? '; domain='+Domain : '';
Secure = (Secure!= null)? '; secure' : '';

document.cookie = Name + '=' + escape(Value) + Expiry + Path + Domain + Secure;
}

function readCookie(Name) {
var cookies = document.cookie;
if (cookies.indexOf(Name + '=') == -1) return null;
var start = cookies.indexOf(Name + '=') + (Name.length + 1);
var finish = cookies.substring(start,cookies.length);
finish = (finish.indexOf(';') == -1)? cookies.length : start + finish.indexOf(';');
return unescape(cookies.substring(start,finish));
}

function setActivestylesheet(pTitle) {
var vLoop, vLink;
for(vLoop=0; (vLink = document.getElementsByTagName("link")[vLoop]); vLoop++) {
if(vLink.getAttribute("rel").indexOf("style")!= -1 && vLink.getAttribute("title")) {
vLink.disabled = true;
if(vLink.getAttribute("title") == pTitle) vLink.disabled = false;
}
}
}

function selectStyle (vCookieName, vSelection) {
//WRITE COOKIE
makeCookie(vCookieName, vSelection, 90, '/');
//ACTIVE SELECTED ALTERNAT STYLE SHEET
setActivestylesheet(vSelection)
}

if (document.cookie.indexOf('style=')!=-1) {
css = readCookie('layout');
//ACTIVATE SELECTED STYLE SHEET
setActivestylesheet(css)
}

</script>

I call this from the code as in:

<select class="select2" style="width:165px" onchange="var v=this.options[this.selectedIndex].value; if (v!= '') selectStyle('style', v);">
<option value="">-- Select Style --</option>
<option value="style-a">Style A</option>
<option value="style-b">Style B</option>
</select>

When I debug the code, I can see that the value of the stylesheet has changed but the text doesn't change. I tried to track it using the IE developer toolbar and FireBug but couldn't find much. Can someone throw some light on what I could do to make this work? In essence the functionality is to give the visually impaired to see the text in larger font if they want to.

Thank you for your time.

Regards, Kumar