jQuery functions()

  • Sticky Footer
  • Show/Hide Menu
  • Cookie notice bar for legal issues
  • Scroll to top animation
  • YouTube & Vimeo borderless format
  • Check size & type of the upolads
  • Mark invalid form fields
  • A simple "Fader"
// Use https://skalman.github.io/UglifyJS-online/ to minify this code

jQuery(function($){

    // basic variables
    var view = $(window),
        viewHeight = view.height(),
        htmlBody = $("html, body"),
        body = $("#top"),
        bodyHeight = body.height(),
        wrapper = $("#wrapper"),
        header = $("#header"),
        container = $("#container"),
        main = $("#main"),
        article = main.find(".mod_article"),
        footer = $("#footer"),
        toTopElem = $("#to_top");


    function checkJS(){

        body.toggleClass("js_off js_on");
    }


    function disabLink(){

        var disAbled = $(".disablink");

        disAbled.click(function(event){

            event.preventDefault();
        });
    }


    function menuInOut(){

        var navMain = $("#nav_main"),
            hamburger = $(".hamburger");

        hamburger.click(function(){

            $(this).toggleClass("active");
            navMain.toggleClass("out");
            body.toggleClass("nav_out");
        });
    }


    function scrollToContent(){

        var sliderHeight = $(window).height(),
            toContentButton = $(".to_content").find("a");

        toContentButton.click(function(event) {
            event.preventDefault();
            $("html,body").animate({"scrollTop" : sliderHeight}, 1000);
        });
    }


    function stickyFooter(){

        var viewHeight = view.height(),
            wrapperHeight = wrapper.height(),
            footerHeight = footer.height(),
            minContentHeight = viewHeight - footerHeight;

        if (wrapperHeight != viewHeight){

            container.css("min-height", minContentHeight);
        }

        footer.addClass("loaded");
    }


    function toTop(){

        if ($(this).scrollTop() >= viewHeight / 2){

            toTopElem.addClass("out");

        } else {

            toTopElem.removeClass("out");
        }

        toTopElem.click(function(){

            htmlBody.animate({ scrollTop: 0 }, "slow");
        });
    }


    function changeHeaderHeight(){

        if(viewHeight < bodyHeight){

            if ($(this).scrollTop() != 0){

                header.addClass("change");

            } else {

                header.removeClass("change");
            }
        }
    }


    function sliderAutoHeight(){

        if(article.is(".panorama")){

            var slider = $(".panorama"),
                sliderOffset = slider.offset(),
                sliderHeight = slider.height(),
                slides = slider.find(">div"),
                slidesHeight = slides.height(),
                sliderSum = sliderOffset.top + slidesHeight,
                hiddenSlider = slidesHeight - sliderHeight,
                hiddenSliderHalf = hiddenSlider / 2;

            if(slidesHeight > sliderHeight){

                slides.css("margin-top", - hiddenSliderHalf);
                slider.removeClass("height_auto");

            } else {

                slides.css("margin-top", "inherit");
                slider.addClass("height_auto");
            }

            slider.addClass("out");
        }
    }


    function fixedVid(){

        var vidDiv = $(".ce_youtube, .ce_vimeo"),
            vidFrame = vidDiv.find("iframe"),
            vidDivWidth = vidDiv.width();

        vidFrame.each(function(){

            var vidFrameHeight = $(this).attr("height"),
                vidFrameWidth = $(this).attr("width"),
                vidFrameRatio = vidFrameHeight / vidFrameWidth;

            $(this).addClass("loaded").attr("width",vidDivWidth).attr("height", vidDivWidth * vidFrameRatio);
        });

    }


    function showCookieNotice(){

        var cookie_accepted = localStorage.getItem("cookie_accepted");

        if (cookie_accepted === null ){

            var cookieNotice = $("#cookie_notice"),
                accept_notice = cookieNotice.find("#accept_notice");

            cookieNotice.removeClass("accepted");

            accept_notice.on("click", function(){
                cookieNotice.addClass("accepted");
                localStorage.setItem("cookie_accepted", true);
            });
        }
    }


    function sameHeightCols(){

        var viewWidth = view.width();

        if(viewWidth >= 640){

            var columns = $(".columns");

            columns.each(function(){

                var colH = $(this).find(":header"),
                    colP = $(this).find("p"),
                    highestColH = -1,
                    highestColP = -1;

                colH.each(function(){

                    if ($(this).height() > highestColH) {
                        highestColH = $(this).height();
                    }
                });

                colP.each(function(){

                    if ($(this).height() > highestColP) {
                        highestColP = $(this).height();
                    }
                });

                colH.removeAttr("style").css("min-height", highestColH).parent().addClass("loaded");
                colP.removeAttr("style").css("min-height", highestColP).addClass("loaded");
            });
        }
    }


    function checkUpload(){

        var inputUpload = $("input:file");

        inputUpload.change(function(){

            var path = $(this).val(),
                fileMaxSizeInMB = 5,
                fileMaxSize = fileMaxSizeInMB * 1000000,
                fileName = path.replace('C:\\fakepath\\', ''),
                thisParent = $(this).parent(),
                fileSize = this.files[0].size,
                fileSizeToMB = fileSize / 1000000,
                fileSizeRounded = fileSizeToMB.toFixed(2),
                fileType = path.split('.').pop().toLowerCase(),
                fileAllowed = ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];

            if (fileSize > fileMaxSize){

                alert("Diese Datei ist zu groß (" + fileSizeRounded + " MB) und kann nicht hochgeladen werden. " + fileMaxSizeInMB + " MB max!");

            } else if($.inArray(fileType, fileAllowed) == -1){

                alert("Dieser Dateityp ist falsch (." + fileType + ") und kann nicht hochgeladen werden.");

            } else {

                thisParent.addClass("file_attached").find(".file_loaded").html(fileName);
                thisParent.find(".label_default").addClass("display_none");
                thisParent.find(".text_loaded").addClass("display_inline");
                thisParent.next().addClass("display_table");
            }
        });
    }



    function validateForm(){

        var form = $("form"),
            submit = $(".submit");

        if(form.is(".validate")){

            form[0].reset();

            var inputMandatory = $("input.mandatory"),
                textareaMandatory = $("textarea.mandatory"),
                selectMandatoryError = $("select.mandatory.error"),
                selectMandatory = $("select.mandatory"),
                widgetCheckBox = $(".widget-checkbox.mandatory");

            submit.click(function(event){

                event.preventDefault();

                inputMandatory.each(function(){

                    if(!$(this).val()){

                        $(this).parent().addClass("error");

                    } else if($(this).val()){

                        $(this).parent().removeClass("error");

                    }

                });


                textareaMandatory.each(function(){

                    if(!$(this).val()){

                        $(this).addClass("error").parent().addClass("error");

                    } else if($(this).val()){

                        $(this).removeClass("error").parent().removeClass("error");

                    }

                });


                selectMandatory.each(function(){

                    if($(this).val() === "-"){

                        $(this).parent().addClass("error");

                    }else{

                        $(this).parent().removeClass("error");
                    }
                });


                widgetCheckBox.each(function(){

                    var checkedBox = $(this).find("input:checked"),
                        checkedBoxDiv = checkedBox.parent().parent().parent();

                    checkedBoxDiv.addClass("check");

                    if($(this).is(".check")){

                        $(this).removeClass("error");

                    } else {

                        $(this).addClass("error");
                    }
                });


                inputMandatory.on("change", function(){

                    if($(this).val()){

                        $(this).removeClass("error").parent().removeClass("error");
                    }
                });


                textareaMandatory.on("change", function(){

                    if($(this).val()){

                        $(this).removeClass("error").parent().removeClass("error");
                    }
                });


                var errors = $(".widget.error"),
                    countErrors = errors.length;

                if(countErrors === 0){

                    $(this).parent().parent().parent().submit();

                    //body.addClass("icon-spin1 animate-spin");
                    //setTimeout(function(){}, 750);

                } else {

                    alert("Bitte fülle alle rotmarkierten Felder aus, die mit * gekennzeichent sind!");

                    var firstError = form.find(".widget.error:first"),
                        errorOffsetTop = firstError.offset().top,
                        headerHeight = header.height(),
                        scrollToError = errorOffsetTop - 100;

                    htmlBody.animate({ scrollTop: scrollToError}, "slow");
                }


                $(".widget-checkbox.error").click(function(){

                    $(this).removeClass("error");
                });


                $("select").on("change", function(){

                    $(this).parent().removeClass("error").addClass("here");
                });
            });
        }
    }


/* ------------------------------------------------------------ CALL FUNCTIONS ----- */


    $(window).on("resize", function(){
        fixedVid();
        stickyFooter();
        scrollToContent();
        sliderAutoHeight();
    });


    $(document).ready(function(){
        toTop();
        checkJS();
        fixedVid();
        menuInOut();
        disabLink();
        checkUpload();
        validateForm();
        scrollToContent();
        showCookieNotice();
        changeHeaderHeight();
    });


    $(window).load(function(){
        stickyFooter();
        sameHeightCols();
    });


    $(window).scroll(function(){
        toTop();
        changeHeaderHeight();
    });
});