Курсы javascript
Имеется наипростейший див контента. В этот див помещаются обновления, статьи, новости. Хочу сделать так, чтобы показывалось определённое количество новостей или чтобы див оставался определённой высоты, а внизу блока была кнопка «Показать ещё», как это реализовано в большинстве сайтов. Подскажите с чего начать, какие методы использовать.
03.07.2014, 19:11
Регистрация: 16.03.2010
Сообщений: 1,618
С основ, очевидно. Там же логика элементарная: нажал кнопку, отправил запрос за верской, вставил её.
03.07.2014, 19:12
Интересующийся
Регистрация: 24.02.2014
Сообщений: 20
ничего не дало. с основ чего JavaS html php ?
Последний раз редактировалось Alban, 03.07.2014 в 19:41 .
03.07.2014, 19:56
Регистрация: 16.03.2010
Сообщений: 1,618
Это говорит только об одном: надо изучать основы.
Как вариант, начать с этого.
03.07.2014, 20:14
Интересующийся
Регистрация: 24.02.2014
Сообщений: 20
лет на десять всё это. а методику опишите. что там надо делать первое второе третье.
03.07.2014, 20:23
Регистрация: 16.03.2010
Сообщений: 1,618
Получается, я десять лет изучал всё это, чтобы за спасибо методики писать? Я уже написал «первое второе третье»:
03.07.2014, 21:55
Интересующийся
Регистрация: 24.02.2014
Сообщений: 20
вы бы могли сказать, что для этого требуется вызов какой-либо функции, или может надо установить плагин, как это требуют во всяких «инструкциях», или может что-либо ещё. я ж не прошу писать диссертацию по этой теме.
а «нажал кнопку», которую сперва надо создать, «вставить её» что вставить? кнопку? не совсем понятно мне. мне нужна подсказка на которую можно опереться и дальше идти.
Последний раз редактировалось Alban, 03.07.2014 в 22:05 .
03.07.2014, 23:12
Регистрация: 16.03.2010
Сообщений: 1,618
Вёрстку, конечно. Короче, общий принцип с jQuery: есть урл, через который ты запрашиваешь следующую партию новостей. Например, site.com/getNews?id=1234. В параметре запроса передаешь какой-нибудь id’шник. Например, id первой новости из тех, которые собираешься получить. Ну либо как-нибудь по-другому. По клику на кнопку делаешь запрос. Ответ, допустим будет в json-формате с новым идентификатором для следующего запроса и, собственно, с самой версткой новостей. И эту верстку ты запихиваешь в контента. Тип того:
04.07.2014, 07:17
Интересующийся
Регистрация: 24.02.2014
Сообщений: 20
Вот, отлично, спасибо, принцип понятен, с остальным разберусь.
04.07.2014, 10:58
Регистрация: 29.11.2011
Сообщений: 3,924
на основы можно опереться
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина — самый громкий звук
Как реализовать кнопку «Показать ещё»?
Здравствуйте! Заранее прошу не кидаться тапками, пожалуйста, я нуб) У меня есть кнопка «Показать ещё», которая выводит дополнительные 3 строки из таблицы. Всё работает, но мне не нравится что при нажатии кнопки страница перезагружается. Я не знаю как это реализовать через JS(долго пытаюсь найти инфу в интернете — не выходит). Помогите сделать красиво, пожалуйста. Злюки — проигнорируйте вопрос пж, мне итак негатива в жизни хватает.
function getFriendsList() < $link = mysqli_connect("localhost", "root", "root", "mb"); if(!$link)< printf("База не подключена"); exit(); >$sql_res = mysqli_query($link, 'SELECT COUNT(*) FROM reviews'); if($_SESSION["ttr"] == 0) < $_SESSION["ttr"] = 3; >if(isset($_POST["submit2"])) < $_SESSION["ttr"] = $_SESSION["ttr"] + 3; >$sql = 'SELECT * FROM reviews ORDER BY id DESC LIMIT '.$_SESSION["ttr"].''; $sql_res = mysqli_query($link, $sql); echo 'Последние отзывы
'; while($row = mysqli_fetch_assoc($sql_res)) < $ret = ''.$row['name'].'
'.$row['comm']. '
'; echo $ret; > > getFriendsList(); echo '- Вопрос задан более года назад
- 369 просмотров
Кнопка «показать ещё»
Есть 100 элементов с блоками.
Необходимо показать на странице первые 10 блоков.
При повторном клике на кнопку, показывать следующие 10 блоков.
var box = document.querySelectorAll('.box'); var btn = document.getElementsByTagName('button'); console.log(box); btn = addEventListener("click", function() < box.slice(0, 9); >).wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; >.box < margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button
Отслеживать
28.2k 12 12 золотых знаков 78 78 серебряных знаков 145 145 бронзовых знаков
задан 19 фев 2020 в 19:16
slobodianiukvitali slobodianiukvitali
179 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков
Как показывать 10+ элементов?
19 фев 2020 в 19:20
Вариантов на вскидку как минимум 3. Как Вы пробовали делать? И пробовали ли вообще?
19 фев 2020 в 19:22
тож кинул вам кодепен с тем что на работал вы вооюбще смотрели.
19 фев 2020 в 19:25
Код нужно вставлять сразу в вопрос
19 фев 2020 в 19:36
Показывать это значить показать ещё +10 блоков
19 фев 2020 в 19:56
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Codepen я смотрел.
Вот только попытки Ваши закончились на box.slice(0,9)
Это потом Вы хоть что-то добавили.
Так как Grundy сделал мне выговор, который мы ещё обсудим, решил добавить ответ.
window.onload = function () < var box=document.getElementsByClassName('box'); var btn=document.getElementById('button'); for (let i=10;ivar countD = 10; btn.addEventListener("click", function() < var box=document.getElementsByClassName('box'); countD += 10; if (countD > >) >
body < background: blue; >.wrapper-boxes < display: flex; text-align: center; flex-direction: row; flex-wrap: wrap; width: 79%; >.box < margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button
Отслеживать
ответ дан 19 фев 2020 в 21:12
Denis640Kb Denis640Kb
14.1k 5 5 золотых знаков 22 22 серебряных знака 46 46 бронзовых знаков
Когда там @Grundy тебе выговор делал? 🙂
19 фев 2020 в 22:43
box — можно один раз получить, не нужно проходить по уже видимым элементам при каждом нажатии кнопки
19 фев 2020 в 23:11
Всем блокам дать класс-невидимку, при каждом клике собрать все элементы с этим классом и с первых N элементов убрать невидимку, дать другой класс со стилями:
var more = document.querySelectorAll('.more'); for (var i = 0; i < more.length; i++) < more[i].addEventListener('click', function() < var showPerClick = 3; var hidden = this.parentNode.querySelectorAll('div.hidden'); for (var i = 0; i < showPerClick; i++) < if (!hidden[i]) return this.outerHTML = ""; hidden[i].classList.add('box'); hidden[i].classList.remove('hidden'); >>); >.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; >.box < margin: 1px; width: 20px; height: 20px; background-color: orange; >.hidden
Отслеживать
ответ дан 19 фев 2020 в 23:28
OPTIMUS PRIME OPTIMUS PRIME
27.1k 3 3 золотых знака 23 23 серебряных знака 49 49 бронзовых знаков
Очень интересно, откуда вдруг два минуса))
22 фев 2020 в 18:30
@OPTIMUS PRIME Вот очень много людей с негативным предвзятым отношением. Я всё тоже стараюсь не обращать на них внимание, но они постоянно портят всё настроение. От меня тоже большой плюс.
24 фев 2020 в 12:12
Вот красивое решение. В скрипте можно указать, какое количество элементов выводить. Когда все элементы уже показаны, то кнопка скрывается. Примеры:
Решение на JavaScript(jQuery). 100 элементов
$(document).ready(function() < var list = $(".wrapper-boxes .box"); var numToShow = 10; //сколько показывать элементов var button = $("button"); var numInList = list.length; list.hide(); if (numInList >numToShow) < button.show(); >list.slice(0, numToShow).show(); button.click(function() < var showing = list.filter(':visible').length; list.slice(showing - 1, showing + numToShow).fadeIn(); var nowShowing = list.filter(':visible').length; if (nowShowing >= numInList) < button.hide(); >>); >);.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; counter-reset: albumList; >.box < position: relative; margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button < width: 550px; line-height: 40px; background-color: orange; border: 4px solid #fff; color: #fff; >.box:after
Другое количество элементов (не кратное десяти)
$(document).ready(function() < var list = $(".wrapper-boxes .box"); var numToShow = 10; //сколько показывать элементов var button = $("button"); var numInList = list.length; list.hide(); if (numInList >numToShow) < button.show(); >list.slice(0, numToShow).show(); button.click(function() < var showing = list.filter(':visible').length; list.slice(showing - 1, showing + numToShow).fadeIn(); var nowShowing = list.filter(':visible').length; if (nowShowing >= numInList) < button.hide(); >>); >);.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; counter-reset: albumList; >.box < position: relative; margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button < width: 550px; line-height: 40px; background-color: orange; border: 4px solid #fff; color: #fff; >.box:after
Решение на нативном JavaScript
document.addEventListener("DOMContentLoaded", function() < const limit = 10; const nextOpen = (wrapper, button) => < const boxs = wrapper.querySelectorAll(".box"), len = boxs.length - 2, endBox = wrapper.querySelector(".nextstop"), index = [. boxs].indexOf(endBox) + limit; if (endBox) endBox.classList.remove("nextstop"); if (index < len) boxs[index].classList.add("nextstop"); else button.remove() >document.querySelectorAll(".wrapper-boxes").forEach(wrapper => < const button = wrapper.nextElementSibling; button.addEventListener("click", nextOpen.bind(null, wrapper, button)); nextOpen(wrapper, button); >) >);.wrapper-boxes < display: flex; flex-direction: row; flex-wrap: wrap; counter-reset: albumList; >.box < position: relative; margin: 5px; width: 100px; height: 100px; background-color: orange; border-radius: 3px; >button < width: 550px; line-height: 40px; background-color: orange; border: 4px solid #fff; color: #fff; >.box:after < counter-increment: albumList; content: counter(albumList); position: absolute; top: 10%; left: 10%; padding: 4% 7%; border-radius: 5%; border: 1px solid lightgray; text-align: center; background-color: white; font-size: 2vw; font-weight: bold; font-family: monospace; box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.33) inset; >.box.nextstop~.box
Отслеживать
ответ дан 19 фев 2020 в 22:29
Sevastopol’ Sevastopol’
28.2k 12 12 золотых знаков 78 78 серебряных знаков 145 145 бронзовых знаков
jQuery(document).ready(function($)< $(".show-more-btn").click(function(e)< $(".show-more-item:hidden").slice(0,3).fadeIn(); if ($(".show-more-item:hidden").length < 1) $(this).fadeOut(); >) >) blah blah blah blah Load More* < padding: 0; margin: 0; box-sizing: border-box; >body < background: #e9ecef; >h3 < background: #1C1D1F; color: white; width: 80%; text-align: center; margin: 15px auto; padding: 10px; >ul < width: 50%; margin-left: auto; margin-right: auto; list-style-type: none; background: white; >li < height: 50px; line-height: 50px; border-top: 1px solid #e9ecef; >ul a < display: block; height: 100%; text-decoration: none; color: black; padding-left: 10px; position: relative; transition: background .3s; >ul a:after < content: '⇢'; position: absolute; right: 10px; >ul a:hover < background: #cdcbc4; >/* CHECKBOX CONTAINER STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container < position: relative; height: auto; border-top: 0; >[type="checkbox"] < position: absolute; left: -9999px; >label < background: #e4e3df; display: block; width: 100%; height: 50px; cursor: pointer; position: absolute; top: 0; transition: top .45s cubic-bezier(.44, .99, .48, 1); >/* * use the rule below for testing purposes * label:hover < * background: yellow; * >*/ label:before, label:after < position: absolute; >label:before < content: 'More'; left: 10px; >label:after < content: '⇣●'; right: 10px; -webkit-animation: sudo .85s linear infinite alternate; animation: sudo .85s linear infinite alternate; >@keyframes sudo < from < -webkit-transform: translateY(-2px); transform: translateY(-2px); >to < -webkit-transform: translateY(2px); transform: translateY(2px); >> input[type="checkbox"] ~ ul < width: 100%; overflow: hidden; max-height: 0; transition: max-height .45s cubic-bezier(.44, .99, .48, 1); >/* CHECKED STATE STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ [type="checkbox"]:checked ~ ul < /** * the value of the `max-height` property specifies the transition speed * set a very big value (e.g. 9999px) to see the difference */ max-height: 300px; >[type="checkbox"]:checked + label < top: 100%; >[type="checkbox"]:checked + label:before < content: 'Less'; >[type="checkbox"]:checked + label:after < content: '⇡●'; >ul li:last-child
Отслеживать
ответ дан 15 апр 2020 в 11:09
USERNAME GOES HERE USERNAME GOES HERE
10.4k 21 21 золотой знак 25 25 серебряных знаков 53 53 бронзовых знака
Кого интересует более проработанная версия, в адаптивных блоках в ряд 3 блока, плюс кнопка показать еще блоки с фото, показываем 6 блоков, но если надо подгрузить еще 6, нажимаем кнопку показать еще, если все фото загружены, кнопка исчезает. Код подгрузить еще блоки, позаимствовал у автора выше.
Для фото до и после, используется скрипт twentytwenty.
Таким способом можно показывать работы, до и после, ну и для другого применить.
//подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку $(window).on('load', function() < initTwenty(); >); // Фото, до и после function initTwenty() < $(".twentytwenty").twentytwenty(< no_overlay: false, // Не показывать наложение было, стало, true скрыть // Перемещать ползунок при наведении курсора мыши move_slider_on_hover: false, // Разрешить пользователю проводить пальцем в любом месте // изображения для управления движением ползунка. move_with_handle_only: true, before_label: 'До', after_label: 'После' >); > $(document).ready(function() < var list = $(".gggggggg .twentytwenty"); var numToShow = 6; //сколько показывать элементов var button = $("button"); var numInList = list.length; list.hide(); if (numInList >numToShow) < button.show(); >list.slice(0, numToShow).show(); button.click(function() < var showing = list.filter(':visible').length; list.slice(showing - 1, showing + numToShow).fadeIn(); var nowShowing = list.filter(':visible').length; if (nowShowing >= numInList) < button.hide(); >initTwenty(); >); >);
.prfota < margin: 0 0 -40px -40px; >.twentytwenty-wrapper < -webkit-box-flex: 0; -ms-flex: 0 0 calc(33.333333% - 0px); flex: 0 0 calc(33.333333% - 0px); -webkit-box-sizing: border-box; box-sizing: border-box; >.twentytwenty-container < margin: 0 0 40px 40px; >.gggggggg button < width: 280px; height: 60px; line-height: 60px; border: 1px solid #CB002B; background: #fff; font-weight: 600; text-align: center; color: #282725; text-transform: uppercase; border-radius: 90px; margin-top: 40px; >.gggggggg button:hover < background: #282725; border: 1px solid #282725; color: #fff; >.wr < -ms-flex-wrap: wrap; flex-wrap: wrap; >.prfota
Кнопка «Показать еще»
Несколько примеров, как сделать AJAX подгрузку записей из базы данных кликом на кнопку «Показать еще».
Первый вариант: отдельный AJAX-обработчик
В тело страницы помещается PHP-скрипт, который выводит только первые три записи из таблицы `prods` и кнопку «Показать еще».
prepare("SELECT * FROM `prods` LIMIT 3"); $sth->execute(); $items = $sth->fetchAll(PDO::FETCH_ASSOC); // Кол-во страниц $sth = $dbh->prepare("SELECT COUNT(`id`) FROM `prods`"); $sth->execute(); $total = $sth->fetch(PDO::FETCH_COLUMN); $amt = ceil($total / 3); ?> 
