Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как организовать скрытие блока при уменьшении окна? (https://javascript.ru/forum/events/25656-kak-organizovat-skrytie-bloka-pri-umenshenii-okna.html)

tempofnick 11.02.2012 22:02

Как организовать скрытие блока при уменьшении окна?
 
Пример - google. ru/nwshp?ned=ru

<style  type="text/css">
html, body {height: 100%;}
.wrap {
width:100%;
min-width:1000px;
min-height:100%;
margin:0;
padding:0;
overflow-x:hidden;
}
   .outer {
   margin:0 200px 0 200px;
   zoom:1;
   }
   .outer:after {
   content:'';
   clear:both;
   display:block;
   overflow:hidden;
   height:0;
   }
       .boxCL {
       float:left;
       width:100%;
       zoom:1;
       }
       
           .centerCol {
           float:right;
           width:100%;
           zoom:1;
           }
           .leftCol {
           background:#FFFFCC;
           float:left;
           width:160px;
           padding:20px;
           position:relative;
           margin-left:-200px;
           zoom:1;
           }
       .rightCol {
       background:#CCFFFF;
       float:right;
       width:160px;
       padding:20px;
       position:relative;
       margin-right:-200px;
       zoom:1;
       }
</style>

<body>
<div class="wrap">
   <div class="outer">
       <div class="boxCL">
           <div class="centerCol">меню</div>
           <div class="leftCol">контент</div>
       </div>
       <div class="rightCol">скрыть если окно меньше 900px</div>
   </div>
</div>
</body>

tempofnick 12.02.2012 00:32

Решил проблему сам


<script type="text/javascript">
var width, height; 
var IE=(navigator.userAgent.indexOf('MSIE')!=-1) 
function resizeElement() { 
    if(window.innerWidth) 
        width=window.innerWidth; 
    else if((document.body)&&(document.body.clientWidth)) 
        width=document.body.clientWidth; 
    if(window.innerHeight) 
        height=window.innerHeight; 
    else if((document.body)&&(document.body.clientHeight)) 
        height=document.body.clientHeight; 
    if(IE) 
    { 
        if(document.documentElement&&document.documentElement.clientHeight&&document.documentElement.clientWidth)
        { 
            width=document.documentElement.clientWidth; 
            height=document.documentElement.clientHeight; 
        } 
    } 
	
    var element=document.getElementById('rightCol'); 
	var elementw=document.getElementById('outer');
    width=(width>900)?"block":"none"; 
    widthz=(width=="block")?"0 200px 0 200px":"0 0 0 200px"; 
     
	 element.style.display=width;
     elementw.style.margin=widthz;
} 
window.onload=resizeElement;
</script>
		</head><body onresize="resizeElement()">
<div class="wrap">
    <div id="outer" class="outer">
	
        <div class="boxCL">
            <div class="centerCol">меню</div>
            <div class="leftCol">контент</div>
        </div>
		
        <div id="rightCol" class="rightCol">скрыть если окно меньше 900px</div>
    </div>
</div>

</body></html>


Часовой пояс GMT +3, время: 18:58.