Что нового?

Рекомендуем: 🚀Pirate Crypto Community


Ищу Ищу верстальщика, который может...

A16a

Активный пользователь
Регистрация
18 Дек 2016
Сообщения
98
Доброго времени суток.

Есть кто разбирается в верстке? Хочу чтобы вы мне помогли сделать один код резиновым/адаптивным под устройства.
[HIDEL="3"]https://codepen.io/iremlopsum/pen/OVMxzp[/HIDEL]
В данной момент я не блистаю пониманием как можно это сделать. То ли вкладки горизонтальном положении. и контент под ним.
 





kel91

Свой
Регистрация
1 Май 2017
Сообщения
315
$(".choose").click(function() {
$(".choose").addClass("active");
$(".choose > .icon").addClass("active");
$(".pay").removeClass("active");
$(".wrap").removeClass("active");
$(".ship").removeClass("active");
$(".pay > .icon").removeClass("active");
$(".wrap > .icon").removeClass("active");
$(".ship > .icon").removeClass("active");
$("#line").addClass("one");
$("#line").removeClass("two");
$("#line").removeClass("three");
$("#line").removeClass("four");
})
Это талант надо иметь...
 

A16a

Активный пользователь
Регистрация
18 Дек 2016
Сообщения
98
$(".choose").click(function() {
$(".choose").addClass("active");
$(".choose > .icon").addClass("active");
$(".pay").removeClass("active");
$(".wrap").removeClass("active");
$(".ship").removeClass("active");
$(".pay > .icon").removeClass("active");
$(".wrap > .icon").removeClass("active");
$(".ship > .icon").removeClass("active");
$("#line").addClass("one");
$("#line").removeClass("two");
$("#line").removeClass("three");
$("#line").removeClass("four");
})
Это талант надо иметь...
Разобравшись я понял что это обычное программирование.) Одно активируется, остальные дизейблится. и так с каждым.
 

Рекламное сообщение

MyLead

Активный пользователь
Регистрация
4 Фев 2019
Сообщения
67
MyLead - глобальная партнерка, преимущество которой:

💵 вертикали во всех популярных категориях
💵1900+ офферов в целом мире и в России
💵быстрые выплаты от 20$ на банковский счет и WebMoney, PayPal, Bitcoin, Revolut, Skrill ( скоро Yandex.Money и QIWI)
💵Поддержка 24/7 в русском языке
💵Бесплатные материалы к обучению арбитража трафика
💵Content Локеры, которые расширяют твои возможности заработка. Идеальный инструмент для заработка на мотивированном трафике.

Ссылка на офферы MyLead
Ссылка на официальную тему


 

kel91

Свой
Регистрация
1 Май 2017
Сообщения
315
Разобравшись я понял что это обычное программирование.) Одно активируется, остальные дизейблится. и так с каждым.
это в 3 строчки можно все записать, а не такой лапшекод, который процессор грузит и прыгает по дом дереву туда-сюда, а выборки в переменные занести
 

A16a

Активный пользователь
Регистрация
18 Дек 2016
Сообщения
98
это в 3 строчки можно все записать, а не такой лапшекод, который процессор грузит и прыгает по дом дереву туда-сюда, а выборки в переменные занести
было бы круто, я с js не дружу.
 

kel91

Свой
Регистрация
1 Май 2017
Сообщения
315
было бы круто, я с js не дружу.
ладно, так сойдет, некогда мне переписывать, там никто перетыкивать их по 100 раз на дню не будет, $("#line").removeClass() а потом addClass(param) - достаточно для удаления всех классов и с остальными так; поставь #wrapper {width: 100%; height: 100%; вместо пикселей и твоя задача решена, ничего не надо вертикально располагать. хорошо и так.
 

A16a

Активный пользователь
Регистрация
18 Дек 2016
Сообщения
98
ладно, так сойдет, некогда мне переписывать, там никто перетыкивать их по 100 раз на дню не будет, $("#line").removeClass() а потом addClass(param) - достаточно для удаления всех классов и с остальными так; поставь #wrapper {width: 100%; height: 100%; вместо пикселей и твоя задача решена, ничего не надо вертикально располагать. хорошо и так.
Я так ставил. Еще добавил max-weight: чтобы по экрану не расплавился.
Ужас на моем экране творится, особо не читаемая. у меня ширина 480px.
https://image.prntscr.com/image/F6ctj6uUS2Cim00A5efpaA.png

А можно так реализовать. Чтобы в определенном моменте. когда тексты слева не вмещается, они просто скрывались. и оставались тока иконки
 

kel91

Свой
Регистрация
1 Май 2017
Сообщения
315
Я так ставил. Еще добавил max-weight: чтобы по экрану не расплавился.
Ужас на моем экране творится, особо не читаемая. у меня ширина 480px.
https://image.prntscr.com/image/F6ctj6uUS2Cim00A5efpaA.png

А можно так реализовать. Чтобы в определенном моменте. когда тексты слева не вмещается, они просто скрывались. и оставались тока иконки
в голову нтмл вставь это, если там такого нет
<meta name="viewport" content="width=device-width, initial-scale=1">
в js невозможно отследить наплыв элементов друг на друга на этапе вывода пользователю, скрыть можно в медиа запросе, если в параграфы с классом обернуть текстовое содержимое и дисплей нан, а еще лучше сделать запрос такого плана, чтобы уменьшить и размер иконок и размер текста, подбирай параметры
@Media screen and (max-width:560px) {
.icon {
width: 16px;
height: 16px;
}
#wrapper{
font-size:.8em;
}
h1{
1.5em;
}
}
 

ChetAtkins

Новичок
Регистрация
26 Авг 2017
Сообщения
5
Господи, что вы насоветовали. Бери Bootstrap и пользуйся на здоровье. На офф сайте расписано все подробно как использовать сетку, есть так же и ру аналоги офф сайта. Не зря эту сетку признал весь мир. Рассмотри так же возможности flexbox верстки.
 

kel91

Свой
Регистрация
1 Май 2017
Сообщения
315
Господи, что вы насоветовали. Бери Bootstrap и пользуйся на здоровье. На офф сайте расписано все подробно как использовать сетку, есть так же и ру аналоги офф сайта. Не зря эту сетку признал весь мир. Рассмотри так же возможности flexbox верстки.
ну так насоветуй сам, а не пространно рассуждай теоретически, там кстати на флексах все и сверастано... конечно на бутстрапе3 более кроссбраузерно, тут я с тобой согласен
 

Сверху