Code Study on left and right bay windows

Source: Internet
Author: User
var browser={    ie6:function(){        return((window.XMLHttpRequest==undefined)&&(ActiveXObject!=undefined))    },    getWindow:function(){        var myHeight=0;        var myWidth=0;        if(typeof(window.innerWidth)==‘number‘){            myHeight=window.innerHeight;            myWidth=window.innerWidth        }else if(document.documentElement){            myHeight=document.documentElement.clientHeight;            myWidth=document.documentElement.clientWidth        }else if(document.body){            myHeight=document.body.clientHeight;            myWidth=document.body.clientWidth        }        return{‘height‘:myHeight,‘width‘:myWidth}    },    getScroll:function(){        var myHeight=0;        var myWidth=0;        if(typeof(window.pageYOffset)==‘number‘){            myHeight=window.pageYOffset;            myWidth=window.pageXOffset        }else if(document.documentElement){            myHeight=document.documentElement.scrollTop;            myWidth=document.documentElement.scrollLeft        }else if(document.body){            myHeight=document.body.scrollTop;            myWidth=document.body.scrollLeft        }        return{‘height‘:myHeight,‘width‘:myWidth}    },    getDocWidth:function(D){        if(!D)            var D=document;        return Math.max(Math.max(D.body.scrollWidth,D.documentElement.scrollWidth),Math.max(D.body.offsetWidth,D.documentElement.offsetWidth),Math.max(D.body.clientWidth,D.documentElement.clientWidth))    },    getDocHeight:function(D){        if(!D)            var D=document;        return Math.max(Math.max(D.body.scrollHeight,D.documentElement.scrollHeight),Math.max(D.body.offsetHeight,D.documentElement.offsetHeight),Math.max(D.body.clientHeight,D.documentElement.clientHeight))    }};

 


In the browser object:
IE6: activexobject is the identifier of the IE browser, and window. XMLHttpRequest is the method used to create the XMLHTTPRequest object before IE7. ie6.
Getwindow: obtains the width and height of the browser, and the innerwidthis the netscape. the browser can access the width and height of the browser. The document.doc umentelement is the root node of the document and also the path for Firefox to obtain the width and height. Document. body is the sub-node of the document body and also a way for Google browsers to obtain the width and height. The three types of judgments are compatible with the mainstream.
Getscroll: the wide umentelement is the root node of the document and can be obtained by Firefox. body is the sub-node of the document body and also a way for Google browsers to obtain the width and height. The three types of judgments are compatible with the mainstream.
Getdocwidth: obtains the document width. It is determined by determining the maximum width and height of scrollwidth, offsetwidth, and clientwidth under the documentelement and body nodes.
Getdocheight: obtains the document height. It is determined by determining the maximum width and height of scrollwidth, offsetwidth, and clientwidth under the documentelement and body nodes.

var dom={    ID:function(id){        var type=typeof(id);        if(type==‘object‘)            return id;        if(type==‘string‘)            return document.getElementById(id);        return null    },    insertHtml:function(html){        var frag=document.createDocumentFragment();        var div=document.createElement("div");        div.innerHTML=html;        for(var i=0,ii=div.childNodes.length;i<ii;i++){            frag.appendChild(div.childNodes[i])        }        document.body.insertBefore(frag,document.body.firstChild)    }};
 

In the DOM object:

ID: Get the ID of the object

Inserthtml: insert the HTML action, enter the HTML code, and append the content to be added after the body

var myEvent={    add:function(element,type,handler){        var ele=dom.ID(element);        if(!ele)            return;        if(ele.addEventListener)            ele.addEventListener(type,handler,false);        else if(ele.attachEvent)            ele.attachEvent("on"+type,handler);        else ele["on"+type]=handler    },    remove:function(element,type,handler){        var ele=dom.ID(element);        if(!ele)            return;        if(ele.removeEventListener)            ele.removeEventListener(type,handler,false);        else if(ele.detachEvent)            ele.detachEvent("on"+type,handler);        else ele["on"+type]=null    }};

Myevent object:

Add: bind a listener event, addeventlistener and attachevent. The former is the W3C JS binding event standard, and the latter is the JS binding event standard of IE browser. If both are not consistent with the old browser type, use the traditional binding method.

Remove: unbind listening events. removeeventlistener and detachevent are W3C JS unbinding event standards, and IE browser JS unbinding event standards. If both are not met, use the traditional binding method.

 

var position={    rightCenter:function(id){        var id=dom.ID(id);        var ie6=browser.ie6();        var win=browser.getWindow();        var ele={            ‘height‘:id.clientHeight,            ‘width‘:id.clientWidth        };        if(ie6){            var scrollBar=browser.getScroll()        }else{            var scrollBar={                ‘height‘:0,                ‘width‘:0            };            id.style.position=‘fixed‘        }        ele.top=parseInt((win.height-ele.height)/2+scrollBar.height);        id.style.top=ele.top+‘px‘;        id.style.right=‘3px‘    },    floatRightCenter:function(id){        position.rightCenter(id);        var fun=function(){            position.rightCenter(id)        };        if(browser.ie6()){            myEvent.add(window,‘scroll‘,fun);            myEvent.add(window,‘resize‘,fun)        }else{            myEvent.add(window,‘resize‘,fun)        }    },    leftCenter:function(id){        var id=dom.ID(id);        var ie6=browser.ie6();        var win=browser.getWindow();        var ele={            ‘height‘:id.clientHeight,            ‘width‘:id.clientWidth        };        if(ie6){            var scrollBar=browser.getScroll()        }else{            var scrollBar={                ‘height‘:0,                ‘width‘:0            };            id.style.position=‘fixed‘        }        ele.top=parseInt((win.height-ele.height)/2+scrollBar.height);        id.style.top=ele.top+‘px‘;        id.style.left=‘3px‘    },    floatLeftCenter:function(id){        position.leftCenter(id);        var fun=function(){            position.leftCenter(id)        };        if(browser.ie6()){            myEvent.add(window,‘scroll‘,fun);            myEvent.add(window,‘resize‘,fun)        }else{            myEvent.add(window,‘resize‘,fun)        }    }};

 

Position object:
Rightcenter: right-side window, which is bound with parameters of the right-side window. Currently, the window is located in the center of the browser.
Floatrightcenter: The rightcenter is triggered when the window is rolled or scaled down.
Leftcenter: left-side window, which is bound with parameters of the left-side window. Currently, the window is located in the center of the browser.
Floatleftcenter: The leftcenter is triggered when the window is rolled or scaled.
Function ad_left () {var HTML; html = '<Div id = "ad_left" style = "position: absolute; width: 130px; Height: 300px; Z-index: 10001 "> <a style =" position: absolute; top:-15px; left: 0; "href =" javascript: void (0); "onclick =" document. getelementbyid (\ 'ad _ left \'). style. display = \ 'None \ '"> close </a> <a href =" http://www.xwcms.net ">  </a> </div> '; dom. inserthtml (HTML); position. floatleftcenter ('ad _ left');} function ad_right () {var HTML; html = '<Div id = "ad_right" style = "position: absolute; width: 130px; height: 300px; Z-index: 10001 "> <a style =" position: absolute; top:-15px; Right: 0; "href =" javascript: void (0 ); "onclick =" document. getelementbyid (\ 'ad _ right \'). style. display = \ 'None \ '"> close </a> <a href =" http://www.xwcms.net ">  </a> </div> '; dom. inserthtml (HTML); position. floatrightcenter ('ad _ right');} myevent. add (window, 'load', ad_left); myevent. add (window, 'load', ad_right );
 

Ad_left: All content parameters and operations of the Left ad.

Ad_right: All content parameters and operations of the right ad.

The ad_left and ad_right methods are called.

 
 
 

 

 








  
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.