{"id":481,"date":"2015-05-30T08:38:51","date_gmt":"2015-05-30T12:38:51","guid":{"rendered":"http:\/\/www.bemdesign.com\/wordpress\/?p=481"},"modified":"2015-05-30T08:38:51","modified_gmt":"2015-05-30T12:38:51","slug":"css-classes-based-on-page-location","status":"publish","type":"post","link":"https:\/\/www.bemdesign.com\/wordpress\/2015\/05\/30\/css-classes-based-on-page-location\/","title":{"rendered":"CSS classes based on page location"},"content":{"rendered":"<p>When styling SharePoint sites, it can be very useful to add specific styles to specific &#8220;pages&#8221; or views. Here&#8217;s a bit of jQuery\/javascript code to make that possible. It works by grabbing the page location turning it into classes that are added to the body tag.<\/p>\n<p><code><br \/>\njQuery(document).ready(function($){<br \/>\n\/\/use a javascript variable to hold the results of jQuery's \"find the body tag\" call<br \/>\n\t\t\tvar $body = $('body');<br \/>\n\/\/use a variable to capture and store the page url, also removing the 'http(s):\/\/'<br \/>\n\t\t\tvar url = window.location.href.replace(\/http[s]?:\\\/\\\/\/, '');<br \/>\n\/\/replace any .html, .asp(x), .php or .jsp file extensions<br \/>\n\t\t\turl = url.replace(\/\\.(htm[l]?|asp[x]?|php|jsp)$\/,'');<br \/>\n\/\/replace any '.' with '_' - ie. 'example.com' will become 'example_com'<br \/>\n\t\t\turl = url.replace(\/[.]\/g, \"_\");<br \/>\n\/\/Wherever there is a '\/', split url into a segment<br \/>\n\t\t\tvar segments = url.split('\/');<br \/>\n\/\/Take these segments and add them as classes to the body<br \/>\n\t\t\tfor (var i = 0; i < segments.length; i++) {\n\t\t\t    $body.addClass(segments[i]);\n\t\t\t}\n});\n<\/code><\/p>\n<p>For servers that prefer case sensitivity but allow either case to work (like SharePoint), and where that may cause unwanted headaches you can replace the line where we first define 'var url' with this:<br \/>\n<code><br \/>\nvar url = window.location.href.toLowerCase().replace(\/http[s]?:\\\/\\\/\/, '');<br \/>\n<\/code> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>When styling SharePoint sites, it can be very useful to add specific styles to specific &#8220;pages&#8221; or views. Here&#8217;s a bit of jQuery\/javascript code to make that possible. It works by grabbing the page location turning it into classes that are added to the body tag. jQuery(document).ready(function($){ \/\/use a javascript variable to hold the results [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,8],"tags":[31,37,35,36],"class_list":["post-481","post","type-post","status-publish","format-standard","hentry","category-design","category-technology","tag-code","tag-css","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/comments?post=481"}],"version-history":[{"count":5,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/481\/revisions"}],"predecessor-version":[{"id":486,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/posts\/481\/revisions\/486"}],"wp:attachment":[{"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/media?parent=481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/categories?post=481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bemdesign.com\/wordpress\/wp-json\/wp\/v2\/tags?post=481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}