Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
18 / 17 / 7
Регистрация: 26.04.2015
Сообщений: 217
1

Разместить div в определенных координатах адаптивно

10.07.2019, 22:11. Просмотров 594. Ответов 2
Метки нет (Все метки)

Есть массив координат arr, которые были вытянуты из б.д.
Есть 3 div'a, которые нужно разместить по этим координатам - my_div0, my_div1, my_div2.
И как бы всё работает, если бы не одно НО.
Если я просматриваю страницу на компе (разрешение экрана 1280х1024) то соответственно наполнение координатами (left,top) массива arr хоть и идёт относительно родителя #img и отображается после приведенным ниже кодом верно, то когда просматривать код в режиме F12 - Ctrl+Shift+M и делать эмуляцию экрана напр. Galaxy S5 (повёрнутому набок) - то естественно и логично, что все координаты жутко охреневают от моего корявого кода не соответствуют разрешению 640х360...
Вопрос: Как исправить средствами JS сию проблему?
Ссылка на приведенный ниже код в песочнице: размещение div по коорд.
Ссылка на то, как я получаю координаты - возможно проблема тут и надо как-то иначе наполнять массив? (которые позже запихиваются в массив arr (p.s.: смежная тема - изменение top, left блока по клику мышки)) : тык!



HTML5
1
2
3
4
5
6
7
8
9
10
<div id="outer">
    <div id="inner">
        <div id="img">
            <div id="my_div"></div>
            <div id="my_div0"></div>
            <div id="my_div1"></div>
            <div id="my_div2"></div>
        </div>
    </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
document.getElementById('img').onclick = function(e)
{
    let arr = ["100,100", "200,200", "500,500"];
    alert(arr.length);
    let my_div;
    let my_div_split,my_x,my_y;
    for(i=0;i<arr.length;i++)
    {
        my_div=$("#my_div"+i);
        my_div_split = arr[i].split(',');
        my_x=my_div_split[0];
        my_y=my_div_split[1];
        alert(my_x+'-'+my_y);
         
        my_div.css("position", "relative");
        my_div.css("left", my_x+"px"); 
        my_div.css("top", my_y+"px");   
        
        if(i==0)
        my_div.css("background-color", "green");
        if(i==1)
        my_div.css("background-color", "yellow");
        if(i==2)
        my_div.css("background-color", "red");
        my_div.css("opacity", 0.7);   
        my_div.css("width", 25);
        my_div.css("height", 75);
    }
};
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#outer {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    max-width: 90%;
    height: 100vh;
}
#inner{
    overflow-y: scroll;
    height: 45%;
    width: 100%;
    border: 2px solid blue;
    position: relative;
}
#img{
    background: url(http://thepiano.zzz.com.ua/images/test.jpg) no-repeat top center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    min-height: 2000px;
    opacity: 0.5;
}
#my_div{
    display: block;
    width: 15px;
    height: 75px;
    background-color: blue;
    opacity: 0.7;
    top: 0px;
    left: 0px;
    position: relative;
}
Добавлено через 3 часа 42 минуты
Пока единственное что пришло на ум, это пропорционально пересчитывать координаты:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
document.getElementById('img').onclick = function(e)
{
    let my_width = 916; //значение width div'a #img при котором записывались данные координат в массив (сохранить его где-либо когда создаю массив и потом подгружать значение в переменную
    let arr = ["100,100", "200,200", "500,500"];
    let img = document.getElementById("img"); 
    let img_width = img.clientWidth;  //получаю текущее значение width у #img
...
//сам код, что был
...
//пересчёт координат пропорционально текущему размеру от исходного с округлением к целому числу
   my_x=parseInt(my_div_split[0]*img.clientWidth/my_width); 
   my_y=parseInt(my_div_split[1]*img.clientWidth/my_width);
...
   my_div.css("width", parseInt(25*img.clientWidth/my_width));
   my_div.css("height", parseInt(75*img.clientWidth/my_width));
Оно работает, но мне кажется, что это выглядит как костыль, фича... Может есть варианты, более элегантные?

Добавлено через 5 часов 38 минут
Цитата Сообщение от Wolver Посмотреть сообщение
Оно работает, но...
Поспешил с выводами, для left идеально работает, а вот с top - большие проблемы(
Получается, что img.clientHeight - что в разрешении для ПК, что в эмуляции разрешения Galaxy S5 = 2000 px.
Из-за этого при пересчитывании координат для top - мои div'ы отображаются немного ниже, чем должны быть в действительности.
(p.s. я чуток накосячил из-за копипаста в добавленном в конце шапки поста коде, вот последние изменения, но всё равно проблема не решилась).
Для наглядности код, что ниже - залил на хостинг html-файлом (если надо, просто в песочнице jsfiddle.net немного неудобно переключаться с разных разрешений) - тык
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    #outer {
        text-align: center;
        width: 100%;
        margin: 0 auto;
        max-width: 90%;
        height: 100vh;
    }
    #inner{
        overflow-y: scroll;
        height: 45%;
        width: 100%;
        border: 2px solid blue;
        position: relative;
    }
    #img{
        background: url(./images/We_are_the_Champions.jpg) no-repeat top center;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
        min-height: 2000px;
        opacity: 0.5;
    }
    #my_div{
        display: block;
        width: 15px;
        height: 75px;
        background-color: blue;
        opacity: 0.7;
        top: 0px;
        left: 0px;
        position: relative;
    }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="outer">
    <div id="inner">
        <div id="img">
            <!--div id="my_div"></div-->
            <div id="my_div0"></div>
            <div id="my_div1"></div>
            <div id="my_div2"></div>
        </div>
    </div>
</div>
</body>
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
document.getElementById('img').onclick = function(e)
    {
        let img = document.getElementById("img");
        let img_width = img.clientWidth; //для опреления значений 
        let img_height = img.clientHeight;
        let my_width = 1105; //явно указанные clientWidth и clientHeight для ПК разрешения (указать свои для тестирования)
        let my_height=2000; //нужны чтобы пропорционально уменьшить координаты при просмотре в Galaxy S5.
        let arr = ["274,247", "312,238", "361,234"]; //прописал явно после 3-х кликов по первым 3-м точкам на фоновой картинке,
        //при разрежении 1105х2000, после просматривал при разрешении Galaxy S5 (F12 -> Ctrl+Shift+M в Хроме)
        
 
        let testx = e.offsetX==undefined?e.layerX:e.offsetX;
        let testy = e.offsetY==undefined?e.layerY:e.offsetY;
        console.log(testx +'-'+ testy);
        alert("clientWidth= "+img_width+", clientHeight= "+img_height+", testx= "+testx+", testy= "+testy);
        let my_div;
        let my_div_split,my_x,my_y;
        for(i=0;i<arr.length;i++)
        {
            my_div=$("#my_div"+i);
            my_div_split = arr[i].split(',');
            my_x=parseInt(my_div_split[0]*img.clientWidth/my_width);
            my_y=parseInt(my_div_split[1]*img.clientHeight/my_height);
            // alert(my_x+'-'+my_y);
 
            my_div.css("position", "absolute");
            my_div.css("left", my_x+"px");
            my_div.css("top", my_y+"px");
 
            if(i==0)
                my_div.css("background-color", "green");
            if(i==1)
                my_div.css("background-color", "yellow");
            if(i==2)
                my_div.css("background-color", "red");
            my_div.css("opacity", 0.7);
            my_div.css("width", parseInt(15*img.clientWidth/my_width));
            my_div.css("height", parseInt(75*img.clientHeight/my_height));
        }
    };
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
10.07.2019, 22:11
Ответы с готовыми решениями:

Как растянуть основной div до футера и разместить текст ровно центру этого div?
Всем привет, решил попробовать создать простейший резиновый сайт и чтобы футер был привязан внизу,...

Вывод в определённых координатах
Есть у меня в оформлении сайта вот такие строки: wp_title( '|', true, 'right' ); bloginfo(...

Нарисовать точку в определенных координатах
qt нарисовать точку в определенных координатах.

Вывести окно в определенных координатах
вот есть окно. я хочу чтобы по нажатию кнопки1 окно открылось над текущим, по нажатию второй...

2
18 / 17 / 7
Регистрация: 26.04.2015
Сообщений: 217
12.07.2019, 22:38  [ТС] 2
апчик тему!
0
657 / 629 / 333
Регистрация: 26.04.2014
Сообщений: 2,102
18.07.2019, 22:41 3
Определение разрешения экрана на JavaScript
1. screen.width. Определяет ширину экрана (монитора).
2. screen.height. Определяет высоту экрана (монитора).
3. document.body.clientWidth. Определяет ширину браузера.
4. document.body.clientHeight. Определяет высоту браузера.

Добавлено через 41 секунду
И рассчитывай изходя из этого
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.07.2019, 22:41

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Разместить маленькие картинки на большое изображение по координатах
Подскажите пожалуйсте как реализовать следующие: Есть url картинок в базе данных (размер картинок,...

Отрисовка изображения в в определенных координатах на PictureBox
Всем доброго времени суток. Такая вот делема: на имеющийся на форме picturebox необходимо...

Прекращение действия кода в определённых координатах x и y
Добрый вечер! Подскажите вот у меня код перетаскивания объекта ...

Отобразить png в определенных координатах TImage
Подргужается пнг-картинка (с прозрачностью), нужно её нарисовать на Image так чтобы её верхний...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.