Подскажите пожалуйста как и где прикрутить обработку события onresize что бы происходило тоже самое, что и при загрузке страницы, но при изменении размеров окна (var w = getClientWidth();
setContentWidth(w)
код
window.onload = function() {
generateHtml();
var w = getClientWidth();
setContentWidth(w);
};
function generateHtml(){
var headerDiv = document.createElement('div');
headerDiv.innerHTML = 'Title/Header of Lane';
headerDiv.id='header';
headerDiv.className = 'header';
var contentDiv = document.createElement('div');
contentDiv.id = 'content';
contentDiv.className = 'content';
var list = document.createElement('ul');
list.id = 'list';
list.className = 'list';
var footerDiv = document.createElement('div');
footerDiv.id = 'footer';
footerDiv.className = 'footer';
var clearfixDiv = document.createElement('div');
clearfixDiv.className = 'clearfix';
var wrapper = document.getElementsByTagName('body')[0];
wrapper.appendChild(headerDiv);
wrapper.appendChild(contentDiv);
contentDiv.appendChild(list);
wrapper.appendChild(footerDiv);
for(var i=0; i<data.length; i++){
var listItem = document.createElement('li');
listItem.id = "listItem"+i;
listItem.className = 'listItem';
list.appendChild(listItem);
var headRowDivWithOneSpan = document.createElement('div');
headRowDivWithOneSpan.className = 'headRowDivWithOneSpan';
var headRowDivWithThreeSpan = document.createElement('div');
headRowDivWithThreeSpan.className = 'headRowDivWithThreeSpan';
listItem.appendChild(headRowDivWithOneSpan);
listItem.appendChild(headRowDivWithThreeSpan);
var sp = document.createElement('span');
headRowDivWithOneSpan.appendChild(sp).innerHTML = data[i].name;
for(var l=0;l<3;l++){
var sp = document.createElement('span');
headRowDivWithThreeSpan.appendChild(sp).innerHTML = data[i].column[l].label;
}
for(var j=0;j<data[i].row.length;j++){
if(j < 12){
var rowDiv1 = document.createElement('div');
rowDiv1.className = 'rowDiv1';
var rowDiv2 = document.createElement('div');
rowDiv2.className = 'rowDiv2';
var sp = document.createElement('span');
rowDiv1.appendChild(sp).innerHTML = data[i].row[j].name;
listItem.appendChild(rowDiv1);
var sp1 = document.createElement('span');
rowDiv2.appendChild(sp1).innerHTML = data[i].row[j].price;
var sp2 = document.createElement('span');
if(data[i].row[j].change > 0)
sp2.className = 'changeSpanGreen';
else
sp2.className = 'changeSpanRed';
rowDiv2.appendChild(sp2).innerHTML = data[i].row[j].change;
var sp3 = document.createElement('span');
if(parseFloat(data[i].row[j].percentChange,10) > 0)
sp3.className = 'percentChangeSpanGreen';
else
sp3.className = 'percentChangeSpanRed';
rowDiv2.appendChild(sp3).innerHTML = data[i].row[j].percentChange;
listItem.appendChild(rowDiv2);
}
}
}
contentDiv.appendChild(clearfixDiv);
}
function getClientWidth(){
var width=(window.innerWidth)?window.innerWidth:
((document.all)?document.body.offsetWidth:null);
return width;
}
function setContentWidth(width){
var listItemsArray = document.getElementsByClassName('listItem');
for (i=0; i< data.length; i++){
if(width > 1264){
listItemsArray[i].style.width = width/3 - 41 + 'px';
}
if(width <= 1264){
listItemsArray[i].style.width = width/2 - 41 + 'px';
}
if(width <= 673){
listItemsArray[i].style.width = width - 41 +'px';
}
if(width <= 357){
listItemsArray[i].style.width = 317 +'px';
}
}
}
var data = { ... };