Untitled
unknown
plain_text
2 years ago
12 kB
2
Indexable
//console.log('code run');
try {
/* main variables */
var debug = 0;
var variation_name = "";
var $;
/* all Pure helper functions */
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function () {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function () {
clearInterval(interval);
}, delayTimeout);
}
let egHero = `
<div class="eg-hero">
<div class="eg-wrapper"></div>
</div>`;
/* Variation Init */
function init() {
if (!document.querySelector(".eg-hero")) {
document.body.classList.add("eg-home");
// changing logo image
document.querySelector("html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) .logo_img").src = "https://www.hyperoptic.com/wp-content/uploads/2023/03/Hyperoptic-logo-full-colour-2.jpg";
document.querySelector("#top_main_banner").insertAdjacentHTML("afterend", egHero);
let egSearchBox = document.querySelector('div[id*="elastic-blockblock"]');
egSearchBox.classList.add("eg-searchbox");
document.querySelector(".eg-hero .eg-wrapper").insertAdjacentElement("beforeend", egSearchBox);
document.querySelectorAll('html body .eg-searchbox .input-elastic-group button[qa="elasticSearchCheckButton"]').forEach(btn => {
btn.innerHTML = "Check now";
})
document.querySelectorAll('html body .eg-searchbox .input-elastic-group [qa="elasticSearchPostcode"]').forEach((src, i) => {
if (i === 1) {
src.placeholder = "Check your postcode";
} else {
src.placeholder = "Check your postcode to get started";
}
});
document.querySelector("html body #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) div[class*='myaccount-btn-wr'] img").src = "https://www.hyperoptic.com/wp-content/themes/hyperoptic3/img/icons/my-account_blue.png";
}
}
function setSticky() {
if (window.innerWidth > 991) {
let header = document.querySelector("html body #top_main_banner #page-vue-header-mainmenu");
window.addEventListener('scroll', function () {
let bottom = document.documentElement.scrollHeight * 0.10;
const searchBox = header.querySelector(".menuContainer");
if (searchBox) {
if (window.scrollY >= bottom) {
searchBox.classList.add("eg-sticky");
if ((!document.querySelector(".eg-sticky .eg-sticky-title")) && (document.querySelector(".eg-sticky>div.container>div"))) {
document.querySelector(".eg-sticky>div.container>div").insertAdjacentHTML("afterbegin", `<h1 class="eg-sticky-title"><span class="eg-bold">We're Hyperfair</span> - not hyperexpensive Fibre Broadband.</h1>`);
}
} else {
if (document.querySelector(".eg-sticky .eg-sticky-title")) {
document.querySelector(".eg-sticky .eg-sticky-title").remove();
}
searchBox.classList.remove("eg-sticky");
}
}
});
} else {
setStickyMob();
}
}
// mobile scroll
function setStickyMob() {
//console.log('code run1');
var scrollTimer = -1;
var searchBox;
let header = document.querySelector("html body #top_main_banner #page-vue-header-mainmenu");
window.addEventListener('scroll', bodyScroll);
function bodyScroll() {
searchBox = header.querySelector(".elastic-wr");
searchBox && searchBox.classList.remove("eg-sticky");
// console.log('scrolling');
if (scrollTimer != -1)
clearTimeout(scrollTimer);
scrollTimer = window.setTimeout(scrollFinished, 500);
}
function scrollFinished() {
if (window.scrollY >= 300) {
searchBox && searchBox.classList.add("eg-sticky");
// console.log('stoped');
}
}
}
/* Initialize variation */
if (window.location.pathname === "/") {
waitForElement('div[id*="elastic-blockblock"] > div > div:nth-child(2) .input-elastic-group button[qa="elasticSearchCheckButton"]', init, 1000, 15000);
}
if (window.innerWidth > 991) {
waitForElement("html body #top_main_banner #page-vue-header-mainmenu .elastic-search", setSticky, 2500, 15000);
} else {
waitForElement("html body #top_main_banner #page-vue-header-mainmenu .elastic-wr", setSticky, 2500, 15000);
}
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
<style>
html body.eg-home .eg-hero+div,
html body.eg-home .eg-searchbox>div>div .container>div>div:last-child,
html body.eg-home .eg-searchbox>div>div .container>div>p:last-child,
html body .eg-sticky .menu {
display: none !important;
}
html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input,
html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input::placeholder {
font-size: 18px !important;
}
html body.eg-home .eg-hero {
background: white;
}
html body.eg-home .eg-wrapper {
width: 100%;
max-width: none;
margin-left: auto;
margin-right: auto;
background-image: url("http://hyperoptic.com/wp-content/uploads/2023/02/Desktop-Sale-Banners-3-Months-fixed.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
max-height: 520px;
display: flex;
align-items: flex-end;
padding-bottom: 62px;
}
html body.eg-home .eg-searchbox>div>div {
background: none !important;
padding: 0 !important;
}
html body.eg-home .eg-searchbox>div>div .container>div>div:first-child,
html body.eg-home .eg-searchbox,
html body.eg-home .eg-searchbox .container {
width: 100% !important;
}
html body.eg-home .eg-searchbox .container {
max-width: 699px !important;
}
html body.eg-home .eg-searchbox .container>div {
margin: 0 !important;
}
html body.eg-home .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"] {
background-color: #706290 !important;
}
html body .eg-sticky {
position: fixed !important;
top: unset !important;
left: 0;
right: 0;
background: white;
width: 100%;
box-shadow: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: center;
z-index: 99999 !important;
border-bottom: 1px solid #CBCECF;
bottom: 0 !important;
}
@media(min-width:993px) and (max-width:1079px) {
html body.eg-home .eg-wrapper {
max-height: 420px !important;
padding-bottom: 42px !important;
}
}
html body.home #pageFooter {
padding-bottom: 81px !important;
}
@media(min-width:992px) {
html body .eg-sticky {
bottom: 0 !important;
top: unset !important;
}
html body .eg-sticky::after {
content: "";
position: absolute;
top: -2px;
width: 100%;
display: block;
height: 3px;
background: linear-gradient(to right, #3db8db, #706290);
}
}
@media(max-width:992px) and (min-width:768px) {
html body.eg-home .eg-wrapper {
max-height: 772px !important;
background-size: 100% !important;
background-position: 50% 74% !important;
padding-bottom: 100px !important;
}
}
.eg-sticky>div.container>div {
display: flex;
align-items: center;
justify-content: space-between;
}
.eg-sticky>div.container>div>div:nth-child(1),
.eg-sticky>div.container>div>div:nth-child(3) tbody td:nth-child(n + 2) {
display: none !important;
}
.eg-sticky>div.container {
max-width: 850px !important;
}
.eg-sticky {
height: 80px !important;
background: #706290 !important;
}
.eg-sticky>div.container>div>div:nth-child(3) {
width: 100% !important;
height: max-content !important;
display: flex !important;
max-width: 334px !important;
float: unset !important;
}
.eg-sticky>div.container>div>div:nth-child(3)>div:nth-child(2) {
position: static !important;
min-width: 100% !important;
max-width: 100% !important;
margin-top: 0 !important;
}
.eg-sticky>div.container>div>div:nth-child(3) tbody td:nth-child(1) {
width: 100% !important;
}
html body .eg-sticky .input-elastic.input-elastic-border {
font-size: 1.8em !important;
height: 50px !important;
background: white !important;
}
html body .eg-sticky .input-elastic-loader {
margin-top: 15px !important;
}
.eg-sticky .btn-elastic-go {
height: 50px !important;
width: 50px !important;
}
.eg-sticky #elastic-results {
top: unset !important;
bottom: 64px;
}
.eg-sticky-title {
font-size: 17px;
color: #ffffff !important;
font-weight: bold !important;
font-family: 'museo-sans-700' !important;
margin-right: 22px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.eg-sticky>div.container>div>div:nth-child(2) {
display: none !important;
}
.eg-sticky-title>.eg-bold {
color: #fff !important;
}
@media(max-width:992px) {
html body #top_main_banner #page-vue-header-mainmenu>div:last-child>div:nth-child(2).eg-sticky {
display: flex !important;
}
html body .eg-sticky {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 10px !important;
border: none !important;
padding: 20px 16px !important;
background: #706290 !important;
}
html body .eg-sticky>div {
min-width: 100% !important;
}
html body.eg-home .eg-wrapper {
background-image: url("https://www.hyperoptic.com/wp-content/uploads/2023/02/Mobile-A-Sale-Banners-3-Months-fixed.jpg");
padding-bottom: 62px;
}
/* mobile nav changes to white and icons to blue */
html body.eg-home #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) {
background: white !important;
}
html body.eg-home #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) .logo_img {
filter: none !important;
}
html body.eg-home #page-vue-header-mainmenu>div:nth-child(2)>div:nth-child(1) #burgerMobileMenu span.icon-bar {
background-color: #3AB9DC !important;
}
html body.eg-home #page-vue-header-mainmenu #burgerMobileMenuClose {
color: #3AB9DC !important;
}
/* moibile nav changes to white and icons to blue */
html body .eg-sticky::before {
content: "Rated Excellent On Truspilot";
color: white !important;
display: block !important;
width: 100% !important;
text-align: center;
font-size: 17px !important;
font-weight: bold !important;
margin-bottom: 15px !important;
}
html body .eg-sticky {
flex-direction: column !important;
}
.eg-sticky {
height: 116px !important;
}
html body .eg-sticky::after {
content: "";
position: absolute;
bottom: -2px;
width: 100%;
display: block;
height: 3px;
background: linear-gradient(to right, #3db8db, #706290);
}
.eg-sticky #elastic-results {
bottom: 55px !important;
}
html body.home #pageFooter {padding-bottom: 111px !important;}
}
@media(max-width:767px) {
html body.eg-home .eg-searchbox .input-elastic-group [qa="elasticSearchCheckButton"],
html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input,
html body.eg-home .eg-searchbox>div>div .container>div>div:first-child input::placeholder {
font-size: 16px !important;
}
}
@media(max-width:440px) {
html body.eg-home .eg-wrapper {
background-image: url(https://www.hyperoptic.com/wp-content/uploads/2023/02/Mobile-A-Sale-Banners-3-Months-fixed.jpg);
padding-bottom: 40px;
max-height: 411px !important;
}
}
</style>Editor is loading...