body { margin: 0; padding: 0; } #galWrapper { display: block; position: relative; width: 100vw; /*display: inline-flex; flex-wrap: no-wrap; justify-content: space-between; align-items: stretch;*/ } .wpGalWrapper {} #menu { display: block; position: sticky; text-align: center; top: 107px; left: 0px; width: 100vw; max-width: none; height: auto; max-height: Calc(100vh - 70px); max-height: none; padding: 0; background: #333333; z-index: 100; } #galmenuwrapper {} #galmenu { display: block; position: relative; width: 100%; padding: 0; font-family: "Roboto", Arial, sans-serif; text-align: left; } .galmenuItem { display: inline-block; position: relative; width: auto; margin-left: 1em; } .galmenuItem input[type="checkbox"] { display: none; } #galmenu form { display: flex; justify-content: center; align-content: flex-start; align-items: center; flex-wrap: wrap; margin: 0; } .galmenuItem .title { display: block; padding: 0.6em 0.8em; font-weight: 200; font-size: 1em; font-weight: 500; color: #fff; font-family: "Pratt", Georgia, serif !important; font-family: "Roboto", Arial, sans-serif !important; background: #666666; } .galmenuItem:hover .title { background: #be131b; } select { width: Calc(100% - 1em); padding-right: 1em; } .galmenuTitle { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; z-index: 90; cursor: pointer; } .galmenuItem ul { display: block; position: absolute; margin: 0 0 0 -1em; padding: 1em; overflow: hidden; transition: all .45s; font-size: 1em; font-size: 12px; background: #be131b; width: inherit; max-height: 600; opacity: 1; color: #fff; display: inline-flex; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap; z-index: 100; } #galmenu ul.hidden { max-height: 0; padding-bottom: 0; opacity: 0; } .dropdownBtn { cursor: pointer; display: inline-block; width: 1em; height: 1em; } .dropdownBtn:after { content: ''; display: block; position: relative; top: 0em; left: 0em; height: .5em; width: .5em; border-top: 2px solid; border-right: 2px solid; -moz-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: all .45s; } .dropdownBtn.hidden:after { top: 0.25em; left: -0.25em; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #galmenu i { font-size: 8px; margin-left: 1em; } #galmenu ul, #galmenu li { list-style: none; margin: 0; } .galmenuItem ul { right: 0; } #galmenu li { display: block; list-style: none; margin: 0; padding: 0 0 .25em 0; min-width: 170px; width: 100%; border: none; font-size: 14px; } .featInfo { font-size: 12px !important; color: #ec4149; color: #eee; } .adgal { width: calc(100vw - 350px); min-width: 300px; width: 100vw; padding: 50px 0; display: flex; justify-content: center; z-index: 90; background: #f2f2f2; } .adgalwrapper { display: inline-flex; flex-wrap: wrap; justify-content: space-evenly; justify-content: flex-start; align-items: flex-start; align-content: flex-start; } .adgal .item { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; position: relative; /*width: 190px;*/ width: calc((100vw / 7) - 15px); min-height: 200px; margin: 0 2.5px 5px 2.5px; padding: 5px 5px 10px 5px; background: #f2f2f2; background: #fff; text-align: left; opacity: 1; -webkit-transition: opacity 1.15s; transition: opacity 1.15s; border-radius: 4px; overflow: hidden; line-height: 1em; box-shadow: 2px 2px 2px #ddd; } .adgal .item>* { width: 100%; } .adgal .item img { display: block; position: relative; /*width: 187.5px; height: 150px;*/ width: 100%; margin: 0 0 10px 0; background: #444; border-radius: 4px; } .adgal .item p { font-family: "Roboto", Arial, sans-serif; margin: 5px 0; font-size: 0.8rem; color: #999; } .adgal .item .ppreview { display: inline-block; font-size: .8rem; color: #ee2c49; text-decoration: none; font-weight: 500; cursor: pointer; -webkit-transition: color .45s, background-color .45s; transition: color .45s, background-color .45s; width: auto; margin: 5px 10px 0 0; border: 1px solid #ee2c49; border-radius: 2px; padding: 2px 5px; font-family: "gm-sans-web"; letter-spacing: 1px; } .adgal .item .ppreview:hover { color: #ffffff; background-color: #DA161F; } .adgal .item .company { font-size: 1rem; font-family: "Pratt", Georgia, serif !important; font-weight: 600; color: #000; } .body { font-size: .7em; ; } .adgal .hidden { opacity: 0; min-width: 0px; width: 0px; min-height: 0px; height: 0px; margin: 10px 0px; padding: 5px 0px; border: 0px solid #999; } .cco { display: block; position: absolute; bottom: 0; right: 4px; text-align: right; font-size: .6em; font-family: "Roboto", Arial, sans-serif; color: #999; } .wpGalWrapper .widget { margin: 0 !important; } .clearBtn { display: inline-block; position: relative; background: #da161f; color: #fff; font-size: 12px; margin: auto 1em; padding: 6px 8px; border-radius: 4px; cursor: pointer; } .adgal .hidden { opacity: 0; min-width: 0px; width: 0px; min-height: 0px; height: 0px; margin: 0; padding: 0; border: 0px solid #999; display: none; } .sub_row_0-0-2 a { font-size: .8em !important; color: #ee2c49 !important; text-decoration: none !important; text-transform: uppercase; font-weight: 900 !important; font-family: "Roboto", Arial, sans-serif; cursor: pointer; background: none !important; border: none; box-shadow: none !important; -webkit-transition: color .45s; transition: color .45s; } .sub_row_0-0-2 a span { transition: padding .45s; } .sub_row_0-0-2 a:hover { color: #ff3333; } .sub_row_0-0-2 a:hover span { padding-left: .6em; } #sorry { display: block; position: relative; width: 100%; text-align: center; font-size: 1.4em; background: #f2f2f2; padding: 1em 0; margin-top: 8em; margin-bottom: 1em; border-radius: 4px; } #sorry.hidden { display: none; } .new::before { content: "★"; display: block; position: absolute; top: 0px; left: 0px; z-index: 95; background-color: #fff; color: #cf0000; font-weight: bold; padding: 2px 6px 0px 6px; font-size: 10px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); border-radius:0 0 5px 0; } select { background: transparent; line-height: 1; border: 0; padding: 0; border-radius: 0; width: 100%; position: relative; z-index: 10; font-size: 1em; } #burger { display: none; } @media screen and (min-width: 769px) { .galmenuItem .dropdownUp, #dropdownType, #dropdownFormats, #dropdownCategories, #dropdownFeatures { max-height: 0; overflow: hidden; opacity: 1; display: none; } #navType:hover .dropdownAll, #navFormat:hover .dropdownAll, #navCategory:hover .dropdownAll, #navFeature:hover .dropdownAll { max-height: none; overflow: show; opacity: 1; display: flex; } } @media screen and (max-width: 1132px) { #menu { top: 139px; } } @media screen and (max-width: 960px) { #menu { top: 105px; } } @media screen and (max-width: 768px) { #menu { top: 105px; left: 0px; left: -70vw; width: 70vw !important; max-width: none; height: Calc(100vh - 70px); height: 0; max-height: Calc(100vh - 105px); border-right: 1px solid #ccc; overflow-x: visible; transform: translateX(-70vw); -webkit-transition: transform .25s; transition: transform .25s; } #menu.exp { transform: translateX(0vw); } .adgal { padding-top: 55px; } #burger { display: block; position: absolute; top: -1px; right: -51px; width: 50px; height: 50px; background: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; } #galmenuwrapper { max-height: Calc(100vh - 70px); background: #eee; overflow-y: scroll; } #galmenu .title:hover { background: #666; cursor: default; } .galmenuItem { margin-left: 0; } #galmenu .title { display: block; margin: 0em; } #galmenu { position: relative; } #galmenu ul { position: relative; margin: 0 2em 1em 2em; padding: 0; border: none; background: none; color: #000; } } @media (max-width: 629px) { .adgal .item { width: calc((100vw) - 15px); } } @media (min-width: 630px) { .adgal .item { width: calc((100vw / 3) - 15px); } } @media (min-width: 840px) { .adgal .item { width: calc((100vw / 4) - 15px); } } @media (min-width: 1050px) { .adgal .item { width: calc((100vw / 5) - 15px); } } @media (min-width: 1260px) { .adgal .item { width: calc((100vw / 6) - 15px); } } @media (min-width: 1470px) { .adgal .item { width: calc((100vw / 7) - 15px); } } @media (min-width: 2400px) { .adgalwrapper { width: 2400px; margin: auto; } .adgal .item { width: calc((2400px / 7) - 15px); } } [type="radio"] { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } label { display: block; cursor: pointer; line-height: 1.5; } [type="radio"]+span { display: block; } [type="radio"]+span:before { content: '✓'; display: inline-block; width: 1em; height: 1em; color: #be131b; } [type="radio"]:checked+span { font-weight: 900; } [type="radio"]:checked+span:before { content: '✓'; display: inline-block; width: 1em; height: 1em; transition: 0.5s ease all; float: left; color: #fff; } [type="checkbox"] { display: none; } [type="checkbox"]+span { display: block; } [type="checkbox"]+span:before { content: ''; display: inline-block; width: 1em; height: 1em; color: #be131b; } [type="checkbox"]:checked+span { font-weight: 900; } [type="checkbox"]:checked+span:before { content: '+'; display: inline-block; width: 1em; height: 1em; transition: 0.5s ease all; float: left; color: #fff; } .bLinks { display: block; display: flex; justify-content: space-evenly; } <!-- --> <!----> var showing = ''; // get any url parameters function GetURLParameter(sParam) { var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } } // on load, get ready function init() { // clear cached checkboxes $('*:checkbox').prop("checked", false); $('*:radio').prop("checked", false); $('#allTypes').prop("checked", true); $('#allFormats').prop("checked", true); $('#allCategories').prop("checked", true); var linkShowing = GetURLParameter('filter'); if (typeof linkShowing === "undefined") { return; } showing = linkShowing.replace(/-/g, '.'); var array = linkShowing.split("-"); array.shift(); for (var i = 0; i < array.length; ++i) { if (array[i].length != 0) { //console.log(array[i]); $('#' + array[i]).prop("checked", true); } } // pointing at animation to trick update nav var t = $('#auto'); // update navigation updateNav(t); // update showing showItems(); }; // if any radio or checkbox is changed... $(".detectThisChange").change(function (e) { // prevent other functions e.stopPropagation(); var self = $(this); updateNav(this); // update showing showItems(); // transition to top of gallery $('html, body').stop().animate({ scrollTop: ($('#galWrapper').offset().top) - 73 }, 50); // url save state var var linkShowing = showing.replace(/\./g, '-'); // converts dots to dashes for url var newurl = 'https://globemediagroup.ca/newspaper-advertising-gallery/?filter=' + linkShowing; window.history.replaceState({ path: newurl }, 'Newspaper Advertising Gallery - GlobeLink', newurl); // pushes url state }); // update nav function updateNav(t) { // update dropdown for type, format, and category for (var i = 0; i < $('.galRadio').length; i++) { var newName = $('.galRadio').eq(i).find('input[type=radio]:checked').siblings('span').html(); $('.galRadio').eq(i).find('.title').html(newName + ' ▼'); } // get number of features showing var featFilter = $("#dropdownFeatures input:checked").length; // if no features are selected, OR the target is 'all', default to all if ((featFilter == 0) || (t.id == "allFeatures")) { $("#dropdownFeatures input").prop("checked", false); $("#allFeatures").prop("checked", true); $('#navFeature .title').parents('.galmenuItem').find('.title').html('All features ▼'); // if only the all feature is selected } else if ((featFilter == 1) && ($("#allFeatures").prop("checked"))) { $('#navFeature .title').parents('.galmenuItem').find('.title').html('All features ▼'); // if one or more items are selected } else if (featFilter >= 1) { $("#allFeatures").prop("checked", false); var newNum = $("#dropdownFeatures input:checked").length; $('#navFeature .title').parents('.galmenuItem').find('.title').html('Features (' + newNum + ') ▼'); } } // revise showing items, show 'sorry' if none function showItems() { $('.item').addClass('hidden'); // revise filter based on what is checked showing = ''; $("*:checked").each(function () { showing = showing + ('.' + $(this).val()); }); // show 'sorry' if no items are shown if ((showing.length > 0) && ($(showing).length > 0)) { $(showing).removeClass('hidden'); $('#sorry').addClass('hidden'); } else { $('#sorry').removeClass('hidden'); $('.item').addClass('hidden'); } } // show all gallery items, reset filter function showAll() { showing = ''; $('*:checkbox').prop("checked", false); $('*:radio').prop("checked", false); $('#allTypes').prop("checked", true); $('#allFormats').prop("checked", true); $('#allCategories').prop("checked", true); $('.item').removeClass('hidden'); $('#sorry').addClass('hidden'); $('#navType .title').parents('.galmenuItem').find('.title').html('All types ▼'); $('#navFormat .title').parents('.galmenuItem').find('.title').html('All formats ▼'); $('#navCategory .title').parents('.galmenuItem').find('.title').html('All categories ▼'); var newurl = 'https://globemediagroup.ca/newspaper-advertising-gallery/'; window.history.replaceState({ path: newurl }, 'Digital Advertising Gallery - GlobeLink', newurl); } // slides up menu if background clicked $('body').click(function (e) { //if( $(e.target).parents('.dropdownAll').length == 0 ){ $(".dropdownAll").addClass('dropdownUp'); //} }); // drops down (or slides up) menu title on click $(".galmenuTitle").click(function (e) { e.stopPropagation(); if ($(this).siblings(".dropdownAll").hasClass('dropdownUp')) { $(".dropdownAll").addClass('dropdownUp'); $(this).siblings(".dropdownAll").removeClass('dropdownUp'); } else { $(".dropdownAll").addClass('dropdownUp'); } }); $("#burger").click(function (e) { $('#menu').toggleClass('exp'); }); // hides the 'preview' button if IE is detected. function msieversion() { var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) { //alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)))); //this gets the ie version, btw $('.bpreview').hide(); } return false; }; init(); msieversion();