Created
March 8, 2022 22:45
-
-
Save SimonStorlSchulke/9959b9cb745f4169318957dd1585c447 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
/* <![CDATA[ */ | |
.j-blog-header { | |
font-size: 40px; | |
} | |
.j-blog #cc-matrix-, | |
#new-dogs-area #cc-matrix- { | |
width: 180px; | |
height: 210px; | |
display: inline-block; | |
overflow: hidden; | |
} | |
.j-blog #cc-matrix- .j-imageSubtitle .cc-imagewrapper a img { | |
object-fit: cover; | |
width:180px; | |
height:180px; | |
} | |
.j-blog #cc-matrix- div:nth-of-type(3), | |
.j-blog #cc-matrix- div:nth-of-type(5), | |
.j-blog #cc-matrix- div:nth-of-type(6) { | |
display: none; | |
} | |
a .j-blog-headline { | |
font-size: 16px !important; | |
font-weight: bold !important; | |
margin-top: -14px !important; | |
} | |
.j-blog #cc-matrix- .j-spacing { | |
display: none; | |
} | |
.j-blog-meta .j-text { | |
display: none; | |
} | |
.jtpl-header { | |
height: 64px; | |
max-height: 64px; | |
position: fixed; | |
top: 0px; | |
transition:visibility 0.3s linear,opacity 0.3s linear; | |
} | |
.jmd-nav__link--current { | |
border: none !important; | |
} | |
/*--Mobile Menu ausklapp Buttons--*/ | |
.jtpl-navigation__inner .jmd-nav__toggle-button::after { | |
-ms-transform: translate(-7px, 0px) rotate(-45deg); | |
transform: translate(4.5px, 0px) rotate(-45deg); | |
} | |
.jtpl-navigation__inner .jmd-nav__toggle-button::before { | |
-ms-transform: translate(6px, 0px) rotate(45deg); | |
transform: translate(-4.5px, 0px) rotate(45deg); | |
} | |
.jmd-nav__item--last-opened .jmd-nav__toggle-button::after { | |
-ms-transform: translate(-7px, 0px) rotate(45deg) !important; | |
transform: translate(4.5px, 0px) rotate(45deg) !important; | |
} | |
.jmd-nav__item--last-opened .jmd-nav__toggle-button::before { | |
-ms-transform: translate(6px, 0px) rotate(-45deg) !important; | |
transform: translate(-4.5px, 0px) rotate(-45deg) !important; | |
} | |
/*------*/ | |
.jtpl-navigation__inner { | |
margin-top: -10px; | |
} | |
.jtpl-title { | |
display: none; | |
} | |
.banner-bottom { | |
position: absolute; | |
left: 0px; | |
top: -50px; | |
height: 375px; | |
width: 100%; | |
background-color: #666; | |
background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/sfdce5541d069a958/image/iac5ecf33d74eb070/version/1621195162/image.jpg"); | |
background-size: auto; | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: right top; | |
z-index: -100; | |
} | |
.jtpl-content__inner { | |
padding-top: 35px; | |
} | |
/*hierauf achten, falls es noch andere breadcrumb menues gibt, die nicht unerwuenscht sind.*/ | |
.jtpl-breadcrumb { | |
display: none; | |
} | |
.banner-bottom-content { | |
color: white; | |
max-width: 600px; | |
height: 310px; | |
} | |
.banner-bottom-content h2 { | |
color: white !important; | |
font-size: 40px !important; | |
} | |
.contact-card { | |
width: 245px; | |
border-radius: 10px; | |
box-shadow: 0px 3px 15px #0004; | |
text-align: center; | |
margin-top: 40px; | |
height: 320px; | |
margin-bottom: 50px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.contact-card-content { | |
padding: 20px; | |
padding-top: 0px; | |
height: 170px; | |
} | |
.contact-card h3 { | |
font-size: 18px; | |
} | |
.contact-card .snhg-gradient { | |
background: #fca817; | |
height: 15px; | |
border-radius: 0px 0px 10px 10px; | |
} | |
.ct-title { | |
font-weight: bold; | |
} | |
.contact-card img { | |
margin-top: -46px; | |
border-radius: 50%; | |
object-fit: cover; | |
width: 160px; | |
height: 160px; | |
} | |
.snhg-button { | |
color: #000; | |
background-color: #cbc0b4; | |
transition: all 0.2s; | |
border-style: none; | |
border-radius: 25px; | |
padding: 15px 32px; | |
text-align: center; | |
text-decoration: none; | |
display: inline-block; | |
font-size: 16px; | |
} | |
.snhg-button:hover { | |
color: white; | |
background-color: #b7a998; | |
} | |
.cc-nav-level-1, | |
.j-nav-level-1, | |
.cc-nav-level-2, | |
.j-nav-level-2 { | |
box-shadow: none; | |
} | |
.jtpl-logo { | |
display: none; | |
height: 450px; | |
} | |
@media screen and (max-width: 600px) { | |
.jtpl-logo { | |
height: 200px; | |
} | |
} | |
.jqbga-slider { | |
display: none; | |
} | |
.jtpl-slope { | |
height: 20px; | |
} | |
#page-2459496690 .jtpl-content__inner { | |
padding-top: 0px; | |
} | |
#page-2459496690 .jtpl-slope { | |
height: 100px; | |
} | |
#page-2459496690 .jtpl-logo { | |
display: block; | |
} | |
#page-2459496690 .jqbga-slider { | |
display: block !important; | |
} | |
.captcha { | |
background: white !important; | |
} | |
.captcha character refresh { | |
border: none; | |
} | |
.snhg-home-logo { | |
height: 100%; | |
width: 300px; | |
} | |
@media screen and (max-width: 1169px) { | |
.jtpl-navigation { | |
margin-top: 65px; | |
} | |
} | |
.snhg-home-logo a { | |
background-color: #0000; | |
background-image: url(https://image.jimcdn.com/app/cms/image/transf/none/path/sfdce5541d069a958/image/ifa220de2c95f7e05/version/1621257520/image.png); | |
background-repeat: no-repeat; | |
background-size: 200px; | |
position: absolute; | |
left: 5%; | |
height: 100%; | |
width: 200px; | |
} | |
.hide { | |
visibility: hidden; | |
opacity: 0%; | |
} | |
#page-2459502090 #load-more-blog-posts, | |
#page-2459823190 #load-more-blog-posts, | |
#page-2460144890 #load-more-blog-posts { | |
display: none; | |
} | |
/*]]>*/ | |
</style> | |
<script type="text/javascript" defer> | |
const id_blog = "page-2459502090"; | |
const id_rueden = "page-2459823190"; | |
const id_huendinnen = "page-2460144890"; | |
function ajax(url, method, callback, params = null) { | |
var obj; | |
try { | |
obj = new XMLHttpRequest(); | |
} catch(e){ | |
try { | |
obj = new ActiveXObject("Msxml2.XMLHTTP"); | |
} catch(e) { | |
try { | |
obj = new ActiveXObject("Microsoft.XMLHTTP"); | |
} catch(e) { | |
alert("Your browser does not support Ajax."); | |
return false; | |
} | |
} | |
} | |
obj.onreadystatechange = function() { | |
if(obj.readyState == 4) { | |
callback(obj); | |
} | |
} | |
obj.open(method, url, true); | |
obj.send(params); | |
return obj; | |
} | |
function createElementsFromHTML(htmlString) { | |
var div = document.createElement('div'); | |
div.innerHTML = htmlString.trim(); | |
return div.childNodes; | |
} | |
//<![CDATA[ | |
document.addEventListener("DOMContentLoaded", function(){ | |
let homebutton = document.createElement("div"); | |
homebutton.classList.add("snhg-home-logo"); | |
homebutton.innerHTML = ` | |
<a href="/"><\/a> | |
` | |
var header = document.querySelector(".jtpl-header"); | |
header.appendChild(homebutton); | |
var doc = document.documentElement; | |
var w = window; | |
var prevScroll = w.scrollY || doc.scrollTop; | |
var curScroll; | |
var direction = 0; | |
var prevDirection = 0; | |
var checkScroll = function() { | |
/* | |
** Find the direction of scroll | |
** 0 - initial, 1 - up, 2 - down | |
*/ | |
curScroll = w.scrollY || doc.scrollTop; | |
if (curScroll > prevScroll) { | |
//scrolled up | |
direction = 2; | |
} | |
else if (curScroll < prevScroll) { | |
//scrolled down | |
direction = 1; | |
} | |
if (direction !== prevDirection) { | |
toggleHeader(direction, curScroll); | |
} | |
prevScroll = curScroll; | |
}; | |
var toggleHeader = function(direction, curScroll) { | |
if (direction === 2 && curScroll > 52) { | |
//replace 52 with the height of your header in px | |
header.classList.add('hide'); | |
prevDirection = direction; | |
} | |
else if (direction === 1) { | |
header.classList.remove('hide'); | |
prevDirection = direction; | |
} | |
}; | |
window.addEventListener('scroll', checkScroll); | |
// On Blog-Pages | |
if (document.body.id == id_blog || document.body.id == id_rueden || document.body.id == id_huendinnen) { | |
let blogentries = document.querySelector(".j-blog"); | |
//let dogs = blogentries.querySelectorAll("#cc-matrix-"); | |
let klein = document.createElement("div"); | |
let h_klein = document.createElement("h1"); | |
h_klein.innerHTML = "Klein (bis 45cm)"; | |
klein.appendChild(h_klein); | |
let mittelgross = document.createElement("div"); | |
let h_mittelgross = document.createElement("h1"); | |
h_mittelgross.innerHTML = "mittelgroß (45-54cm)"; | |
mittelgross.appendChild(h_mittelgross); | |
let gross = document.createElement("div"); | |
let h_gross = document.createElement("h1"); | |
h_gross.innerHTML = "groß (ab 55cm)"; | |
gross.appendChild(h_gross); | |
blogentries.appendChild(klein) | |
blogentries.appendChild(mittelgross) | |
blogentries.appendChild(gross) | |
dogs = blogentries.querySelectorAll("#cc-matrix-"); | |
// If first grid element is heading (Rüden / Hündinnen) | |
if (document.body.id == id_huendinnen || document.body.id == id_rueden) { | |
dogs[0].parentElement.removeChild(dogs[0]); | |
document.querySelector("#content_area").prepend(dogs[0].childNodes[0]); | |
} else if (dogs[0].childNodes.length > 2) { | |
let h_hunde = document.createElement("h1"); | |
h_hunde.innerHTML = "Hunde"; | |
h_hunde.style.fontSize = "4.8rem"; | |
h_hunde.style.margin = "0px"; | |
document.querySelector("#content_area").prepend(h_hunde); | |
} | |
dogs = blogentries.querySelectorAll("#cc-matrix-"); | |
console.log(blogentries.childNodes.length); | |
for (let i=0; i < dogs.length; i++) { | |
let height = dogs[i].querySelectorAll("#cc-m-1")[4].innerHTML.substring(0, 2); | |
//dogs[i].parentElement.removeChild(dogs[i]); | |
if (isNaN(height)) { | |
let warn = document.createElement("p"); | |
warn.style.color = "red"; | |
warn.innerHTML = dogs[i].querySelector(".j-blog-headline").innerHTML + " hat keine Schulterhöhe is der Blog-Zusammenfassung definiert (muss einzelne Zahl ohne 'cm'] sein) und wird deshalb nicht in der Übersicht angezeigt.<br><br>" | |
document.querySelector("#content_area").prepend(warn); | |
} else { | |
if (height <= 45) { | |
klein.appendChild(dogs[i]); | |
} | |
else if (height <= 54) { | |
mittelgross.appendChild(dogs[i]); | |
} | |
else { | |
gross.appendChild(dogs[i]); | |
} | |
} | |
} | |
ajax('/app/blogpage?page=2&withinCms=1&layout=1&category=H%C3%BCndinnen', 'get', function(obj) { | |
let ajdogs = createElementsFromHTML(obj.responseText); | |
ajdogs.forEach(dog => { | |
let cHeight = 20; | |
try { | |
cHeight = dog.childNodes[4].innerHTML.substring(0, 2); | |
} catch (error) {}// skip height - dirty} | |
if (cHeight <= 45) { | |
klein.appendChild(dog); | |
} | |
else if (cHeight <= 54) { | |
mittelgross.appendChild(dog); | |
} | |
else { | |
gross.appendChild(dog); | |
} | |
}); | |
}); | |
} | |
}); | |
//]]> | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment