I have a question about proper event binding. How to implement on my js?
PROPER EVENT BINDING: Consider using the preferred .on() method rather than
.click(), .bind(), .hover(), .load(), .ready(), etc.
"use strict";
//Document ready
$(document).ready(function() {
/********************************
- Hide player on mobile -
********************************/
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(".player").hide();
$(".player-controls").hide();
}
/*****************
- Loader -
*****************/
$(".page-loader .loader .label > span").each(function() {
var text = $(this);
var words = text.data("words").split("|");
var i, j = 0, word;
var len = words.length;
for (i=0; i<len; i++) {
text.append($("<span />", {text:words[i]}));
word = text.find("span");
if (i>0) {word.hide();}
}
function anim() {
text.animate({
width:word.eq(j).width()
});
word.stop().fadeOut()
.eq(j).fadeIn()
.delay(750).show(0, anim);
j = ++j % len;
}
anim();
});
/********************
- Countdown -
********************/
if ($(".countdown").length>0) {
$(".countdown").flipTimer({
date:"2019/12/25 20:30:00",
dayTextNumber:"auto",
borderRadius:3,
bgColor:"#fff",
dividerColor:"#666",
digitColor:"#333",
textColor:"#fff",
boxShadow:false
});
}
/********************
- Animation -
********************/
$("[data-animation]").addClass('animated');
$("[data-animation]").each(function(i, el) {
var delay = $(el).data("delay") || 0;
if ($(window).width()<768) {
delay = 0;
}
$(el).appear(function() {
setTimeout(function() {
$(el).addClass("animated").addClass($(el).data("animation"));
}, delay);
}, {accX:0, accY:0});
});
/*******************
- Counters -
*******************/
$(".counter").appear(function() {
var counter = $(this).find(".number-count");
var toCount = counter.data("count");
var delay = $(this).data("delay") || 0;
setTimeout(
function() {
$(counter).countTo({
from:0,
to:toCount,
speed:1000,
refreshInterval:50,
});
},
delay
);
});
/********************
- Up button -
********************/
$('.up-btn').on("click", function() {
$(window).scrollTo($('body'), 1500, {offset:{top:0, left:0}});
});
/********************
- Subscribe -
********************/
$("#notifyMe").notifyMe();
/***********************
- Contact form -
***********************/
$("#submit").on("click", function() {
//Validate and process form
$("#ajax-contact-form").validate({
rules:{
name:{
required:true,
},
email:{
required:true,
email:true,
},
message:{
required:true,
},
},
messages:{
name:{
required:"<i class='fa fa-exclamation-triangle name'></i>",
},
email:{
required:"<i class='fa fa-exclamation-triangle email'></i>",
email:"<i class='fa fa-exclamation-triangle email'></i>",
},
message:{
required:"<i class='fa fa-exclamation-triangle message'></i>",
},
},
//Submit form
submitHandler:function(form) {
//Result text
var result = "";
//Create variables from the form
var name = $('input#name').val();
var email = $('input#email').val();
var message = $('textarea#message').val();
//Create variables that will be sent in a URL string to contact.php
var dataString = '&name='+name+'&email='+email+'&message='+message;
$.ajax({
type:"POST",
url:"php/contact.php",
data:dataString,
success:function(data) {
if(data==="ok") {
$("#ajax-contact-form").find('input[type=text], input[type=email], textarea').val("");
result = '<div class="notification_ok"><i class="fa fa-check"></i> Your email was sent. Thanks!</div>';
} else {
result = data;
}
$("#note").html(result).fadeIn();
}
});
return false;
}
});
});
/*************************
- Youtube player -
*************************/
$(".player").mb_YTPlayer();
//Player controls
$('#play').on("click", function(){
$('.player').playYTP();
});
$('#pause').on("click", function(){
$('.player').pauseYTP();
});
//Google Maps
googleMaps();
});
/**********************
- Window load -
**********************/
$(window).on("load", function() {
$(".page-loader").delay(300).fadeOut("slow");
});
/**********************
- Google Maps -
**********************/
function googleMaps() {
if ($('#google-container').length===0) {
return;
}
//Variables
var title = arrMap.title;
var latitude = arrMap.latitude;
var longitude = arrMap.longitude;
var zoom = arrMap.zoom;
//Marker icon
var marker_url = arrMap.marker;
//Main color
var main_color = arrMap.color;
//Saturation and brightness
var saturation_value = -20;
var brightness_value = 5;
//Map style
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 labels on the map
featureType:"poi",
elementType:"labels",
stylers:[
{visibility:"off"},
]
},
{//Hide highways labels on the map
featureType:'road.highway',
elementType:'labels',
stylers:[
{visibility:"off"},
]
},
{//Hide local road labels on the map
featureType:"road.local",
elementType:"labels.icon",
stylers:[
{visibility:"off"},
]
},
{//Hide arterial road labels on the map
featureType:"road.arterial",
elementType:"labels.icon",
stylers:[
{visibility:"off"},
]
},
{//Hide road labels 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: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:title,
visible:true,
icon:marker_url
});
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
if (arrMap.zoomControlDiv==undefined) {
var zoomControlDiv = document.createElement("div");
var zoomControl = new customZoomControl(zoomControlDiv, map);
arrMap.zoomControlDiv = zoomControlDiv;
}
//Insert the zoom div on the top left of the map
map.controls[google.maps.ControlPosition.LEFT_TOP].push(arrMap.zoomControlDiv);
}
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);
});
}