При 1000px разрешения экрана появление div тега в html, как сделать?

Question

[Антон Вебсайтовский]

Здравствуйте.

Не совсем стандартная адаптация блоков.
Все блоки не стал пихать, приведу пример чтобы понятно было что я хочу сделать.

<div class="pricetov">
  <div class="prir">
    <div class="pricetovn"><h2><b>название товара</b></h2></div>
    <div class="pricetova">Артикул: <b>артикул</b></div>
  </div>
</div>

Как мне сделать чтобы при разрешение экрана к примеру 1000px, появлялся код в html, и , я так понимаю это только через php сделать можно или js.

Если сделаю через css медиа, то я так скрою все что входит в этот див, а мне скрывать не надо.

Можно конечно скопировать код два раза и сделать с и без, но это не очень хорошо, там товаров на странице много и я показываю часть блоков, там и фото есть и т.д, по этому если будет два варианта, то будет большая загрузка товаров, к примеру если я сделаю один блок чтобы скрывался при 1000px, а другой второй с , появлялся при 1000px, то все равно хоть его не видно но сайт же будет все грузить, по этому я решил реализовать 1 блок но продуманный.

Плохо что тег div, нельзя отключить его свойства, а то он мешает, вот и хочу его подключать при размере экрана 1000px, я пробовал див заменить на спан или i или b, тож самое мешает. У тегов же есть свойства как бы встроенные, я не про css.

Старался объяснить чтобы понятно было.

Comments

[Алексей]

Любая адаптивная сетка и медиазапросы. Вам ни кто не запрещает при использовании медиа скрывать только нужную информацию в блоке, а не весь блок.

[2cha.headz]

ничего не понял))
напишите как есть изначально, и как должно стать

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

Дмитрий Глаголев, мне нужно в html, показывать див код и скрывать. при определенном разрешении экрана.

[Алексей]

Антон Вебсайтовский, давайте остановимся на том что каждый элемент имеет свой класс и скрывать конкретно div смысла не имеет, можно скрыть .pricetovn например.

[2cha.headz]

Антон Вебсайтовский, вам отлично должны подойти медиазапросы
те данные, которые должны скрываться/показываться оберните в слои и только на них вешайте "медиаусловия"
js то ведь по такому же принципу будет работать

[Дмитрий]

Зачем здесь тег php?

[Антон Вебсайтовский]

Дмитрий, хотя можно и через js сделать, мне где-то подобное делали но через php, каталог сворачивался при определенном разрешении экрана.

[Антон Вебсайтовский]

Походу вы меня понять не можете, я же написал что такое через медиа не сделать.

Там надо сделать так чтобы тег див с классом, в html, появлялся когда разрешение экрана в районе 1000px

[Дмитрий]

Антон Вебсайтовский, на php не как не сможете узнать экран

[Антон Вебсайтовский]

Дмитрий, я ниже привел более развернутый и вроде понятный вариант. о чем я.

[Дмитрий]

Антон Вебсайтовский, да там по сути две строки кода на jquery , блок есть всегда, просто ему надо менять видимость от разрешения экрана

Answer 1

[Антон Вебсайтовский]

Помутил и нашел решение то что надо, без всяких js и т.д.

Вот: что мне надо было сделать, адаптивность блоков.
https://jsfiddle.net/pc4ktm10/3/

Answer 2

[Максим Тимофеев]

работа с расширением экрана может идти в браузере, сервер не знает какое там расширение. Поэтому придумали медиазапросы в css:

.someMydiv {display: none;} //обычно не виден
@media (min-width: 999px) and (max-width: 1001px) {
.someMydiv {display: block;} //виден при ширине экрана от 999 до 1001 px
}

Можно конечно скопировать код два раза и сделать с и без, но это не очень хорошо, там товаров на странице много и я показываю часть блоков, там и фото есть и т.д, по этому если будет два варианта, то будет большая загрузка товаров, к примеру если я сделаю один блок чтобы скрывался при 1000px, а другой второй с , появлялся при 1000px, то все равно хоть его не видно но сайт же будет все грузить, по этому я решил реализовать 1 блок но продуманный.

тогда формировать блок через js. Есть массив товаров в json, есть шаблон формирования, после загрузке страницы формируем нужное. Но если покажите шаблоны, которые верстаете, возможно подскажем более адекватный подход.

Comments

[Антон Вебсайтовский]

Через медиа не пойдет, я бы давно так и сделал. Там надо сделать так чтобы тег див с классом, в html, появлялся когда разрешение экрана в районе 1000px

[Максим Тимофеев]

Антон Вебсайтовский, Появлялся в html когда разрешение экрана в районе 1000px - это только средствами js. Так как сервер и php понятия не имеют что там за разрешение. Так что или кидать после загрузки ajax и получать с сервера готовый html под уже известный к тому моменту размер или иметь в json данные товаров и на баз его строить в js нужный html

[Антон Вебсайтовский]

Максим Тимофеев, есть пример?

[Максим Тимофеев]

Антон Вебсайтовский, пример чего? Как ajax запрос сделать? В оф доках есть:
api.jquery.com/jquery.ajax

[Антон Вебсайтовский]

Максим Тимофеев, да не это не то. тут надо связывать php и js так сказать.

Пример, то как можно обернуть

<div class="pricetov">
<?php if ($var == true) { ?><div class="prir"><?php } ?> 
  <div class="pricetovn"><h2 itemprop="name"><b>название</b></h2></div>
  <div class="pricetova">Артикул: <b>5454353454</b></div>
  <?php if ($var == true) { ?> </div><?php } ?> 
</div>

но чтобы показывалось или нет, надо связать с js, чтобы скрипт js определял разрешения экрана и при 1000px, переключал на показывать.

[Максим Тимофеев]

Антон Вебсайтовский,

тут надо связывать php и js так сказать.

для этого ajax и существует

надо связать с js, чтобы скрипт js определял разрешения экрана и при 1000px

вы понимаете жизненный цикл вебстраницы? Вначале сервер обрабатывает php формирует html и отправляет html браузеру, там уже срабатывает js. У клиента, а не на сервере. А php на сервере. Вы хотите отмотать время назад? Это невозможно, поэтому существует ajax.

[Антон Вебсайтовский]

Максим Тимофеев, нет ничего отмаывать не хочу. что вы все выдумываете )