Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.03.2012, 17:01
Новичок на форуме
Отправить личное сообщение для escapade Посмотреть профиль Найти все сообщения от escapade
 
Регистрация: 01.03.2012
Сообщений: 5

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 = { ... };
Ответить с цитированием
  #2 (permalink)  
Старый 04.03.2012, 17:18
Новичок на форуме
Отправить личное сообщение для escapade Посмотреть профиль Найти все сообщения от escapade
 
Регистрация: 01.03.2012
Сообщений: 5

разобрался... тема закрыта)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
window.onresize db_test Internet Explorer 0 23.11.2011 16:44
Window.onresize и opera Metelitca Opera, Safari и др. 0 28.07.2011 10:21
Как вызвать через window.onresize функцию внутри prototype hwtech Общие вопросы Javascript 1 05.02.2009 13:33