https://www.daisakuikeda.org/es/assets/templates/diweb/scripts/dynamiclayout.js

1// - - - - - - - - - - - - - - - - - - - - -
2//
3// Title : Dynamic Resolution Dependent Layout Demo
4// Author : Kevin Hale
5// URL : http://particletree.com
6//
7// Description : This is a demonstration of a dynamic 
8// resolution dependent layout in action. Change your browser 
9// window size to see the layout respond to your changes. To 
10// preserve the separation of the presentation and behavior 
11// layers, this implementation delegates all the presentation 
12// details to external CSS stylesheets instead of changing 
13// each style property through JavaScript.
14//
15// Created : July 30, 2005
16// Modified : November 15, 2005
17//
18// - - - - - - - - - - - - - - - - - - - - -
19
20// getBrowserWidth is taken from The Man in Blue Resolution Dependent Layout Script
21// http://www.themaninblue.com/experiment/ResolutionLayout/
22	function getBrowserWidth(){
23		if (window.innerWidth){
24			return window.innerWidth;}	
25		else if (document.documentElement && document.documentElement.clientWidth != 0){
26			return document.documentElement.clientWidth;	}
27		else if (document.body){return document.body.clientWidth;}		
28			return 0;
29	}
30
31// dynamicLayout by Kevin Hale
32function dynamicLayout(){
33	var browserWidth = getBrowserWidth();
34
35	//Load Thin CSS Rules
36	if (browserWidth < 810){
37		changeLayout("thin");
38	}
39	//Load Wider CSS Rules
40	if (browserWidth >= 810){
41		changeLayout("wide");
42	}
43}
44
45// changeLayout is based on setActiveStyleSheet function by Paul Sowdon 
46// http://www.alistapart.com/articles/alternate/
47function changeLayout(description){
48   var i, a;
49   for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
50	if (description=="thin"){	   
51		if(a.getAttribute("title") == "wide"){a.disabled = true;}
52		else {a.disabled = false;}
53					}
54	else if (description=="wide"){
55	   	if(a.getAttribute("title") == "thin"){a.disabled = true;}
56		else {a.disabled = false;}
57
58		}
59   }
60}
61
62	//addEvent() by John Resig
63	function addEvent( obj, type, fn ){ 
64	   if (obj.addEventListener){ 
65	      obj.addEventListener( type, fn, false );
66	   }
67	   else if (obj.attachEvent){ 
68	      obj["e"+type+fn] = fn; 
69	      obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
70	      obj.attachEvent( "on"+type, obj[type+fn] ); 
71	   } 
72	} 
73	
74	//Run dynamicLayout function when page loads and when it resizes.
75	addEvent(window, 'load', dynamicLayout);
76	addEvent(window, 'resize', dynamicLayout);