Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / JQuery / 19 сообщений из 19, страница 1 из 1
06.01.2020, 15:38
    #39911150
Алексей Шм.
Алексей Шм.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
Есть галерея фотографий, при клике на ссылку подгружаются новые фотки в блок одинакового размера. в обработчике блок очищается, загружается новый 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, 18:06
    #39911176
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
Алексей Шм.,

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

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



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

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

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

лучше выкладывать код из браузера, и css
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.01.2020, 09:45
    #39911294
Алексей Шм.
Алексей Шм.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
вадя,
Спасибо за попытку помочь!
Код: 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:51
    #39911295
Алексей Шм.
Алексей Шм.
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
Напомню проблему -до ссылки "еще фото" нужно проскроллить ниже. При клике на нее, страница скроллится к верху, но все отрабатывается как надо (на фото вид после клика).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.01.2020, 09:52
    #39911296
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
Алексей Шм.,

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

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

 
Код: 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, 10:15
    #39911301
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
Алексей Шм.,

Код: 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:24
    #39911303
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JQuery
Алексей Шм.,

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


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


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


 

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



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

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


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



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

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





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

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

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


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