window.onresize
Подскажите пожалуйста как и где прикрутить обработку события 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 = { ... }; |
разобрался... тема закрыта)
|
Часовой пояс GMT +3, время: 16:31. |