Skip to content

Instantly share code, notes, and snippets.

@janstieler
Created July 4, 2017 23:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save janstieler/fb88fe9dbc720e06cfeb57dd0fe4fdf3 to your computer and use it in GitHub Desktop.
Save janstieler/fb88fe9dbc720e06cfeb57dd0fe4fdf3 to your computer and use it in GitHub Desktop.
Feuerwehr JS Script
function stuffForResizeAndReady(){
var doc = jQuery(document),
windowWidth = jQuery(window).innerWidth(),
windowHeight = jQuery(window).innerHeight(),
container = jQuery('body > .container'),
containerWidth = container.width(),
containerPadding = (container.outerWidth() - containerWidth) / 2,
menu = jQuery('#hauptmenue_e1'),
menuPosition = menu.offset(),
kopfteilOben = jQuery('#kopfteil_oben'),
kopfteilObenPosition = kopfteilOben.offset(),
kopfteilObenHeight = kopfteilOben.height(),
kopfteilObenOuterheight = kopfteilOben.outerHeight(),
kopfteilUnten = jQuery('#kopfteil_unten'),
kopfteilUntenWidth = kopfteilUnten.width(),
navToggleHeight = jQuery('.nav-toggle').outerHeight(),
togglePos = kopfteilObenOuterheight / 2 - (navToggleHeight - 3),
togglePosScroll = - kopfteilObenOuterheight / 2 - (navToggleHeight - 3),
menuOne = jQuery('.nav.menu-e1').height(),
menuTwo = jQuery('.search-menu.menu-item').height(),
menuHeight = menuOne + menuTwo,
stickyWidth = jQuery('#hauptmenue_e1 .menu-e1').width(),
searchTop = jQuery('#mod-finder-searchword-suche-menu').offset().top,
searchHeight = jQuery('#mod-finder-searchword-suche-menu').height(),
searchWidth = jQuery('#mod-finder-searchword-suche-menu').width();
// var classNames = [];
// if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) classNames.push('device-ios');
// if (navigator.userAgent.match(/android/i)) classNames.push('device-android');
//
// var html = document.getElementsByTagName('html')[0];
//
// if (classNames.length) classNames.push('on-device');
// if (html.classList) html.classList.add.apply(html.classList, classNames);
//Für alle Größen gültig
//das erste break in der Einsatzkomponenten Tabelle löschen
jQuery('.eiko_td3_2 br').remove();
/*
jQuery('.overlay').on('click', function(){
jQuery('#op').trigger('click');
});
*/
//Frontsideediting Umbruch nach radiobutton Label einfügen
jQuery('.radio.btn-group label').after('<br/>');
//Größer als Tablet = Desktop
if (windowWidth >= 992){
jQuery('body:not([class~="desktop"])').addClass('desktop'); //Füge Klasse Desktop Body hinzu für spätere if-Abfrage
jQuery('body').removeClass('mobile'); //Löscht Klasse Mobile Body bei resize in Desktopgröße
if(jQuery('body').is('.has-sticky-menu.desktop')){
//Entfernt Klasse "toggleClose" bei dem Menü menu-e1 wenn Bildschirm wieder groß skaliert wird
jQuery('#hauptmenue_e1 .menu-e1').removeClass('toggleClose');
jQuery('#hauptmenue_e1 .menu-e1').removeClass('toggleOpen');
menu.css({'top': 0});
jQuery('#hauptmenue_e1 .menu-e1 .nav-child').css({'position': 'absolute'});
kopfteilUnten.css({'marginLeft': 35, 'width': 'auto'});
jQuery('.search-menu').hide();
//Funktion zum Einblenden Menü Dropdown
jQuery('.menu-e1 .firstlvl').hover(function() {
jQuery(this).find('.nav-child').stop().delay('100').fadeIn('slow');
},
function(){
//Funktion zum Ausblenden
jQuery(this).find('.nav-child').stop().hide();
});
if(jQuery('.stickymenubg').length === 0 ){
jQuery('#hauptmenue_e1 .menu-e1').after('<div class="stickymenubg"></div>');
}
//Add icon and background for searchinput at the menu
jQuery('.search-menu').before('<li class=\"search-icon menu-item\" style="display: none;"><button class="btn btn-link" id="searchIconBtn"><i class=\"icon-search\" style=\"color: white; margin-top: 12px;\"></i></button></li>');
jQuery('.stickymenubg').after(jQuery('.stickymenubg').clone().attr('id', 'searchmenubg'));
doc.on('scroll', function() {
if (doc.scrollTop() > menuPosition.top) {
jQuery('body').addClass('stickymenu');
menu.css({'top': 0});
jQuery('.stickymenu #hauptmenue_e1 .menu-e1').css({ 'width': kopfteilUntenWidth});
jQuery('.stickymenu .logo-menu, .stickymenu .search-icon').fadeIn('slow');
} else {
jQuery('body').removeClass('stickymenu');
menu.css({'top': 0});
jQuery('.logo-menu, .search-menu.menu-item, .search-icon, #searchmenubg').hide();
jQuery('.autocomplete-suggestions').hide();
}
});
jQuery('.menu-e1').on('click', '#searchIconBtn', function () {
if (jQuery('#searchmenubg').is(':hidden')) {
jQuery('#searchmenubg, .search-menu.menu-item').slideDown('slow');
} else {
jQuery('#searchmenubg, .search-menu.menu-item').slideUp('slow');
}
});
}
}
//Kleiner Desktop = Tablet/Mobile
else if (windowWidth >= 768 && windowWidth <= 991){
jQuery('.img-intro img').each(function(){
jQuery(this).css({
/* 'width': 218, */
'marginTop': 5,
'marginRight': 20,
'marginBottom': 5,
'marginLeft': 0
});
});
//Ändere die Klasse Desktop zu Mobile ab Windowgröße 991
jQuery('body').removeClass('desktop');
jQuery('body:not([class~="mobile"])').addClass('mobile');
//positioniere Button fürs mobile Menü
jQuery('.nav-toggle').css({'top': togglePos});
//Setzt die Autocompletebreite auf die selbe Breite wie das Suchfeld
jQuery('.autocomplete-suggestions').width(searchWidth);
jQuery('.autocomplete-suggestions').css({'top': searchTop + searchHeight });
//Füge Klasse "toggleClose" dem Menü menu-e1 hinzu
jQuery('#hauptmenue_e1 .menu-e1:not([class~="toggleClose"])').addClass('toggleClose');
if(jQuery('body').is('.has-sticky-menu.mobile, .mobile')){
jQuery('#hauptmenue_e1 .menu-e1').css({'width': '100%'});
jQuery('.search-menu').show();
//Funktion zum unbind Menü Dropdown funktion
jQuery('.menu-e1 .firstlvl').unbind('mouseenter mouseleave');
doc.on('scroll', function() {
if (doc.scrollTop() > '0') {
jQuery('body').addClass('stickymenu');
jQuery('#hauptmenue_e1').css({'top': kopfteilObenOuterheight -1});
jQuery('#hauptmenue_e1 .menu-e1').css({'width': '100%'});
jQuery('.search-menu').show();
jQuery('.nav-toggle').css({'top': togglePosScroll });
} else {
jQuery('body').removeClass('stickymenu');
jQuery('.search-menu').show();
jQuery('.nav-toggle').css({'top': togglePos});
}
});
}
jQuery('#op').change(function(){
if(jQuery(this).is(':checked')) {
jQuery('body').addClass("paginationOn");
} else {
jQuery('body').removeClass('paginationOn');
}
});
//Set Nivoslider und Header/Menü to 100% Fensterbreite auf Tablet/Mobile
jQuery('#kopfteil_unten').css({width: windowWidth, marginLeft: - containerPadding});
//Öffne Submenü mobile und wechsel Icon des Button
jQuery('.crossbutton').toggle(function() {
jQuery(this).text('-');
jQuery(this).next('.nav-child').css({'display': 'block', 'position': 'static'});
}, function() {
jQuery(this).text('+');
jQuery(this).next('.nav-child').css({'display': 'none'});
jQuery('.parent', this).off('hover touchend', function(){
console.log('touchend');
});
});
//Change toggleMenu Icon to close
jQuery('button.nav-toggle').toggle(function(){
jQuery('body').addClass('menuOpen');
jQuery('.icon-bar', this).addClass('toggleOpen');
jQuery('#hauptmenue_e1 .menu-e1').removeClass('toggleClose');
jQuery('#hauptmenue_e1 .menu-e1').addClass('toggleOpen').css({'max-height': windowHeight - kopfteilObenOuterheight});
},
function(){
jQuery('body').removeClass('menuOpen');
jQuery('.icon-bar', this).removeClass('toggleOpen');
jQuery('#hauptmenue_e1 .menu-e1').removeClass('toggleOpen').css({'max-height': '0'});
jQuery('#hauptmenue_e1 .menu-e1').addClass('toggleClose');
jQuery('.autocomplete-suggestions').hide('fast', function(){
jQuery('.search-menu.menu-item input').val('');
jQuery('.search-menu.menu-item input').attr('placeholder', 'Suche …');
});
});
}
//Kleiner Desktop = Mobile
else if (windowWidth <= 767){
jQuery('.img-intro img').each(function(){
var image = jQuery(this),
width = image[0].naturalWidth,
height = image[0].naturalHeight;
if(width < windowWidth ){
jQuery(this).css({
/* 'width': 'auto', */
'marginTop': '0',
'marginRight': 'auto',
'marginBottom': '0',
'marginLeft': 'auto',
'text-align': 'center',
'display': 'block'
});
}
/*
else if(width < contentWidth && width < windowWidth){
var contentWidth = jQuery('main').width(),
subtract = contentWidth - width;
jQuery(this).css({
'width': subtract,
'marginTop': '0',
'marginRight': 'auto',
'marginBottom': '0',
'marginLeft': 15,
'text-align': 'center',
'display': 'block'
});
}
*/
});
//Ändere die Klasse Desktop zu Mobile ab Windowgröße 991
jQuery('body').removeClass('desktop');
jQuery('body:not([class~="mobile"])').addClass('mobile');
//positioniere Button fürs mobile Menü
jQuery('.nav-toggle').css({'top': togglePos});
//Setzt die Autocompletebreite auf die selbe Breite wie das Suchfeld
jQuery('.autocomplete-suggestions').width(searchWidth);
jQuery('.autocomplete-suggestions').css({'top': searchTop + searchHeight });
//Füge Klasse "toggleClose" dem Menü menu-e1 hinzu
jQuery('#hauptmenue_e1 .menu-e1:not([class~="toggleClose"])').addClass('toggleClose');
if(jQuery('body').is('.has-sticky-menu.mobile, .mobile')){
jQuery('#hauptmenue_e1 .menu-e1').css({'width': '100%'});
jQuery('.search-menu').show();
//Funktion zum unbind Menü Dropdown funktion
jQuery('.menu-e1 .firstlvl').unbind('mouseenter mouseleave');
doc.on('scroll', function() {
if (doc.scrollTop() > '0') {
jQuery('body:not([class~="stickymenu"])').addClass('stickymenu');
jQuery('#hauptmenue_e1').css({'top': kopfteilObenOuterheight -1});
jQuery('#hauptmenue_e1 .menu-e1').css({'width': '100%'});
jQuery('.search-menu').show();
jQuery('.nav-toggle').css({'top': togglePosScroll });
} else {
jQuery('body').removeClass('stickymenu');
jQuery('.search-menu').show();
jQuery('.nav-toggle').css({'top': togglePos});
}
});
}
jQuery('#op').change(function(){
if(jQuery(this).is(':checked')) {
jQuery('body').addClass("paginationOn");
} else {
jQuery('body').removeClass('paginationOn');
}
});
//Set Nivoslider und Header/Menü to 100% Fensterbreite auf Tablet/Mobile
jQuery('#kopfteil_unten').css({width: windowWidth, marginLeft: - containerPadding});
//Öffne Submenü mobile und wechsel Icon des Button
jQuery('.crossbutton').toggle(function() {
jQuery(this).text('-');
jQuery(this).next('.nav-child').css({'display': 'block', 'position': 'static'});
}, function() {
jQuery(this).text('+');
jQuery(this).next('.nav-child').css({'display': 'none'});
jQuery('.parent', this).off('hover touchend', function(){
console.log('touchend');
});
});
//Change toggleMenu Icon to close
jQuery('button.nav-toggle').toggle(function(){
jQuery('body').addClass('menuOpen');
jQuery('.icon-bar', this).addClass('toggleOpen');
jQuery('#hauptmenue_e1 .menu-e1').removeClass('toggleClose');
jQuery('#hauptmenue_e1 .menu-e1').addClass('toggleOpen').css({'max-height': windowHeight - kopfteilObenOuterheight});
},
function(){
jQuery('body').removeClass('menuOpen');
jQuery('.icon-bar', this).removeClass('toggleOpen');
jQuery('#hauptmenue_e1 .menu-e1').removeClass('toggleOpen').css({'max-height': '0'});
jQuery('#hauptmenue_e1 .menu-e1').addClass('toggleClose');
jQuery('.autocomplete-suggestions').hide('fast', function(){
jQuery('.search-menu.menu-item input').val('');
jQuery('.search-menu.menu-item input').attr('placeholder', 'Suche …');
});
});
}
//Kleiner Desktop = Tablet
else if (windowWidth >= 768 && windowWidth <= 991){
//#kopfteil offset um containerposition zu überschreiben
var offsetHeader = jQuery('#kopfteil').offset();
jQuery('#kopfteil').css({left: - offsetHeader.left});
}
else {
jQuery('#kopfteil_unten').css({width: '', marginLeft: ''});
}
}
jQuery(window).on('load resize', stuffForResizeAndReady);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment