ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery
19 сообщений из 19, страница 1 из 1
JQuery
    #39911150
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
Есть галерея фотографий, при клике на ссылку подгружаются новые фотки в блок одинакового размера. в обработчике блок очищается, загружается новый html -контент. Но вот беда - если страницу проскроллить вниз, то при клике страница как бы обновляется и прокручивается вверх, плюс сам контент как бы дергается, пикселей 5-10 вправо.

Код:


Код: 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.
    $('body').on('click', '#pdpr', function (e) {
        e.preventDefault();
        var countphoto = parseInt($("#allim").attr("count"));

        var pagediv = parseInt($(this).attr("page"))-1;
        var page;
        if (pagediv * 9 < countphoto) {
            page = pagediv * 9 + 1;
        }
        else page = 0;
        var url = "/Registration/MyAlbum";
        var data = { page: page };
        
        $.post(url, data, function (response) {
          
        
            $('#galcontent').empty(); 
            $('#galcontent').append(response);
            $('#galcontent').fadeIn(800);
           
           
           
            stopLoadingAnimation();
        
        });
        startLoadingAnimation();
      
    });



Если же убрать из кода $('#galcontent').empty(); то все нормально, страница не дергается, не прокручивается, просто новый контент добавляется в контейнер ниже.
Как победить? Спасибо.
...
Рейтинг: 0 / 0
06.01.2020, 15:38
| Ответить | Цитировать | Написать  
JQuery
    #39911176
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.,

знать только jquery для нормального прогера мало, надо знать основы https://learn.javascript.ru/multi-insert
...
Рейтинг: 0 / 0
06.01.2020, 18:06
| Ответить | Цитировать | Написать  
JQuery
    #39911188
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя,

Переписал
Код: javascript
1.
2.
3.
var gal = document.getElementById('galcontent');
            gal.innerHTML = '';
            gal.insertAdjacentHTML('afterBegin', response);



Ничего не изменилось. Но если комментирую вторую строку, то все как надо, за исключением того, что старое содержимое не очищается, что естественно.
...
Рейтинг: 0 / 0
06.01.2020, 18:50
| Ответить | Цитировать | Написать  
JQuery
    #39911191
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.,

ну дак надо изучать основы

Код: javascript
1.
2.
var gal = document.getElementById('galcontent');
            gal.innerHTML =response;
...
Рейтинг: 0 / 0
06.01.2020, 18:58
| Ответить | Цитировать | Написать  
JQuery
    #39911195
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя,
все равно кидает вверх страницы.
...
Рейтинг: 0 / 0
06.01.2020, 19:09
| Ответить | Цитировать | Написать  
JQuery
    #39911206
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.
все равно кидает вверх страницы.
у тебя новый контент имеет такую еж высоту/ширину что и старый?
в какой элемент dom ты вставляешь новые данные?
...
Рейтинг: 0 / 0
06.01.2020, 19:51
| Ответить | Цитировать | Написать  
JQuery
    #39911284
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя,
Абсолютно такие же размеры. Проверил первым делом. Да там и нечему меняться - выводится девять превьюшек фото,3*3, при клике раскрывается большое. Все превью имеют один и тот же размер.

Новый контент выводится в блок #galcontent. Его размеры всегда 634*731. НУ единственно, что на последней странице галереи может высота меняться, если фото 6 или меньше, не девять.

Вот код view-шек (asp.net core)
MyAlbum:
Код: c#
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.
@model GrapeMarketCore.Models.PhotoVariety

@{

    Layout = "~/Views/Shared/_Layout.cshtml";
}
@await Component.InvokeAsync("AddVisit", "myalbum")
<div class="content_top">
    <h2>Фотогалерея</h2>
</div>
<div class="content">



    @if (Model != null)
    {
        
            @if (Model.Names.Count() == 0)
            {
                <p>нет изображений</p>
            }
            else
            {
               <div id="galcontent">
                    @Html.Partial("viewgalary", @Model)
                </div>
            }



    }


</div>

<img id="loadImg2" src="/ico/load2.gif" />





viewgalary:

Код: c#
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
@model GrapeMarketCore.Models.PhotoVariety

<div id="visualcount">
    @{
        Int32 countpage = (Int32)@ViewBag.CountPhoto / 9;
        if (((Int32)@ViewBag.CountPhoto % 9) > 0) { countpage++; }
        @for (Int32 i = 1; i < (countpage+1); i++)
        {
            <div id="pdpr" @if ((Int32)ViewBag.Page == i) { <text> class="pagedivcolor" </text>  } else { <text> class="pagediv" </text> }  page="@i"></div>
        }
    }
</div>
<div id="allim" count="@ViewBag.CountPhoto">
    @foreach (String name in Model.Names)
    {
        <img class="imagecl3" src="@name" variety="-1"  style = "cursor: pointer"/>
    }
</div>
<div id="dopblockphoto"> <a href="" id="morephotog" class="ss44"> <b>Еще фото </b> </a></div>
...
Рейтинг: 0 / 0
07.01.2020, 05:38
| Ответить | Цитировать | Написать  
JQuery
    #39911291
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.,

лучше выкладывать код из браузера, и css
...
Рейтинг: 0 / 0
07.01.2020, 09:22
| Ответить | Цитировать | Написать  
JQuery
    #39911294
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя,
Спасибо за попытку помочь!
Код: 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.
#galcontent {
    position: relative;
    margin: 10px auto;
    min-height: 5px;
    width: 634px;
}

#visualcount {
    position: relative;
    margin-bottom: 10px;
    width: 100%;
}


#allim {
    position: relative;
    clear: both;
    width: 100%;
}


#dopblockphoto {
    position: relative;
    font-size: 14px;
    height: 50px;
    text-align: right;
    line-height: 50px;
 
}
...
Рейтинг: 0 / 0
07.01.2020, 09:45
| Ответить | Цитировать | Написать  
JQuery
    #39911295
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
Напомню проблему -до ссылки "еще фото" нужно проскроллить ниже. При клике на нее, страница скроллится к верху, но все отрабатывается как надо (на фото вид после клика).
...
Рейтинг: 0 / 0
07.01.2020, 09:51
| Ответить | Цитировать | Написать  
JQuery
    #39911296
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.,

ну ты молодец...

я должен по картинке код разглядывать? а если поправить нада?
...
Рейтинг: 0 / 0
07.01.2020, 09:52
| Ответить | Цитировать | Написать  
JQuery
    #39911298
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя,

 
Код: html
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.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="/css/blog.css" type="text/css" rel="stylesheet" />
    <link href="/css/catalogstyle.css" type="text/css" rel="stylesheet" />
    <link href="/css/style.css" type="text/css" rel="stylesheet" />
    <link href="/css/style2.css" type="text/css" rel="stylesheet" />
    <link href="/css/style3.css" type="text/css" rel="stylesheet" />
   
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/MyGrapeScript.js"></script>
    <script src="/js/MyGrapeBlog.js"></script>
    <script src="/js/MyGrapeCommon.js"></script>
 
   


</head>
<body>
    <div class="mtc">

        <div id="newtop">
            <div id="toplogo">
              
            </div>
            <div id="topmenu">

                &emsp;&emsp;&emsp;<a class="ss3" href="/"><b>КАТАЛОГ</b></a> &emsp;
                &emsp;<a class="ss3" href="/Blog"><b>БЛОГ</b></a> &emsp;
                &emsp;<a class="ss3" href="/Registration/MyAlbum"><b>ФОТОАЛЬБОМ</b></a>&emsp;




            </div>
        </div>

        <div id="conteiner">

            <div id="content">
                
 
<div class="item_content_top">
    <h2>Фотогалерея</h2>
</div>
<div class="item_content">



                <div id="galcontent">
                    
<div id="visualcount">
            <div id="pdpr"  class="pagedivcolor"  page="1"></div>
            <div id="pdpr"  class="pagediv"  page="2"></div>
            <div id="pdpr"  class="pagediv"  page="3"></div>
            <div id="pdpr"  class="pagediv"  page="4"></div>
            <div id="pdpr"  class="pagediv"  page="5"></div>
            <div id="pdpr"  class="pagediv"  page="6"></div>
            <div id="pdpr"  class="pagediv"  page="7"></div>
            <div id="pdpr"  class="pagediv"  page="8"></div>
</div>
<div id="allim" count="69">
        <img class="imagecl3" src="\UserFiles\user\small\4bd32674-e4e1-4acf-a064-5add6074ba99DSC_9942-Pano.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\4de95c2f-88d9-4893-8120-e343ae72adfeIMG_20191118_130020.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\870b2038-7d63-4dd6-a37e-f4f341541d2eDSC_9880-Pano.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\825df676-6c40-488b-bed1-2c4c70464f3fIMG_20191026_104706.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\deb8de2e-5371-4986-9266-92a695cea6b92.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\7ad37c46-61a4-4baf-a4e0-db4983b8be591.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\b57e844f-a4f0-49c1-ace3-4fbd386207feDSC_9862.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\8973c2df-dbbb-4465-ac21-7658039779eeDSC_9856.jpg" variety="-1" style="cursor: pointer" />
        <img class="imagecl3" src="\UserFiles\user\small\92d0a8a6-0bb3-462d-8980-6991977aba90DSC_9870-Pano.jpg" variety="-1" style="cursor: pointer" />
</div>
<div id="dopblockphoto"> <a href="" id="morephotog" class="ss44"> <b>Еще фото </b> </a></div>

                </div>


</div>

<img id="loadImg2" src="/ico/load2.gif" />
       <img id="loadImg2" src="/ico/load2.gif" />
            </div>

            <div id="rightcolumn">

                <div id="auntcontent">
                    <form action="/Authorization/Aunt" method="post">
    <div class="registr"><b>Авторизация</b></div>

    <div class="registr"><input name="Name" type="text" class="txbc" autocomplete="off" /> </div>

    <div class="registr"><input name="Password" type="password" class="txbc" autocomplete="off" /></div>

    <div class="registr"><a class="ss2" href="/Registration/ForgotPassword">&#x417;&#x430;&#x431;&#x44B;&#x43B;&#x438; &#x43F;&#x430;&#x440;&#x43E;&#x43B;&#x44C;?</a></div>

    <div class="registr"><input type="submit" value="ВОЙТИ" class="addbutton" /> </div>


    <div class="registr"> <a class="ss2" href="/Registration">&#x420;&#x415;&#x413;&#x418;&#x421;&#x422;&#x420;&#x410;&#x426;&#x418;&#x42F;</a></div>

<input name="__RequestVerificationToken" type="hidden" value="CfDJ8GBelxs0r79HlF_rc8vQfXloddc1YkbsUTFsDppBSJHtwYjxDeqxv8EJxowpYVABwfJ3yIpcfr4uFgv-f97t6lebEqpSaRGWD6ugKFuku7p4TM8EIblWVJE9uVyjAJ3Gv6jegkW6sTIuT4EO-zMW7X4" /></form>


                </div>
                <div class="rightcontentcon">  <a class="ss44" href="/Main/SearchGrape"><b>Найти виноград по параметрам</b></a></div>
                <div class="item_righcontent_top"><h3><b>ПОСЛЕДНЕЕ В БЛОГЕ</b></a></h3></div>
                <div class="rightcontent">
                  
                    <div id="sellers">
                 

                    </div>

                </div>


            </div>

            <div id="z"></div>
        </div>



        <div id="footer">
            <b>
            
            </b>
        </div>
        <div id="mask"></div>
        <div class="boximage"></div>
        <div class="boxload"></div>
        <div class="boxmessage"></div>
    </div>
</body>
</html>

...
Рейтинг: 0 / 0
07.01.2020, 09:57
| Ответить | Цитировать | Написать  
JQuery
    #39911301
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.,

Код: html
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

это что за древности?
page="1" count="69" variety="-1" это что такое? понятно, что браузер скушает ещё и не такое, но я не хочу гадать.
есть специальный атрибут data-

Код: html
1.
<img class="imagecl3" src="\UserFiles\user\small\4bd32674-e4e1-4acf-a064-5add6074ba99DSC_9942-Pano.jpg" variety="-1" style="cursor: pointer" />

что за смесь?
class="imagecl3" и style="cursor: pointer"
а это что за ...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
           <div id="pdpr"  class="pagedivcolor"  page="1"></div>
            <div id="pdpr"  class="pagediv"  page="2"></div>
            <div id="pdpr"  class="pagediv"  page="3"></div>
            <div id="pdpr"  class="pagediv"  page="4"></div>
            <div id="pdpr"  class="pagediv"  page="5"></div>
            <div id="pdpr"  class="pagediv"  page="6"></div>
            <div id="pdpr"  class="pagediv"  page="7"></div>
            <div id="pdpr"  class="pagediv"  page="8"></div>

ты знаешь что такое id?

чтоб не прыгало задавай высоту <div id="allim">
...
Рейтинг: 0 / 0
07.01.2020, 10:15
| Ответить | Цитировать | Написать  
JQuery
    #39911303
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.,

для подготовки фоток для галереи можешь использовать
https://github.com/JonHappy/JonHappy.github.io
https://jonhappy.github.io/modal_menu/pic.html
...
Рейтинг: 0 / 0
07.01.2020, 10:24
| Ответить | Цитировать | Написать  
JQuery
    #39911305
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя
Алексей Шм.,


чтоб не прыгало задавай высоту <div id="allim">


да, действительно, если задаю высоту в 630px (высота из 3 строк фото), то все стабильно. Но тут неудобно, что если миниатюра всего одна, то ссылка будет в низу при пустом allim. Если задаю min-height:210 (Высота однйо строки), то прыгает.


 

вадя
Алексей Шм.,



это что за древности?

а это что за ...


ты знаешь что такое id?



Для меня программирование хобби, не работа. Учусь помаленьку. Обещаю, в результате моих поделок никто не пострадает) Я вот это доделаю и больше не буду)

Спасибо :)
...
Рейтинг: 0 / 0
07.01.2020, 10:37
| Ответить | Цитировать | Написать  
JQuery
    #39911306
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.
Для меня программирование хобби, не работа. Учусь помаленьку. Обещаю, в результате моих поделок никто не пострадает) Я вот это доделаю и больше не буду)
даже если хобби - то тем более стоит относится с с большей отдачей, что б получить больше удовольствия.
возможно что хобби перерастёт в работу.





Алексей Шм.
о тут неудобно, что если миниатюра всего одна, то ссылка будет в низу при пустом allim. Если задаю min-height:210 (Высота однйо строки), то прыгает.
а кто мешает задавать высоту при обновлении? ведь число картинок известно
сделать старые картинки невидимыми, установить высоту, заполнить новыми
...
Рейтинг: 0 / 0
07.01.2020, 10:46
| Ответить | Цитировать | Написать  
JQuery
    #39911307
Алексей Шм.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Шм.
Участник
вадя
а кто мешает задавать высоту при обновлении? ведь число картинок известно
сделать старые картинки невидимыми, установить высоту, заполнить новыми

Действительно. поковыряю response.
Спасибо огромное за помощь!!
Только вот не понятен механизм этого явления. На какую тему почитать? Гугл не нашел.
...
Рейтинг: 0 / 0
07.01.2020, 10:54
| Ответить | Цитировать | Написать  
JQuery
    #39911308
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Шм.
Только вот не понятен механизм этого явления. На какую тему почитать? Гугл не нашел.
механизм чего?
почему прыгает?
тут надо знать порядок отработки изменения dom и что и когда прорисовывается
где почитать про особенности прорисовки я точно сказать не могу
много всего написано тут https://developer.mozilla.org/ru/

а вот по javascript - https://learn.javascript.ru/
...
Рейтинг: 0 / 0
07.01.2020, 11:05
| Ответить | Цитировать | Написать  
JQuery
    #39911311
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
вадя
сделать старые картинки невидимыми
тут есть несколько вариантов. но я рекомендую добавить/удалять/изменять правило visibility в css у нужного класса - изменение в одном месте вызовет изменение у всех картинок сразу
...
Рейтинг: 0 / 0
07.01.2020, 11:12
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39911301&tid=1443579]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 46ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 53ms
get tp. blocked users:
 2ms
others: 248ms
total:  387ms
созд. / загр.: 387ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]