Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Изменение width в EI  [new]
JDS
Member

Откуда:
Сообщений: 690
Чистый js. IE11.
Пробую ресайзить элемент DIV на странице с помощью js:
this.myelement.style.width = newWidth

Нифига. В хроме и фоксе - нормально.
В EI11 получается менять ширину только через изменение minWidth
this.myelement.style.minWidth= newWidth

Но если minWidth реально нужен для ограничения мин. ширины, то придется изголяться с сохранением самого начального minWidth.

В общем вопрос как по-человечески менять ширину в IE?
23 окт 20, 19:47    [22219779]     Ответить | Цитировать Сообщить модератору
 Re: Изменение width в EI  [new]
fkthat
Member

Откуда:
Сообщений: 3921
JDS
В общем вопрос как по-человечески менять ширину в IE?

Пользоваться человеческим браузером. В десятке IE, по-моему, уже даже отключен изначально.

автор
Microsoft is ending support for Internet Explorer 11 on November 30
23 окт 20, 23:17    [22219895]     Ответить | Цитировать Сообщить модератору
 Re: Изменение width в EI  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 28166
JDS,

всё работает, вот пример:

<!doctype html>
<html>
  <head></head>
  <body>
    <div id="myelement"></div>
    <script>
      var myelement = document.getElementById('myelement');

      myelement.style.backgroundColor = 'gray';
      myelement.style.height = '300px';
      myelement.style.width = '200px';
    </script>
  </body>
</html>

https://plnkr.co/edit/IQ61ki9bot3Xvqtt

Сообщение было отредактировано: 24 окт 20, 15:39
24 окт 20, 15:41    [22220058]     Ответить | Цитировать Сообщить модератору
 Re: Изменение width в EI  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 28166


К сообщению приложен файл. Размер - 86Kb
24 окт 20, 15:44    [22220060]     Ответить | Цитировать Сообщить модератору
 Re: Изменение width в EI  [new]
JDS
Member

Откуда:
Сообщений: 690
skyANA
JDS,
всё работает, вот пример:...

Действительно.
Посмотрел на этом примере, здесь именно ресайз.
http://jsfiddle.net/3jMQD
Но работает только если в css position: absolute, а если relative, то не работает, если выставить absolute, то ломается текущая верстка.

Сообщение было отредактировано: 24 окт 20, 22:59
24 окт 20, 23:03    [22220222]     Ответить | Цитировать Сообщить модератору
 Re: Изменение width в EI  [new]
skyANA
Member

Откуда: Зеленоград
Сообщений: 28166
JDS,

и как вы свой пример смотрели в IE11, если jsfiddle его не поддерживает?
24 окт 20, 23:08    [22220227]     Ответить | Цитировать Сообщить модератору
 Re: Изменение width в EI  [new]
JDS
Member

Откуда:
Сообщений: 690
Это он на сайте не поддерживает, а отдельно вроде работает:
index.html:
+
<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="frame">
    <div class="wind">
      <div class="header"></div>
      <div class="view">  
        <div class="content">
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
          11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111<br>
        </div>
        <div class="scroll"></div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
<script src="resize.js"></script>
</body>
</html>

style.css:
+
.frame {
  position: absolute;
  left: 100px;
  top: 120px;
  height: 200px; 
  width: 300px;  
  border: 1px solid black; 
  padding: 3px; 
}

.wind {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid gray;  
}

.header {
  position: absolute;
  top: 0;
  background: red;
  height: 20px; 
  width: 100%;
}

.footer {
  position: absolute;
  bottom: 0;
  background: green; 
  height: 20px; 
  width: 100%;
}

.view {
  position: absolute;
  top: 20px;
  bottom: 20px;
  background: blue;
  width: 100%;
  overflow: hidden;
}

.scroll {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10px;
  background: brown;
}

.content {
  user-select: none;
  position: absolute;
  top: 0;
  height: 
  background: yellow;
  width: 100%;
}

.resizable { 
  background: cyan; 
  position: relative;
}

.resizer { 
  width: 10px; 
  height: 10px; 
  background: blue; 
  position:absolute; 
  right: 0; 
  bottom: 0; 
  cursor: se-resize;
}

resize.js:
+
var p = document.querySelector('.frame');

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);    
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
24 окт 20, 23:11    [22220229]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить