/* 20 1111 ~ JS File has loaded */ /* Path < assets/simpleSite/ > */ /* imagePath < > */ /* Client: www.ma-design.UK Name: Woody Description: Responsive Coming Soon Version: 1.5 Author: MountainTheme TABLE OF CONTENTS --------------------------- 1. Loading 2. Backstretch Image Background 2.1 Backstretch Slideshow Background 3. jQuery Tweetie 4. Countdown 5. Contact form 6. Ajax mailchimp 7. Video Background 8. Google Map */ /* ================================= */ /* :::::::::: 1. Loading ::::::::::: */ /* ================================= */ if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { $('#video').css({"opacity" : "0.0"}); } $(window).load(function() { $(".loader-icon").delay(500).fadeOut(); $("#page-loader").delay(700).fadeOut("slow"); setTimeout(function() { $("header .social-icons").addClass("animated fadeInDown"); $("header .logo").addClass("animated fadeInDown"); $("header .typed").addClass("animated fadeInUp"); $("header p").addClass("animated fadeInUp"); $("header .countdown").addClass("animated fadeInUp"); }); }); /* ================================= */ /* ::::::::: 2. Backstretch :::::::: */ /* ================================= */ /* Active Single Image Background */ /* $("header").backstretch("simpleSite/images/slides/background_Home.jpg"); */ /* $("header").backstretch("simpleSite/images/slides/Home.jpg"); // ==== SLIDESHOW BACKGROUND ==== // Set URLs to background images inside the array // Each image must be on its own line, inbetween speech marks (" ") and with a comma at the end of the line // Add / remove images by changing the number of lines below // Variable fade = transition speed for fade animation, in milliseconds // Variable duration = time each slide is shown for, in milliseconds /* /* *//* JS File has loaded *//* /* Path < assets/simpleSite/ > *//* /* imagePath < > */ /* postCode XXXXXX /* ↓ XXXXXX Remove comments if you want to use the slideshow XX 17 0526 XXX ↓ */ /* */ $("header").backstretch([ "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_1.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_2.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_3.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_4.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_5.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_6.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_7.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_8.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_9.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_10.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_11.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_12.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_13.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_14.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_15.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_16.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_17.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_18.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_19.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_20.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_21.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_22.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_23.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_24.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_25.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_26.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_27.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_28.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_29.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_30.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_31.jpg", "assets/simpleSite/images/slides/17-1130-MA-DESIGN-Page-Brand-Management-PORTFOLIO_32.jpg", ],{duration: 6500, fade: 700}); /* ================================= */ /* ::::::: 3. jQuery Tweetie ::::::: */ /* ================================= */ $(function () { $('.tweet').twittie({ username: 'madesign54', count: 5, template: '
{{date}} - {{tweet}}
', dateFormat: '%d %B %Y', apiPath: 'assets/simpleSite/twitter/api/tweet.php', }, function () { var item = $('.tweet ul'); item.find('li:first').show().siblings().hide(); setInterval(function() { item.find('li:visible').fadeOut(300,function() { $(this).appendTo(item); item.find('li:first').fadeIn(300); }); }, 5000); }); }); /* ================================= */ /* :::::::::: 4. Countdown ::::::::: */ /* ================================= */ // To change date, simply edit: var endDate = "Dec 01, 2015 20:39:00"; $(function() { // var endDate = "April 28, 2017 20:39:00"; // var endDate = "Jun 22, 2018 20:39:00"; $('.countdown').countdown({ date: endDate, render: function(data) { $(this.el).html("
" + this.leadingZeros(data.days, 0) + " days
" + this.leadingZeros(data.hours, 2) + " hours
" + this.leadingZeros(data.min, 2) + " minutes
" + this.leadingZeros(data.sec, 2) + " seconds
"); } }); }); /* ================================= */ /* :::::::: 5. Contact form :::::::: */ /* ================================= */ $(function(){ $('#submit').on("click", function() { // validate and process form here $("#ajax-contact-form").validate({ rules:{ name:{ required: true, }, email:{ required: true, email: true, }, msg:{ required: true, }, }, messages:{ name:{ required: "", }, email:{ required: "", email: "", }, msg:{ required: "", }, }, // JQuery's awesome submit handler. submitHandler: function(form) { // Create variables from the form var name = $('input#name').val(); var email = $('input#email').val(); var msg = $('textarea#msg').val(); // Create variables that will be sent in a URL string to contact.php var dataString = '&name='+ name + '&email=' + email + '&msg=' + msg; $.ajax({ type: "POST", url: "assets/simpleSite/php/contact.php", data: dataString, success: function(data) { if(data == 'OK') { var result = '
Your email was sent. Thanks!
'; $("#ajax-contact-form").find('input[type=text], input[type=email], textarea').val(""); } else { result = data; } $('#note').html(result); } }); return false; } }); }); }); /* ================================= */ /* :::::::: 6. Ajax mailchimp :::::: */ /* ================================= */ // Example MailChimp url: http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx $('#ajaxChimp').ajaxChimp({ language: 'eng', // url: 'http://stevedogs.us9.list-manage.com/subscribe/post?u=df0aa2ea10f32337b29b342d4&id=41ddc569b4' // url: 'http://ma-design.us13.list-manage.com/subscribe/post?u=02835a1c3464e9d60b09faa7a&id=af7665094f'' // madesignUK // jazzLovers.UK url: 'http://jazzlovers.us13.list-manage2.com/subscribe/post?u=ab6eab09a2844b9d389c2cd09&id=b6db23168f' }); // Mailchimp translation // // Defaults: //'submit': 'Submitting...', // 0: 'We have sent you a confirmation email', // 1: 'Please enter a value', // 2: 'An email address must contain a single @', // 3: 'The domain portion of the email address is invalid (the portion after the @: )', // 4: 'The username portion of the email address is invalid (the portion before the @: )', // 5: 'This email address looks fake or invalid. Please enter a real email address' $.ajaxChimp.translations.eng = { 'submit': 'Submitting...', 0: ' We will be in touch soon!', 1: ' You must enter a valid e-mail address.', 2: ' E-mail address is not valid.', 3: ' E-mail address is not valid.', 4: ' E-mail address is not valid.', 5: ' E-mail address is not valid.' } /* ================================= */ /* :::::: 7. Video Background :::::: */ /* ================================= */ var video = $('#video').data('video'); var mute = $('#video').data('mute'); $('#video').YTPlayer({ videoId: video, mute: mute, fitToBackground: true, }); /* ================================= */ /* :::::::: 8. Google Map :::::::::: */ /* ================================= */ jQuery(document).ready(function($){ //set your google maps parameters var latitude = 52.555654, longitude = -2.158683, map_zoom = 10; //google map custom marker icon - .png fallback for IE11 var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1; var marker_url = ( is_internetExplorer11 ) ? 'assets/simpleSite/images/icon-location.png' : 'assets/simpleSite/images/icon-location.png'; //define the basic color of your map, plus a value for saturation and brightness var main_color = "#2C3CAB"; saturation_value= -20, brightness_value= 5; //we define here the style of the map var style= [ { //set saturation for the labels on the map elementType: "labels", stylers: [ {saturation: saturation_value}, ] }, { //poi stands for point of interest - don't show these lables on the map featureType: "poi", elementType: "labels", stylers: [ {visibility: "on"}, ] }, { //don't show highways lables on the map featureType: 'road.highway', elementType: 'labels', stylers: [ {visibility: "on"}, ] }, { //don't show local road lables on the map featureType: "road.local", elementType: "labels.icon", stylers: [ {visibility: "off"}, ] }, { //don't show arterial road lables on the map featureType: "road.arterial", elementType: "labels.icon", stylers: [ {visibility: "off"}, ] }, { //don't show road lables on the map featureType: "road", elementType: "geometry.stroke", stylers: [ {visibility: "off"}, ] }, //style different elements on the map { featureType: "transit", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "poi", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "poi.government", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "poi.sport_complex", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "poi.attraction", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "poi.business", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "transit", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "transit.station", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "landscape", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "road", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "road.highway", elementType: "geometry.fill", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] }, { featureType: "water", elementType: "geometry", stylers: [ { hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }, ] } ]; //set google map options var map_options = { center: new google.maps.LatLng(latitude, longitude), zoom: map_zoom, panControl: false, zoomControl: false, mapTypeControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false, styles: style, } //inizialize the map var map = new google.maps.Map(document.getElementById('google-container'), map_options); //add a custom marker to the map var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map, title: ' ', visible: true, icon: marker_url, }); // Resize window. Center marker google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); //add custom buttons for the zoom-in/zoom-out on the map function CustomZoomControl(controlDiv, map) { //grap the zoom elements from the DOM and insert them in the map var controlUIzoomIn= document.getElementById('zoom-in'), controlUIzoomOut= document.getElementById('zoom-out'); controlDiv.appendChild(controlUIzoomIn); controlDiv.appendChild(controlUIzoomOut); // Setup the click event listeners and zoom-in or out according to the clicked element google.maps.event.addDomListener(controlUIzoomIn, 'click', function() { map.setZoom(map.getZoom()+1) }); google.maps.event.addDomListener(controlUIzoomOut, 'click', function() { map.setZoom(map.getZoom()-1) }); } var zoomControlDiv = document.createElement('div'); var zoomControl = new CustomZoomControl(zoomControlDiv, map); //insert the zoom div on the top left of the map map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv); });