StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery theme switcher for multiple stylesheets
primarykey
Id
7269202
data
AcceptedAnswerId
0
AnswerCount
4
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2011-09-01T10:45:07.103
FavoriteCount
0
LastActivityDate
2011-09-28T00:34:16.077
LastEditDate
2011-09-02T12:55:18.217
LastEditorUserId
795704
OwnerUserId
795704
ParentId
0
PostTypeId
1
Score
0
ViewCount
1571
LastEditorDisplayName
text
Body
<p>I would like to use this styleswitcher script (http://www.kelvinluck.com/assets/jquery/styleswitch/),but have it load 2 stylesheets at once. The objective is the user can select a font size and/or colour and/or screen width. Not sure if it's just a case of adding a function to handle more than one cookie?</p> <p>Here's what I have so far: (http://www.digitalkulture.com/example/)</p> <p>If anyone has an idea, I'd be grateful. Thank you.</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>  <link rel="stylesheet" type="text/css" href="styles/defaultTheme.css" /> <link rel="alternate stylesheet" type="text/css" href="styles/silverTheme.css" title="silverTheme" /> <link rel="alternate stylesheet" type="text/css" href="styles/purpleTheme.css" title="purpleTheme" /> <link rel="alternate stylesheet" type="text/css" href="styles/highvisTheme.css" title="highvisTheme" /> <link rel="alternate stylesheet" type="text/css" href="styles/wideScreen.css" title="wideScreen" /> <link rel="alternate stylesheet" type="text/css" href="styles/fullScreen.css" title="fullScreen" /> <link rel="alternate stylesheet" type="text/css" href="styles/bigText.css" title="bigText" />  <script type="text/javascript" src="js/jquery-1.6.1.js" /></script> <script type="text/javascript" src="js/styleswitcher.js" /></script> <script type="text/javascript"> // initialise plugins jQuery(function(){ var $sw_link = jQuery("a[title='themes_switch']"); jQuery(".dashTemplate a[title*=Theme]").click(function(){ jQuery(".dashTemplate a[title*=Theme]").removeClass("current"); jQuery(this).addClass("current"); }); jQuery(".dashTemplate a[title*=Screen]").click(function(){ jQuery(".dashTemplate a[title*=Screen]").removeClass("current"); jQuery(this).addClass("current"); }); jQuery(".dashTemplate a[title*=Text]").click(function(){ jQuery(".dashTemplate a[title*=Text]").removeClass("current"); jQuery(this).addClass("current"); }); jQuery(".dashTemplate a[title='defaultTheme']").addClass("defaultTheme").click(function(){ setActiveStyleSheet('defaultTheme'); return false; }); jQuery(".dashTemplate a[title='silverTheme']").addClass("silverTheme").click(function(){ setActiveStyleSheet('silverTheme'); return false; }); jQuery(".dashTemplate a[title='purpleTheme']").addClass("purpleTheme").click(function(){ setActiveStyleSheet('purpleTheme'); return false; }); jQuery(".dashTemplate a[title='highvisTheme']").addClass("highvisTheme").click(function(){ setActiveStyleSheet('highvisTheme'); return false; }); jQuery(".dashTemplate a[title='wideScreen']").addClass("wideScreen").click(function(){ setActiveStyleSheet('wideScreen'); return false; }); jQuery(".dashTemplate a[title='fullScreen']").addClass("fullScreen").click(function(){ setActiveStyleSheet('fullScreen'); return false; }); jQuery(".dashTemplate a[title='bigText']").addClass("bigText").click(function(){ setActiveStyleSheet('bigText'); return false; }); }); </script> </head> <body> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus, purus non ultrices convallis, leo massa porta erat, et gravida magna quam at ante. Vivamus vitae sem lectus. Aliquam augue tortor, tincidunt vitae tempus ac, porta eu sem. Mauris laoreet erat vitae metus venenatis ac lacinia lorem ultricies. </div>  <ul class="dashTemplate"> <li><a class="defaultTheme" title="defaultTheme" href="#">reset color</a> | <li><a class="silverTheme" title="silverTheme" href="#">silver color</a> | <li><a class="purpleTheme" title="purpleTheme" href="#">purple color</a> | <li><a class="highvisTheme" title="highvisTheme" href="#">yellow color</a></li> </ul> <ul class="dashTemplate"> <li><a class="wideScreen" title="wideScreen" href="#">wide screen</a> | <li><a class="fullScreen" title="fullScreen" href="#">full screen</a> | <li><a class="defaultTheme" title="defaultTheme" href="#">reset</a></li> </ul> <ul class="dashTemplate"> <li><a class="bigText" title="bigText" href="#">big text</a> | <li><a class="defaultTheme" title="defaultTheme" href="#">reset</a></li> </ul> </body> </html> </code></pre> <p>The styleswitcher.js file</p> <pre><code>function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } function getActiveStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); } return null; } function getPreferredStyleSheet() { var i, a; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title") ) return a.getAttribute("title"); } return null; } function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } window.onload = function(e) { var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); } window.onunload = function(e) { var title = getActiveStyleSheet(); createCookie("style", title, 365); } var cookie = readCookie("style"); var title = cookie ? cookie : getPreferredStyleSheet(); setActiveStyleSheet(title); </code></pre>
Tags
<jquery><css><switchers>
Title
jQuery theme switcher for multiple stylesheets
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USPaulW
UserOwnerUserId
1. USPaulW
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
3. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. COso, you are wanting to apply 2 stylesheets at once? or are you just wanting to cache the last used?
  singulars
  PostPostId
  POjQuery theme switcher for multiple stylesheets
  UserUserId
  USjyore
2. COHi jyore, yep trying to apply 2 stylesheets at once.
  singulars
  PostPostId
  POjQuery theme switcher for multiple stylesheets
  UserUserId
  USPaulW

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.