{"id":2903,"date":"2005-09-12T09:17:00","date_gmt":"2005-09-12T09:17:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/heaths\/2005\/09\/12\/blog-customizations\/"},"modified":"2005-09-12T09:17:00","modified_gmt":"2005-09-12T09:17:00","slug":"blog-customizations","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/setup\/blog-customizations\/","title":{"rendered":"Blog Customizations"},"content":{"rendered":"

In my seemingly never-ending quest to provide a simple, compact, yet stylish design for this blog I have recently made a customization based on what Josh Ledgard<\/a> did sometime back to make collapsible panels, though I wanted something more easily reusable. I whipped together an ECMAScript — that is, ECMA-compliant JScript and JavaScript — class as you can see below:<\/p>\n

function<\/font> CollapsiblePanel(elem) {\n  if<\/font> (!elem) {\n    return null<\/font>;\n  }\n  \/\/ Close 'this'.<\/font>\n  var<\/font> self = this<\/font>;\n  this<\/font>.toggle = function<\/font>() {\n    if<\/font> (self.sibling.style.display == \"none\") {\n      self.elem.innerHTML = self.collapseHTML + self.title;\n      self.sibling.style.display = \"block\";\n    } else<\/font> {\n      self.elem.innerHTML = self.expandHTML + self.title;\n      self.sibling.style.display = \"none\";\n    }\n  }\n  this<\/font>.elem = elem;\n  this<\/font>.title = elem.innerHTML;\n  this<\/font>.expandHTML = '<img src=\"expand.gif\" width=\"9\" height=\"9\">&nbsp;';\n  this<\/font>.collapseHTML = '<img src=\"collapse.gif\" width=\"9\" height=\"9\">&nbsp;';\n  this<\/font>.elem.style.cursor = \"pointer\";\n  this<\/font>.sibling = elem.nextSibling;\n  if<\/font> (this<\/font>.sibling.nodeType == 3) {\n    \/\/ Get second sibling if text node is next.<\/font>\n    this<\/font>.sibling = this<\/font>.sibling.nextSibling;\n  }\n  elem.onclick = this<\/font>.toggle;\n  this<\/font>.toggle();\n}<\/pre>\n
Since I’m defining an event handler to handle toggling the CSS display<\/code> attribute, I need to create a closure around the class instance, which is why the private variable self<\/code> is defined. Had I used this<\/code> in the event handler, when the onclick<\/code> event was fired this<\/code> would refer to the item that was clicked – the H3 element.<\/p>\n
To create the CollapsiblePanel<\/code> instances, I needed to handle the window.onload<\/code> event. Since the only place .Text<\/a> or Community Server<\/a> lets us add our own script is in the News section, several headers are not parsed and displayed until after the script is processed synchronously:<\/p>\n
window.onload = function<\/font>() {\n  \/\/ Enumerate headers after document is loaded.<\/font>\n  var<\/font> i, h3s = document.body.getElementsByTagName(\"h3\");\n  for<\/font> (i = 0; i < h3s.length; i++) {\n    var<\/font> elem = h3s.item(i);\n    if<\/font> (elem.innerHTML == \"Archives\" ||\n        elem.innerHTML == \"Common Tasks\" ||\n        elem.innerHTML == \"Navigation\") {\n      new<\/font> CollapsiblePanel(elem);\n    }\n  }\n}<\/pre>\n
Since Josh’s blog gave me the idea to collapse a few of the longer or less interesting panels, I shared the code with him that you can find on his blog now, too. Feel free to use it yourself. You can easily customize the view by changing the expandHTML<\/code> and collapseHTML<\/code> public fields, though you’re free to change anything. Please keep in mind that this is not Microsoft-supported code, but if you have questions feel free to ask on this particular blog.<\/p>\n
When a get I little time I will create a cookie collection class to hold state for each individual CollapsiblePanel<\/code> so that your preference for what is and is not displayed is persisted across pages.<\/p>\n","protected":false},"excerpt":{"rendered":"
In my seemingly never-ending quest to provide a simple, compact, yet stylish design for this blog I have recently made a customization based on what Josh Ledgard did sometime back to make collapsible panels, though I wanted something more easily reusable. I whipped together an ECMAScript — that is, ECMA-compliant JScript and JavaScript — class as […]<\/p>\n","protected":false},"author":389,"featured_media":3843,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[11,14,29,34],"class_list":["post-2903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-customizations","tag-development","tag-personal","tag-script"],"acf":[],"blog_post_summary":"
In my seemingly never-ending quest to provide a simple, compact, yet stylish design for this blog I have recently made a customization based on what Josh Ledgard did sometime back to make collapsible panels, though I wanted something more easily reusable. I whipped together an ECMAScript — that is, ECMA-compliant JScript and JavaScript — class as […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts\/2903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/users\/389"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/comments?post=2903"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/posts\/2903\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/media\/3843"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/media?parent=2903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/categories?post=2903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/setup\/wp-json\/wp\/v2\/tags?post=2903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}