Web Master Assistant: Universal Web page template automatically reconstructs sites for all screens without subdomains or media specific stylesheets.


Home \|Send Mail \|About Us \|Site Map

Web Master Assistant: Universal Web page template automatically reconstructs sites for all screens without subdomains or media specific stylesheets.

HTML5, CSS, Javascript - Web page TEMPLATE automatically reconstructs sites for all screen resolutions without using subdomains or media specific stylesheets.

One Web: "Forget the mobile web: One site should work for all. Making two or even three mediocre sites, designing and user-testing them, then trying to keep them in sync is a waste of time and money. Concentrate on preserving the 'One Web': that is, make one really good site that works across all devices". Bruce Lawson

How to make a site work well on all devices with Internet access? Here's one possible solution to this difficult problem. This Web page template automatically reconstructs sites for all screens without subdomains or media specific stylesheets. It works properly for mobile devices with screen widths of only 240 pixels to the resolutions present on all desktop displays using universally available features. We are going use accessible to all browsers CSS float Property. Unfortunately CSS float has disadvantages that shoud be fixed on the fly with a short script:

Page with standard CSS float Property. Free space in the browser window is not used.

TAMPLATE Page. Blocks occupy 100% of the browser window.
	Start	Step 1	Step 2

On the proposed template pages use simple scripts that control the coating process to release a screen space by increasing to 100% of the width of the blocks. Also scripts carry out events handling resize the browser window and Refresh.

Open Demo Page
Show HTML Basic Code
Show CSS Code
Show JS Source Code


var WorkWidth = 0;
var hb, lb, cb, rb,  infb, infb2;
var float_cb, float_rb;

//Embed video
var videoplace1;
var videoembed;
var vk = 0.0;

// iframe video
var videoplace2;
var myiframe;
var ik = 0.0;

function my_ini()
{
           hb = document.getElementById('page_header');
           lb  = document.getElementById('content_left_block'); 
           cb  = document.getElementById('conent_center_block');  
           rb  = document.getElementById('content_right_block'); 
           infb = document.getElementById('my_info_block'); 
           infb2 = document.getElementById('my_2info_block'); 
           float_cb = false; float_rb = false; 
           lb.style.height =  "auto";
           cb.style.height = "auto";

// EMBED video
     videoplace1 = document.getElementById('video_place1');
     videoembed = document.getElementById('video_embed');

// iframe video
     videoplace2 = document.getElementById('video_place2');
     myiframe = document.getElementById('my_iframe');

//Get video source proportion
    vk = parseInt(videoembed.style.height)/parseInt(videoembed.style.width);
    ik = parseInt(myiframe.style.height)/parseInt(myiframe.style.width);
          
   my_f();   

// show video after resize
    videoembed.style.display="block";
    myiframe.style.display="block";

}

// Resize video
function frs()
{
var h = 0;

// Embed video
    videoembed.style.width   = videoplace1.clientWidth.toString() + "px";
    h = Math.floor(videoplace1.clientWidth * vk);
    videoembed.style.height = h.toString() + "px";

// iframe video
    myiframe.style.width   = videoplace2.clientWidth.toString() + "px";
    h = Math.floor(videoplace2.clientWidth * ik);
    myiframe.style.height = h.toString() + "px";
}


function my_f()
{
// Maximized 
          if(((screen.width - hb.clientWidth) < 20) || ( hb.clientWidth >  WorkWidth ))
          {
                 lb.setAttribute("class", "leftblock0");
                 cb.setAttribute("class", "centrblock0");
                 rb.setAttribute("class", "rightblock0");
          }
// Removes the width's accumulated errors for refreshing
          if(hb.clientWidth <  500) {
                  lb.setAttribute("class", "leftblock2");
                  cb.setAttribute("class", "centrblock2");
                  rb.setAttribute("class", "rightblock2");
          }
// All anoter events
           if(rb.offsetTop > cb.offsetTop){ float_rb = true;}else{float_rb = false;}
           if(cb.offsetTop > lb.offsetTop){ float_cb = true;}else{float_cb = false;}
           
           if(!float_rb && !float_cb){rb.setAttribute("class", "rightblock0");cb.setAttribute("class", "centrblock0"); lb.setAttribute("class", "leftblock0");}
           if(float_rb && !float_cb){rb.setAttribute("class", "rightblock2");cb.setAttribute("class", "centrblock1"); lb.setAttribute("class", "leftblock1");}
           if(float_cb  && float_rb){rb.setAttribute("class", "rightblock2");cb.setAttribute("class", "centrblock2");lb.setAttribute("class", "leftblock2");}

// resize video
          frs();

// If float_cb = true, closing the remaining empty space under the left or the right to block
         lb.style.height =  "auto";
         cb.style.height = "auto";
         
// equalize the height of left and right blocks
           if(float_rb && !float_cb){  
                          if(lb.clientHeight <  cb.clientHeight)
                               lb.style.height = cb.clientHeight.toString() + "px";
                          else    
                              if(lb.clientHeight > cb.clientHeight)
                                   cb.style.height = lb.clientHeight.toString() + "px";
         }
          
          WorkWidth  =  hb.clientWidth;
          showdata();
}

function showdata()
{
      var s = "Maximized:"+  ((screen.width - hb.clientWidth) < 20) +  
                  ", Width=" +  WorkWidth  + 
                  ", l="  + lb.clientWidth + 
                  ", c=" + cb.clientWidth +
                  ", r=" + rb.clientWidth +  
                  " Height: " + "l="  + lb.clientHeight  + 
                  ", c=" + cb.clientHeight +
                  ", r=" + rb.clientHeight + 
                  " CSS: " + lb.getAttribute("class") +
                  ", " + cb.getAttribute("class") +
                  ", " + rb.getAttribute("class");
                  
     infb.innerHTML = s; 
     infb2.innerHTML = s;

}

Hide JS Source Code

Home \|Send Mail \|About Us \|Site Map