function addLoadEvent(func)
{ var oldοnlοad=window.onload; if(typeof window.onload!='function') { window.οnlοad=func; } else { window.οnlοad=function() { oldonload(); func(); } } }function addClass(element,value) {
if (!element.className) { element.className = value; } else { newClassName = element.className; newClassName+= " "; newClassName+= value; element.className = newClassName; }} function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if(parent.lastChild==targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); }}function highlightPage(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; var headers=document.getElementsByTagName('header'); if(headers.length==0) return false; var navs=headers[0].getElementsByTagName('nav'); if(navs.length==0) return false; var links=navs[0].getElementsByTagName("a"); var linkurl; for(var i=0;i<links.length;i++) { linkurl=links[i].getAttribute("href"); if(window.location.href.indexOf(linkurl)!=-1) { links[i].className="here"; var linktext=links[i].lastChild.nodeValue.toLowerCase(); document.body.setAttribute("id",linktext); return true; } } }
/* moveElement */
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById)return false; if(!document.getElementsByTagName) return false; var elem=document.getElementById(elementID); if(elem.movement){ clearTimeout(elem.movement); } if(!elem.style.left){ elem.style.left="0px"; } if(elem.style.top){ elem.style.top="0px"; } var xpos=parseInt(elem.style.left); var ypos=parseInt(elem.style.top); if(xpos==final_x&&ypos==final_y){ return true; } if(xpos<final_x){ var dist=Math.ceil((final_x-xpos)/10); xpos+=dist; } if(xpos>final_x){ var dist=Math.ceil((xpos-final_x)/10); xpos-=dist; } if(ypos<final_y){ var dist=Math.ceil((final_y-ypos)/10); ypos+=dist; } if(ypos>final_y){ var dist=Math.ceil((ypos-final_y)/10); ypos-=dist; }elem.style.left=xpos+"px";
elem.style.top=ypos+"px"; var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; elem.movement=setTimeout(repeat,interval); }/* prepareSlideshow */function prepareSlideshow(){ if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; if(!document.getElementById("intro")) return false; var intro=document.getElementById("intro"); var slideshow=document.createElement("div"); slideshow.setAttribute("id","slideshow"); var preview =document.createElement("img"); preview.setAttribute("src","images/slideshow.gif"); preview.setAttribute("alt","a glimpse of what awaits you ..."); preview.setAttribute("id","preview"); slideshow.appendChild(preview); insertAfter(slideshow,intro); var links=document.getElementsByTagName("a"); var destination; for(var i=0;i<links.length;i++) { links[i].οnmοuseοver=function() { destination=this.getAttribute("href"); if(destination.indexOf("index.html")!=-1){ moveElement("preview",0,0,5); } if(destination.indexOf("about.html")!=-1){ moveElement("preview",-150,0,5); } if(destination.indexOf("photos.html")!=-1){ moveElement("preview",-300,0,5); } if(destination.indexOf("live.html")!=-1){ moveElement("preview",0,-450,5); } if(destination.indexOf("contact.html")!=-1){ moveElement("preview",0,-600,5); } } } console.log("ok"); } /* 內部導航*/
function showSection(id){
var sections=document.getElementsByTagName("section"); for(var i=0;i<sections.length;i++){ if(sections[i].getAttribute("id")!=id){ sections[i].style.display="none"; } else{ sections[i].style.display="block"; } } }
function prepareInternalnav()
{ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; var articles=document.getElementsByTagName("article"); if(articles.length==0)return false; var navs=articles[0].getElementsByTagName("nav"); if(navs.length==0) return false; var nav=navs[0]; var links=articles[0].getElementsByTagName("a") for(var i=0;i<links.length;i++){ var sectionId=links[i].getAttribute("href").split("#")[1]; if(!document.getElementById(sectionId)) continue; document.getElementById(sectionId).style.display="none"; links[i].destination=sectionId; links[i].οnclick=function(){ showSection(this.destination); return false; } links[i].class="here"; }}/* Javascript 圖片庫 */function showPic(whichpic){ if(!document.getElementById("placeholder")) return false; var source =whichpic.getAttribute("href"); var placeholder=document.getElementById("placeholder"); placeholder.setAttribute("src",source); if(!document.getElementById("description")) return false; if(whichpic.getAttribute("title")){ var text=whichpic.getAttribute("title"); } else{ var text=""; } var description=document.getElementById("description"); if(description.firstChild.nodeType==3){ description.firstChild.nodeValue=text; } return false;}
function preparePlaceholder(){
if(!document.createElement) return false; if(!document.createTextNode) return false; if(!document.getElementById) return false; if(!document.getElementById("imagegallery")) return false; var placeholder=document.createElement("img"); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src","images/placeholder.gif"); placeholder.setAttribute("alt","my image gallery"); var description=document.createElement("p"); description.setAttribute("id","description"); var desctext=document.createTextNode("Choose an image"); description.appendChild(desctext); var gallery=document.getElementById("imagegallery"); insertAfter(description,gallery); insertAfter(placeholder,description);}function prepareGallery(){
if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementById("imagegallery")) return false; var gallery=document.getElementById("imagegallery"); var links=gallery.getElementsByTagName("a"); for(var i=0;i<links.length;i++){ links[i].οnclick=function(){ return showPic(this); } }} /* 增強表格*/function stripeTables(){ if(!document.getElementsByTagName) return false; var tables=document.getElementsByTagName("table"); for(var i=0;i<tables.length;i++){ var odd=false; var rows=tables[i].getElementsByTagName("tr"); for(var j=0;j<rows.length;j++){ if(odd==true){ addClass(rows[j],"odd"); odd=false; } else{ odd=true; } } }}function highlightRows(){
if(!document.getElementsByTagName) return false; var rows=document.getElementsByTagName("tr");for(var i=0;i<rows.length;i++){
rows[i].oldClassName=rows[i].className; rows[i].οnmοuseοver=function(){ addClass(this,"highlight"); } rows[i].οnmοuseοut=function(){ this.className=this.oldClassName; } }}function displayAbbreviations(){
if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) return false; var abbreviations=document.getElementsByTagName("abbr"); if(abbreviations.length<1) return false; var defs=new Array(); for(var i=0;i<abbreviations.length;i++){ var current_abbr=abbreviations[i]; if(current_abbr.childNodes.length<1) continue; var definition=current_abbr.getAttribute("title"); var key=current_abbr.lastChild.nodeValue; defs[key]=definition; } var dlist=document.createElement("dl"); for(key in defs){ var definition=defs[key]; var dtitle=document.createElement("dt"); var dtitle_text=document.createTextNode(key); dtitle.appendChild(dtitle_text); var ddesc=document.createElement("dd"); var ddesc_text=document.createTextNode(definition); ddesc.appendChild(ddesc_text); dlist.appendChild(dtitle); dlist.appendChild(ddesc); } if(dlist.childNodes.length<1) return false; var header=document.createElement("h3"); var header_text=document.createTextNode("Abbreviations"); header.appendChild(header_text); var articles=document.getElementsByTagName("article"); if(articles.length==0) return false; var container=articles[0]; container.appendChild(header); container.appendChild(dlist); }/* 表單 *//*單擊label , focus相應的input 項 */function focusLabels(){ if(!document.getElementsByTagName) return false; var labels=document.getElementsByTagName("label"); for(var i=0;i<labels.length;i++){ if(!labels[i].getAttribute("for")) continue; labels[i].οnclick=function(){ var id=this.getAttribute("for"); if(!document.getElementById(id)) return false; var element=document.getElementById(id); element.focus(); } }}
/* 表單 */
/*對不支持html5的browsers, 以javascript實現預填值 */function resetFields(whichform){ if(Modernizr.input.placeholder) return; for(var i=0;i<whichform.elements.length;i++){ var element=whichform.elements[i]; if(element.type=="submit") continue; var check=element.placeholder||element.getAttribute('placeholder'); if(!check) continue; element.οnfοcus=function(){ var text=this.placeholder||this.getAttribute('placeholder'); if(this.value==text){ this.className=''; this.value=""; } } element.οnblur=function(){ if(this.value==""){ this.className='placeholder'; this.value=this.placeholder||this.getAttribute('placeholder'); } } element.onblur() } }/* 表單 */
/* 是否已填寫表單內容驗證 */function isFilled(field){ if(field.value.replace(' ','').length==0) return false; var placeholder=field.placeholder||field.getAttribute('placeholder'); return(field.value!=placeholder);}/* 表單 */
/* 是否是否為郵箱地址 */function isEmail(field){ return(field.value.indexOf("@")!=-1&&field.value.indexOf(".")!=-1);}/* 表單 */
/* 驗證 */function validationForm(whichform){ for(var i=0;i<whichform.length;i++){ var element=whichform.elements[i]; if(element.required=='required'){ if(!isFilled(element)){ alert("Please fill in the "+element.name+" field."); return false; } } if(element.type=='email'){ console.log('not email address!'); if(!isEmail(element)){ alert("The "+element.name+" field must be a valid email address."); console.log('not email address!'); return false; } } } return true; }/* 表單-Ajax */
/*return XMLHttpRequest*/function getHTTPObject(){ if(typeof XMLHttpRequest=="undefined") XMLHttpRquest=function(){ try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch(e){} try{return new ActiveXObject("Msxml2.XMLHTTP");} catch(e){} } return new XMLHttpRequest(); }/* 表單-Ajax */
/*顯示加載圖片*/function displayAjaxLoading(element){ while(element.hasChildNodes()){ element.removeChild(element.lastChild); } var content=document.createElement("img"); content.setAttribute("src","images/loading.gif"); content.setAttribute("width","50px"); content.setAttribute("alt","Loading....."); element.appendChild(content); }/* 表單-Ajax */
/*Ajax提交表單函數*/function submitFormWithAjax(whichform,thetarget){ var request=getHTTPObject(); if(!request){return false;} displayAjaxLoading(thetarget); var dataParts=[]; var element; for(var i=0;i<whichform.elements.length;i++){ element=whichform.elements[i]; dataParts[i]=element.name+'='+encodeURIComponent(element.value); } var data=dataParts.join('&'); request.open('POST',whichform.getAttribute("action"),true); request.setRequestHeader("content-type","application/x-www-form-urlencoded"); request.onreadystatechange=function(){ if(request.readyState==4){ if(request.status==200||request.status==0){ var matches=request.responseText.match(/<article>([\s\S]+)<\/article>/); if(matches.length>0){ thetarget.innerHTML=matches[1]; }else{ thetarget.innerHTML='<p>Oops, there was an error. Sorry.</p>'; } }else{ thetarget.innerHTML='<p>'+request.statusText+'</p>'; } } } request.send(data); return true;}
/* 表單準備函數 */
function prepareForms(){ for(var i=0;i<document.forms.length;i++){ var thisform=document.forms[i]; resetFields(thisform); thisform.οnsubmit=function(){ if(!validationForm(this)) return false; var article=document.getElementsByTagName('article')[0]; if(submitFormWithAjax(this,article)) return false; return true; } }} addLoadEvent(highlightPage);addLoadEvent(prepareSlideshow); addLoadEvent(prepareInternalnav); addLoadEvent(preparePlaceholder);addLoadEvent(prepareGallery); addLoadEvent(stripeTables);addLoadEvent(highlightRows);addLoadEvent(displayAbbreviations);addLoadEvent(focusLabels);addLoadEvent(prepareForms);