var widthTablet = 767; var widthDesktop = 1026; $(document).ready(function() { var searchOpen = false $('.hamburger .fa-search').click(function(){ if(searchOpen === false){ console.log('search clicked'); $('.hamburger form').css({ 'width' : '200px', 'visibility' : 'visible' }); $('.hamburger').css({ 'width': '100%' }) searchOpen = true; } else { console.log('search clicked'); $('.hamburger form').css({ 'width' : '0px', 'visibility' : 'hidden' }); $('.hamburger').css({ 'width': 'auto' }) searchOpen = false; } }); if (pageType === 'home') { var latestMobile = $('.latest-mobile'); var visualMobile = $('.visual-mobile'); var blogsMobile = $('.blogs-mobile'); var latestTablet = $('.latest-tablet'); var visualTablet = $('.visual-tablet'); var blogsTablet = $('.blogs-tablet'); var topStorySectionWidth = $('.top-story').innerWidth(); var weatherBug = $('.homepage-weather'); /* var rect_pos1 = $('#rect_pos1'); var rect_pos2 = $('#rect_pos2'); var rect_pos3 = $('#rect_pos3'); var mobileCube1 = $('#mobile-cube-1'); var mobileCube2 = $('#mobile-cube-2'); var mobileCube3 = $('#mobile-cube-3'); var leadeboard_pos2 = $('#leaderboard_pos2'); */ var topStoryImageSource = $('.top-story-image img').attr('src'); $('.top-nav > a').addClass('hide-pc'); $('.section-front-links').removeClass('hide-pc'); } var windowWidth = $(window).innerWidth(); //hamburger is closed to start with var isClosed = true; var settings = $('.settings-icon'); var settingsPane = $('.settings-pane'); var settingsClosed = true; var closeSettings = $('.close-settings'); var hamburger = $('.hamburger .fa-bars'); var slideMenu = $('.slide-menu'); var hamburgerOverlay = $('.overlay'); var settingsOverlay = $('.settings-overlay'); var closeHamburger = $('.close'); var expand = $('.expand'); isExpanded = false; var latestStories = $('body').find('.latest-stories'); var visualStories = $('body').find('.visual-stories'); var mostPopular = $('body').find('.pc-most-popular-container'); var blogs = $('body').find('.pd-blogs'); var vChunk = $('.top-v-chunk-story img'); mobileAdsPlaced = false; var popularTablet = $('.popular-tablet'); var vChunkWidth = $('.top-v-chunk-story').innerWidth(); var topStoryImgTag = $('.top-story-image img'); if (pageType !== 'home') { topStoryImageSource = $('.sf-top-story-image img').attr('src'); var topStorySectionWidth = $('.sf-top-story-image').innerWidth(); var topStoryImgTag = $('.sf-top-story-image img'); } hamburger.click(toggleHamburger); closeHamburger.click(closeSlideMenu); hamburgerOverlay.click(closeSlideMenu); settings.click(toggleSettings); closeSettings.click(closeSettingsMenu); settingsOverlay.click(closeSettingsMenu); expand.click(toggleSubmenu); getImgSize(topStoryImageSource); function getImgSize(imgSrc) { var newImg = new Image(); newImg.onload = function() { var topImgHeight = newImg.height; var topImgWidth = newImg.width; var imgHeight = (topImgHeight * topStorySectionWidth) / topImgWidth; if (windowWidth <= widthTablet) { // it's a mobile page console.log('loaded on mobile'); latestMobile.append(latestStories); visualMobile.append(visualStories); blogsMobile.append(blogs); /* if (mobileAdsPlaced === false) { mobileCube1.append(rect_pos1); mobileCube2.append(rect_pos2); mobileCube3.append(rect_pos3); mobileAdsPlaced = true; console.log('mobleAdsPlaced = ', mobileAdsPlaced); } */ prepareMobileAds(); } else if (windowWidth > widthTablet && windowWidth < widthDesktop) { // it's a tablet page console.log('loaded on tablet'); latestTablet.append(latestStories); popularTablet.append(mostPopular); visualTablet.append(visualStories); blogsTablet.append(blogs); $('.weather').append(weatherBug); /* $('.leaderboard-ad').append(leadeboard_pos2) */ prepareTabletAds(); } else { // it's a desktop page console.log('loaded on desktop'); // slide column 3 up below 1 & 2 setTimeout(function() { if (pageType === 'home') { var col2Marker = $('.col-2-marker').offset().top; } var column4 = $('.column-4'); var col1Marker = $('.col-1-marker').offset().top; var col3Marker = $('.col-3-marker').offset().top; if (col2Marker > col1Marker) { console.log('2 is taller than 1') var marginTop = -(col3Marker - col2Marker); } else { var marginTop = -(col3Marker - col1Marker); } column4.css({ 'margin-top': marginTop }) }, 100); prepareDesktopAds(); } } newImg.src = imgSrc; // this must be done AFTER setting onload } function closeSlideMenu() { slideMenu.toggleClass('is-open'); slideMenu.toggleClass('is-closed'); hamburgerOverlay.toggleClass('overlay-closed'); hamburgerOverlay.toggleClass('overlay-opened'); isClosed = true; } function toggleHamburger() { console.log("hamburger clicked"); if (isClosed == true) { slideMenu.toggleClass('is-open'); slideMenu.toggleClass('is-closed'); hamburgerOverlay.toggleClass('overlay-closed'); hamburgerOverlay.toggleClass('overlay-opened'); isClosed = false; } else { slideMenu.toggleClass('is-open'); slideMenu.toggleClass('is-closed'); hamburgerOverlay.toggleClass('overlay-closed'); hamburgerOverlay.toggleClass('overlay-opened'); isClosed = true; } } function toggleSubmenu() { if (isExpanded === false) { $(this).next().removeClass('submenu'); $(this).next().addClass('show'); $(this).children().removeClass('fa fa-caret-square-o-down'); $(this).children().addClass('fa fa-caret-square-o-up'); isExpanded = true; } else { $(this).next().removeClass('show'); $(this).next().addClass('submenu'); $(this).children().removeClass('fa fa-caret-square-o-up'); $(this).children().addClass('fa fa-caret-square-o-down'); isExpanded = false; } } function toggleSettings() { if (settingsClosed == true) { settingsPane.toggleClass('settings-closed'); settingsPane.toggleClass('settings-open'); settingsOverlay.toggleClass('settings-overlay-closed'); settingsOverlay.toggleClass('settings-overlay-opened'); settingsClosed = false; } else { settingsPane.toggleClass('settings-open'); settingsPane.toggleClass('settings-closed'); settingsOverlay.toggleClass('settings-overlay-closed'); settingsOverlay.toggleClass('settings-overlay-opened'); settingsClosed = true; } } function closeSettingsMenu() { if (settingsClosed == true) { settingsPane.toggleClass('settings-open'); settingsPane.toggleClass('settings-closed'); settingsOverlay.toggleClass('settings-overlay-closed'); settingsOverlay.toggleClass('settings-overlay-opened'); settingsClosed = false; } else { settingsPane.toggleClass('settings-open'); settingsPane.toggleClass('settings-closed'); settingsOverlay.toggleClass('settings-overlay-closed'); settingsOverlay.toggleClass('settings-overlay-opened'); settingsClosed = true; } }; //RESIZING OPERATIONS :D var resizeId; $(window).resize(function() { clearTimeout(resizeId); resizeId = setTimeout(doneResizing, 500); function doneResizing() { var windowWidth = $(window).innerWidth(); var topStorySectionWidth = $('.top-story').innerWidth(); var topStoryImageSource = $('.top-story-image img').attr('src'); var topStorySectionWidth = $('.top-story').innerWidth(); var vChunkWidth = $('.top-v-chunk-story').innerWidth(); function getImgSize(imgSrc) { var newImg = new Image(); newImg.onload = function() { var topImgHeight = newImg.height; var topImgWidth = newImg.width; var imgHeight = (topImgHeight * topStorySectionWidth) / topImgWidth; if (windowWidth <= widthTablet) { // resized to mobile console.log('resized to Mobile'); $('.latest-mobile').append(latestStories); $('.visual-mobile').append(visualStories); $('.blogs-mobile').append(blogs); $('.popular-mobile').append(mostPopular); /* if (mobileAdsPlaced === false) { mobileCube1.append(rect_pos1); mobileCube2.append(rect_pos2); mobileCube3.append(rect_pos3); mobileAdsPlaced = true; console.log('mobleAdsPlaced = ', mobileAdsPlaced); } $('.leaderboard-ad').append(leadeboard_pos2); */ $('.column-4').css({ 'margin-top': 0 }) } else if (windowWidth > widthTablet && windowWidth < widthDesktop) { // resized to tablet $('.latest-tablet').append(latestStories); $('.popular-tablet').append(mostPopular); $('.visual-tablet').append(visualStories); $('.blogs-tablet').append(blogs); $('.weather').append(weatherBug); $('#desk-cube-1').append(rect_pos1); $('.column-4').css({ 'margin-top': 0 }); /* $('.leaderboard-ad').append(leadeboard_pos2); */ } else { // resized to desktop console.log('resized to PC'); var column4 = $('.column-4'); $('.latest-holder').append(latestStories); $('.visual-holder').append(visualStories); $('.blogs-holder').append(blogs); $('.pc-popular-holder').append(mostPopular) var col1Marker = $('.col-1-marker').offset().top; var col2Marker = $('.col-2-marker').offset().top; var col3Marker = $('.col-3-marker').offset().top; $('.weather-holder').append(weatherBug) /* if (mobileAdsPlaced === true) { $('#desk-cube-1').append(rect_pos1); $('#desk-cube-2').append(rect_pos2); $('#desk-cube-3').append(rect_pos3); mobileAdsPlaced = false; console.log('mobleAdsPlaced = ', mobileAdsPlaced); } */ if (col2Marker > col1Marker) { var marginTop = -(col3Marker - col2Marker); column4.css({ 'margin-top': marginTop }) } else if (col1Marker > col2Marker) { var marginTop = -(col3Marker - col1Marker); column4.css({ 'margin-top': marginTop }) } } } newImg.src = imgSrc; // this must be done AFTER setting onload }; getImgSize(topStoryImageSource); } }) // Set up the lazy loading of the v-chunk images $('#ad_desktop_halfpage').on('appear', function() { console.log("halfpage ad appeared"); }); $('.vchunk-img-wrapper-scale').on('appear', function() { showVChunkImg($(this)); }); $('#ad_desktop_halfpage').initAppear({scrollDelay: 0, once: true}); $('.vchunk-img-wrapper-scale').initAppear({scrollDelay: 0, once: true}); }) function showVChunkImg($this) { $bkg = $this.attr("data-src"); if (typeof $bkg != 'undefined') { if($bkg.length > 5) { $bkgURL = "url('" + $bkg + "')"; $this.css("background-image", $bkgURL); } } } adArray = { ad1x1 : "[1, 1], 'ad1x1').setTargeting('type',['sectionfront'])", adwallpaper : "[1, 1], 'ad1x1_wallpaper').setTargeting('type',['sectionfront'])", ad728x90pos1 : "[[728, 90],[970,90]], 'ad728x90pos1').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad728x90pos2 : "[[728, 90],[970,90]], 'ad728x90pos2').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x100pos1 : "[300, 100], 'ad300x100pos1').setTargeting('type',['sectionfront'])", ad300x250pos1 : "[300, 250], 'ad300x250pos1').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos2 : "[300, 250], 'ad300x250pos2').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos3 : "[300, 250], 'ad300x250pos3').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos4 : "[300, 250], 'ad300x250pos4').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos5 : "[300, 250], 'ad300x250pos5').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos6 : "[300, 250], 'ad300x250pos6').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos7 : "[300, 250], 'ad300x250pos7').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x250pos8 : "[300, 250], 'ad300x250pos8').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad300x600pos1 : "[300, 600], 'ad300x600pos1').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])", ad320x50pos1 : "[320, 50], 'ad320x50pos1').setTargeting('type',['sectionfront']).setTargeting('position',['ATF'])" }; var adSection = "home"; function loadAd(target, id) { if(target.indexOf("mobile_cube") > 0) theStyle = " style='margin: 20px 0; margin-left: calc(50% - 150px);' "; else if(target.indexOf("adhesion") > 0) theStyle = " style='margin-left: calc(50% - 160px);' "; else theStyle = ""; adVal = adArray[id]; adCode = "