как сделать вилку if else на размер экрана юзера?
нужно,чтобы в зависимости от ширины окна браузера менялась ширина объекта #page по принципу: если размер такойто - применить к объекту #page такойто класс. и что бы это работало постоянно,реагируя на последующие изменения размеры окна браузера
|
vjuenf, или
<body onResize="func()"> или
window.onresize = function () { }
var wwidth=(window.innerWidth)?window.innerWidth:
((document.all)?document.body.offsetWidth:null);
var wheight=(window.innerHeight)?window.innerHeight:
((document.all)?document.body.offsetHeight:null);
switch (true) {
case (wwidth == 1000 && wheight == 1000): {}
case (...): {}
...
}
|
мне бы через if else...
можно более подробно,всё необходимое, т.к.я не довъехал.. |
vjuenf,
window.onresize = function() {
var wwidth=(window.innerWidth)?window.innerWidth:
((document.all)?document.body.offsetWidth:null),
page = document.getElementById("page");
if (wwidth == 1000) { page.style.width = 1000; }
else { if (wwidth == 2000) { page.style.width = 2000; }
else { ... } }
}
|
возможно,я туплю, но по моему онресайз - изменение размера,окна,а надо, что бы он менял размер не только при изменении размера окна, но и изначально корректировал размер, т.е. при загрузке сайта - прошёл вилку и при ресайзе тоже.
если не сложно - выложи фул для кода: <html> <head> <style> .page{ width:1100px; } </style> </head> <body> <div class="page"> много контента </div> </body> |
vjuenf,
<html>
<head>
<style>
#page{
width:1100px;
}
</style>
<script>
function resizebl() {
var wwidth=(window.innerWidth)?window.innerWidth:
((document.all)?document.body.offsetWidth:null),
page = document.getElementById("page");
switch (true) {
case wwidth == 1000: { page.style.width = 1000; }
case wwidth == 2000: { page.style.width = 2000; }
}
}
window.onresize = resizebl();
window.onload = resizebl();
</script>
</head>
<body>
<div id="page">
много контента
</div>
</body>
</html>
если конечно он правильно везде определяет размеры окна |
Если Вас это так бесит - не будете ли вы так любезны, рассказать, как выяснить ширину клиентской части?
|
Цитата:
w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)); |
эх,если бы мне,нубскому существу ещё объяснили все элементы метода, предложенного lord2kim? т.к. я интересуюсь не только конкретным случаем,но и вообще системой...
Ваше негодование вполне понятно, НО! 1)я нуб. можно сказать полный. 2)я впринципе не предполагал таких вещей. т.е. я знал,о боковых панелях, но того, что всё так сложно я не предполагал,т.к. не понимаю зачем вообще нужна ширина всего окна,если влияь можно только на клиентскую часть? |
мой мозг не понимает таких умных рассуждений. можно бытовыми словами и поподробнее?
а, да хотел спросить: 1)почему вместо класса page поставлен id? через document.getelementsbyclassname нельзя аналогично? 2)мне тяжеловато разбираться в case'ах, ядаже в заголовке просил через ifelse... как выглядит последний результат в ifelse? |
vjuenf,
<html>
<head>
<style>
#page{
width:1100px;
}
</style>
<script>
function resizebl() {
var wwidth=(window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
page = document.getElementById("page");
/*switch (true) {
case wwidth == 1000: { page.style.width = 1000; }
case wwidth == 2000: { page.style.width = 2000; }
}*/
if (wwidth == 1000) page.style.width = 1000;
if (wwidth == 2000) page.style.width = 2000;
}
window.onresize = resizebl();
window.onload = resizebl();
</script>
</head>
<body>
<div id="page">
много контента
</div>
</body>
</html>
если элемент 1, то проще использовать getElementById() если несколько, то можно уже и через getElementsByClassName() не забывая при этом реализовывать таковой метод для IE
// getElementsByClassName for IE
if (typeof document.getElementsByClassName == 'undefined') {
document.getElementsByClassName = function(classname) {
var all = document.all,
elements = [],
regexpr = new RegExp('\\b'+classname+'\\b','ig');
for(var x=0; x<all.length; x++) if (all[x].className)
if (all[x].className.search(regexpr)!=-1) elements[elements.length] = all[x];
return elements;
}
}
Цитата:
если не существует такового свойства, проверяем существует ли у объекта document свойство clientWidth (можно и без documentElement), то используем таковое для определения клиентской ширины если не существует и такового свойства, для определения клиентской ширины браузера используем свойство offsetWidth элемента body |
при использовании вашего кода firebug говорит, что page is null
я думаю,что это из-за того, что скрипт выполняется до загрузки дива "пэйдж"... кстати, а есть разница между getElement и getelement? регистр важен? |
ага,если воткнуть скрипт не в хед,а после дива Эпейдж" - при загрузке работает,но не работает при ресайзе((( какже быть?
|
vjuenf,
А плагин jQuery на сайте - у Вас есть ? |
Цитата:
убрать скобки PS: и читать учебник |
bes,
Спасибо, работает)) читать учебник хорошо,но учебник на этом сайте не содержит реальных или похожих на реальные примеры, поэтому мой нубский мозг не понимает как минимум половину смысла от тех или иных действий((( |
| Часовой пояс GMT +3, время: 09:09. |