СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

Как растягивать блок по горизонтали/вертикали мышкой?

14.11.2021 Марат 72 0 js |
"растянуть мышкой" или как "растягивать блок по горизонтали/вертикали мышкой?".

Подробно о растягивании блока мышкой.

  1. Растягиваем блок по горизонтали мышкой.
  2. Растягиваем блок по вертикали мышкой.
  3. Скачать можно здесь

  1. Растягиваем блок по горизонтали мышкой.

    Давайте сделаем, чтобы блок растягивался по горизонтали с помощью мышки!

    Нам понадобится для растягивания... например тег div.

    Как вы знаете есть "3 способа css"... воспользуемся одним из них : Не будем делать отдельные стили добавим ему attribute style + background-color + width + height

    <div style="background-color: #dadada;width: 30px;height: 100px;">
    Здесь тест...
    </div>

    Смотрим, что у нас получилось - его и будем растягивать мышкой!

    Здесь тест...

    Добавим второй div - сделаем его линией справа... добавим "cursor: col-resize"

    + onmousedown

    + border

    + float

    <div style="cursor: col-resize; width: 1px;border-right: 1px solid black;height: 100%;float: right;" onmousedown="hook(event)"></div>

    Итого получим:

    <div style="background-color: #dadada;width: 30px;height: 100px;" >
    <div style="cursor: col-resize; width: 1px;border-right: 1px solid black;height: 100%;float: right;" onmousedown="hook(event)"></div>
    </div>

    Добавим сюда javascript, но поскольку... объяснение html заняло столько места, то объяснение скрипта, который будет растягивать блок по ширине... боюсь займет намного места больше! Поэтому его можно будет скачать в архиве!

    Готовый блок для растягивания мышкой по горизонтали:

    Для того, чтобы растянуть блок по ширине, наведите мышку на вертикальную линию справа нажмите левую кнопку мыши и потяните вправо...


  2. Растягиваем блок по вертикали мышкой.

    Скачиваем пример растягивания блока открываем файл в любом редакторе кода либо в простом блокноте и раскоментируйте три строки... выделено красным ниже:

    И после этого... ваш блок будет растягиваться и по вертикали!

    var nx = e.clientX - x;

    // var ny = e.clientY - y;

    if( nx < 40 ) nx = 40;
    // if( ny < 30 ) ny = 30;

    el.style.width = nx + 'px';

    // el.style.height = ny + 'px';

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Название скрипта :Как растягивать блок по горизонтали/вертикали мышкой?
Ссылка на скачивание : Все скрипты на одной странице
Теги :
растянуть мышкой
Как растягивать блок по горизонтали/вертикали мышкой?

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb