{"id":6348,"date":"2014-09-19T11:12:13","date_gmt":"2014-09-19T19:12:13","guid":{"rendered":"http:\/\/www.nicolatrwst.com\/testnicola\/?page_id=6348"},"modified":"2016-12-26T09:20:30","modified_gmt":"2016-12-26T17:20:30","slug":"test-4","status":"publish","type":"page","link":"https:\/\/www.nicolatrwst.com\/testnicola\/test-4\/","title":{"rendered":"Exclusive checkboxes"},"content":{"rendered":"<style>\n.sub-area {margin:10px 0 20px 30px;}\n.title {font-weight:bold;}\n.main-area {padding-top:10px;border-top:1px dotted black;}\n.warning {color:red;font-weight:bold;display:none;}\n<\/style>\n<p><b>Mockup for the Customizer layout that has the 3 options grouped under each area<\/b><br \/>\n<br \/> It illustrates the mutually exclusive aspect of the options<br \/>\n<br \/> If Main area Expand is checked, none of the sub area options should be used, a warning and visual clue is made<br \/>\n<br \/> If a sub area option is checked while the Main area Expand is, it will uncheck the main area Expand option.<br \/>\n<br \/> If Sub areas options have been checked and the user checks the Main area Expand, it will uncheck the Sub area options and show the warning<br \/>\n<br \/> Finally only one of the three modes (Expand\/Extend BG\/Extend Col) can be checked at once for any given area. Checking a second one will uncheck the previous one<br \/>\n<\/p>\n<div class=\"fullwidth-areas\">\n<div id=\"header-options\" class=\"main-area\"><span class=\"title\">Header Area:<\/span><\/p>\n<div class=\"main-checkboxes\">\n\t\tExpand content: <input id=\"Expand-ha\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\tExtend BG Attributes: <input id=\"ExtendBG-ha\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\tExtend BG Color: <input id=\"ExtendBgCol-ha\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t<\/div>\n<div class=\"sub-area-container\"><span class=\"warning\">Expanding the Header area above also Expands all sub Areas!<br \/>\n\t\t<br \/>Uncheck the &#8220;Expand content&#8221; checkbox to set them individually.<\/span><\/p>\n<div class=\"sub-area\"><span class=\"title\">Header Widget Area:<\/span><\/p>\n<div class=\"checkboxes\">\n\t\t\t\tExpand content: <input id=\"Expand-hwa\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\t\t\tExtend BG Attributes: <input id=\"ExtendBG-hwa\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\t\t\tExtend BG Color: <input id=\"ExtendBgCol-hwa\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t\t\t<\/div>\n<\/p><\/div>\n<div class=\"sub-area\"><span class=\"title\">Header Image:<\/span><\/p>\n<div class=\"checkboxes\">\n\t\t\t\tExpand content: <input id=\"Expand-hi\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\t\t\tExtend BG Attributes: <input id=\"ExtendBG-hi\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\t\t\tExtend BG Color: <input id=\"ExtendBgCol-hi\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t\t\t<\/div>\n<\/p><\/div>\n<div class=\"sub-area\"><span class=\"title\">Branding:<\/span><\/p>\n<div class=\"checkboxes\">\n\t\t\t\tExpand content: <input id=\"Expand-br\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\t\t\tExtend BG Attributes: <input id=\"ExtendBG-br\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\t\t\tExtend BG Color: <input id=\"ExtendBgCol-br\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t\t\t<\/div>\n<\/p><\/div>\n<div class=\"sub-area\"><span class=\"title\">Header HTML:<\/span><\/p>\n<div class=\"checkboxes\">\n\t\t\t\tExpand content: <input id=\"Expandh-ht\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\t\t\tExtend BG Attributes: <input id=\"ExtendBG-ht\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\t\t\tExtend BG Color: <input id=\"ExtendBgCol-ht\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div id=\"footer-options\" class=\"main-area\"><span class=\"title\">Footer Area:<\/span><\/p>\n<div class=\"main-checkboxes\">\n\t\tExpand content: <input id=\"Expand-fa\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\tExtend BG Attributes: <input id=\"ExtendBG-fa\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\tExtend BG Color: <input id=\"ExtendBgCol-fa\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t<\/div>\n<div class=\"sub-area-container\"><span class=\"warning\">Expanding the Footer area above also Expands all sub Areas!<br \/>\n\t\t<br \/>Uncheck the &#8220;Expand content&#8221; checkbox to set them individually.<\/span><\/p>\n<div class=\"sub-area\"><span class=\"title\">Footer Widget Area:<\/span><\/p>\n<div class=\"checkboxes\">\n\t\t\tExpand content: <input id=\"Expand-fwa\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\t\tExtend BG Attributes: <input id=\"ExtendBG-fwa\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\t\tExtend BG Color: <input id=\"ExtendBgCol-fwa\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t\t<\/div>\n<\/p><\/div>\n<div class=\"sub-area\"><span class=\"title\">Footer HTML:<\/span><\/p>\n<div class=\"checkboxes\">\n\t\t\tExpand content: <input id=\"Expand-fh\" class=\"checkbox\" name=\"chkExpand\" type=\"checkbox\" value=\"Expand\"><br \/>\n\t\t\tExtend BG Attributes: <input id=\"ExtendBG-fh\" class=\"checkbox\" name=\"chkExtendBg\" type=\"checkbox\" value=\"ExtendBG\"><br \/>\n\t\t\tExtend BG Color: <input id=\"ExtendBgCol-fh\" class=\"checkbox\" name=\"chkExtendBgCol\" type=\"checkbox\" value=\"ExtendBgCol\">\n\t\t\t<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br \/>\n<script type=\"text\/javascript\" language=\"javascript\">\n\/\/Sub Area deactivation when main area is expanded\n\/\/If checking a main area checkbox clear sub areas checkboxes\n\/\/Monitoring state of main area expand\njQuery('.main-checkboxes input').click(function () { \n\tvar areaId = jQuery(this).parents().eq(1).attr('id');\n\tif(jQuery(this).parent().children('input[name*=\"chkExpand\"]').attr('checked')) {\n\/\/Display warning grey sub area\n\tjQuery('#' + areaId + ' .warning').css('display', 'block');\n\tjQuery('#' + areaId + ' .sub-area-container').css('background-color', 'lightgrey');\n\/\/go up to the main area level, then down to each Sub Area\n\t\tjQuery(this).parents().eq(1).children('.sub-area-container').children('.sub-area').each(function () {\n\t\/\/unCheck each option in each sub area\n\t\t\tjQuery(this).children().children('.checkbox:checked').each(function () {\n\t\t\t\t  jQuery(this).attr('checked', false);\n\t\t\t});\n\t\t});\n\t} else {  \/\/if just unchecking the expand option, remove warning\n\t\tjQuery('#' + areaId + ' .warning').css('display', 'none');\t\n\t\tjQuery('#' + areaId + ' .sub-area-container').css('background-color', 'transparent');\n\t};\n});\n\/\/Remove waring i=f checking a main area extend option\njQuery('.main-checkboxes input[name*=\"chkExtend\"]').click(function () { \n\tvar areaId = jQuery(this).parents().eq(1).attr('id');\n\tjQuery('#' + areaId + ' .warning').css('display', 'none');\t\n\tjQuery('#' + areaId + ' .sub-area-container').css('background-color', 'transparent');\n});<\/p>\n<p>\/\/Deactivate Main Area Expand if checking a sub area option\njQuery('.sub-area input').change(function () { \n\tvar areaId = jQuery(this).parents().eq(3).attr('id');\n\tif(jQuery(this).attr('checked')) {\n\t\tjQuery(this).parents().eq(3).children('.main-checkboxes').children('input[name*=\"chkExpand\"]').each(function () {\n\t\t\tjQuery(this).attr('checked', false);\n\t\t\tjQuery('#' + areaId + ' .warning').css('display', 'none');\t\n\t\t\tjQuery('#' + areaId + ' .sub-area-container').css('background-color', 'transparent');\n\t\t});\n\t};\n});<\/p>\n<p>\/\/Make checkboxes exclusive\njQuery('div.fullwidth-areas .checkbox').click(function () { \n\/\/alert('checked');\n\/\/scan all sibling in the element parent div and clear the checkbox\n\tcheckedState = jQuery(this).attr('checked');\n\tjQuery(this).parent('div').children('.checkbox:checked').each(function () {\n\t\tjQuery(this).attr('checked', false);\n\t});\n\/\/Restore the clicked checkbox status\n\t  jQuery(this).attr('checked', checkedState);\n});\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mockup for the Customizer layout that has the 3 options grouped under each area It illustrates the mutually exclusive aspect of the options If Main area Expand is checked, none of the sub area options should be used, a warning and visual clue is made If a sub area option is checked while the Main area Expand is, it will <span class=\"excerpt-dots\">&hellip;<\/span> <a class=\"more-link\" href=\"https:\/\/www.nicolatrwst.com\/testnicola\/test-4\/\"><span class=\"more-msg\">Continue reading &rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":7082,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6348","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/pages\/6348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/comments?post=6348"}],"version-history":[{"count":0,"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/pages\/6348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/media\/7082"}],"wp:attachment":[{"href":"https:\/\/www.nicolatrwst.com\/testnicola\/wp-json\/wp\/v2\/media?parent=6348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}