I've written a script that I would love to get feedback evaluating the following: Module Pattern implementation, robustness, conciseness, cross-browser compatibility. My goal is to eventually use this script and others, as part of my portfolio for a job application. All criticisms are most welcome, especially if you're already a professional JS developer.
var tashapp=(function(){
var $=document.getElementById.bind(document);
//return appropriate event listener based on browser
var setListener = function(){
if (document.addEventListener) {
return function(el, evnt, fn){
el.addEventListener(evnt,fn,false);
}
}else{
return function(el,evnt,fn){
el.attachEvent('on'+evnt,fn,false);
}
};
}();
//Select correct img size for background
var setDivBg = function(){
var divs=document.getElementsByClassName('fullBg');
var widths=['800','1024','1200','1280','1400','1440','1600','1680','1920','2400','2500','2600'];
var elem, bgImg, elWidth, elHeight, count=0, imagePath='images/';
for (i=0; i < divs.length; i++)
{
/* find dimensions of each div and select, the appropriate image path for bg*/
elem=divs[i];
elWidth=elem.offsetWidth;
elHeight=elem.offsetHeight;
for(var i=0; i < widths.length; i++){
//find closest width
if(elWidth < widths[i]){
continue;
} else{
elem.id=='main'? elem.style.backgroundImage="url('"+imagePath+widths[i]+"/delicious_steak.jpg')" : elem.style.backgroundImage="url('"+imagePath+widths[i]+"/tableset.jpeg')";
}
}
}
}; //*end setDivBg
var setNavPos=function (){
var nav=$('navlinks');
var navWidth=nav.offsetWidth;
var navHeight=nav.offsetHeight;
var navPos=(window.innerWidth-navWidth)/2;
nav.style.left=navPos+'px';
}; //*End setPos
var setAboutText=function(){
var divs=document.getElementsByClassName('aboutText');
var i, p,max;
var h=[];
//set uniform position for every aboutText div
for(i=0; i < divs.length; i++){
p=divs[i].parentElement;
divs[i].style.width=(p.offsetWidth)*0.95+'px';
divs[i].style.height='auto';
h.push(parseInt(divs[i].offsetHeight));
}
/*Find which aboutText div is tallest. set others to same*/
max=Math.max.apply(Math,h);
for(i=0; i < divs.length; i++){
divs[i].style.height=max+'px';
}
};
Utility callbacks
//function to handle creating and appending elements.
var appendToDoc=function(par,elType,attr,attrName){
var el=document.createElement(elType);
el.setAttribute(attr,attrName);
return par.appendChild(el);
};
var removeEl=function(){
var el=this, holder=$('menuholder');
fadeToBlack(el.parentElement);
setTimeout(holder.parentElement.removeChild(holder), 2000);
}
//kills loaded menu by transitioning to invisible then removing element.
var fadeToBlack=function(el){
//change elements opacity to 0;
el.className='invisible';
}
End utility callbacks
//Implement google Map
var mapIt=function(){
var latLong ={lat:51.38650,lng:1.38126 };
var mapCanvas = $('map');
var mapOptions = {
center: new google.maps.LatLng(51.38650, 1.38126),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position:latLong,
map:map,
title:'Tashi\'s Pantry!',
});
};
//function to create and view Menus
var viewMenu=function(){
var docBody=document.body;
var frame,frameDoc,exit;
appendToDoc(docBody, 'div', 'id', 'menuholder');
appendToDoc($('menuholder'),'div','id','container');
appendToDoc($('container'),'iframe','id','currMenu');
frame=$('currMenu');
console.log(frame);
frame.src=this.id+'.php';
frame.onload=function(){
frameDoc=frame.contentWindow.document;
setListener(frameDoc.getElementById('exit'),'click',removeEl);
};
};//**End view menu.
var resizeFn=function(){
//set text position, set aboutText div size, reset Image sizes
setDivBg();
setAboutText();
setNavPos();
};
return {
start: function(){
var menuLinks=document.getElementsByClassName('showmenu');
var i;
document.onreadystatechange=function(){
if (document.readyState=='loading' || document.readyState=='interactive'){console.log('loading and setting menu header');
} else{
//initialize backgrounds and text, text positions etc
setDivBg();
setAboutText();
setNavPos();
//add event Listeners
setListener(window, 'resize', resizeFn);
for(i=0; i < menuLinks.length; i++){
setListener(menuLinks[i], 'click', viewMenu);
}
}
};
},
map:function(){mapIt()},
} //**end return object
})();
tashapp.start();
tashapp.map();
