streunernothilfe jimdo header v1.html

<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%;
    }
    
    /*]]>*/
    
    </style>
    
    
    <script type="text/javascript">
    
    const id_blog = "page-2459502090";
    const id_rueden = "page-2459823190";
    const id_huendinnen = "page-2460144890";
    
    //<![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);
        (function(){
    
      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 Main Blog-Page
    if (document.body.id == id_blog || document.body.id == id_rueden || document.body.id == id_huendinnen) {
        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-55cm)";
        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);
        
        let bl = document.querySelector(".j-blog");
        bl.appendChild(klein)
        bl.appendChild(mittelgross)
        bl.appendChild(gross)
    
        let els = bl.querySelectorAll("#cc-matrix-");
        
        // If first grid element is heading (Rüden / Hündinnen)
        if (document.body.id == id_huendinnen || document.body.id == id_rueden) {
            els[0].parentElement.removeChild(els[0]);
            document.querySelector("#content_area").prepend(els[0].childNodes[0]);
        } else if (els[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);
        }
        els = bl.querySelectorAll("#cc-matrix-");
    
        
        for (let i=0; i<els.length; i++) {
                let height = els[i].querySelectorAll("#cc-m-1")[4].innerHTML.substring(0, 2);
                els[i].parentElement.removeChild(els[i]);
                console.log(height);
                if (isNaN(height)) {
                    let warn = document.createElement("p");
                    warn.style.color = "red";
                    warn.innerHTML = els[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(els[i]);
                    }
                    else if (height <= 55) {
                        mittelgross.appendChild(els[i]);
                    }
                    else if (height <= 55) {
                        gross.appendChild(els[i]);
                    }
                }
        }
    }
    
    })();
    });
    //]]>
    </script>