Определение центра клиентской области

Тема в разделе "Другие языки", создана пользователем Ratko, 2 апр 2009.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. Ratko

    Ratko Постоялец

    Регистр.:
    13 сен 2008
    Сообщения:
    92
    Симпатии:
    21
    мне нужно выводить div в центр экрана. В диве img, src которого меняется. Из каких свойств элементов document или window можна вычислить середину экрана?
     
  2. PHP_Master

    PHP_Master

    Регистр.:
    3 фев 2008
    Сообщения:
    2.647
    Симпатии:
    590
    http://alexmuz.blogspot.com/2007/09/blog-post_12.html
    Делишь на 2 и получаешь центр.
     
  3. Ratko

    Ratko Постоялец

    Регистр.:
    13 сен 2008
    Сообщения:
    92
    Симпатии:
    21
    Код:
    function OpenPhoto (ph) {
    	if (ph == 1) {document.getElementById('xxxphoto').src='./photos/'+xxxphoto1+'.jpg';}
    	if (ph == 2) {document.getElementById('xxxphoto').src='./photos/'+xxxphoto2+'.jpg';}
    	if (ph == 3) {document.getElementById('xxxphoto').src='./photos/'+xxxphoto3+'.jpg';}
    	document.getElementById('mess').style.visibility='visible';
    	document.getElementById('mess').style.top= getClientHeight()/2;
    }
    
    У мня страница занимает несколько экранов. Отступ происходит от начала документа, а не от начала экрана, и пользователю гичего не видно. Тут нужно учесть насколько проскролен документ, и прибавить к середине видимой области. Я никак немогу это свойство определить ((
     
  4. PHP_Master

    PHP_Master

    Регистр.:
    3 фев 2008
    Сообщения:
    2.647
    Симпатии:
    590
    document.scrollTop
    document.scrollLeft

    Только погугли по поводу кроссбраузерности.
     
  5. zardoz

    zardoz Постоялец

    Регистр.:
    6 май 2008
    Сообщения:
    84
    Симпатии:
    59
    можно прописать свойство для div
    top:expression((document.documentElement.scrollTop + screen.height/2 - 100) + 'px');
    left:expression((document.documentElement.scrollLeft + screen.width/2 - 100) + 'px');

    работает в opera и ff, на счет ie не знаю
     
  6. Ratko

    Ratko Постоялец

    Регистр.:
    13 сен 2008
    Сообщения:
    92
    Симпатии:
    21
    нашел пару функций:

    Код:
    function getClientWidth() {  
    	return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
    }
    
    function getClientHeight() {  
    	return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
    }
    
    
    function getBodyScrollTop() {  
    	return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
    }
    
    function getBodyScrollLeft() {  
    	return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
    }
    
    
    function getClientCenterX() {
        return parseInt(getClientWidth()/2)+getBodyScrollLeft();
    }
    
    function getClientCenterY() {
        return parseInt(getClientHeight()/2)+getBodyScrollTop();
    }
    
    
    function BuyPhoto (ph) {
    	if (ph == 1) {document.getElementById('xxxphoto').src='./photos/'+xxxphoto1+'.jpg';}
    	if (ph == 2) {document.getElementById('xxxphoto').src='./photos/'+xxxphoto2+'.jpg';}
    	if (ph == 3) {document.getElementById('xxxphoto').src='./photos/'+xxxphoto3+'.jpg';}
    	document.getElementById('mess').style.visibility='visible';
    	
    	document.getElementById('mess').style.top=getClientCenterY()-document.getElementById('mess').style.height/2;
    	document.getElementById('mess').style.left=getClientCenterX()-document.getElementById('mess').style.width/2;
    }
    
    Во всех браузерах работает одинаково, но не учитывает вocument.getElementById('mess').style.height/2 и document.getElementById('mess').style.width/2. От чего такое может быть?



    Спасибо, вопрос решен.
     
Статус темы:
Закрыта.