LINUX.ORG.RU

Удалить/скрыть html элемент средствами css

 , , ,


0

1

Имеется некая страница, на ней некий html-элемент, подгружаемый на страницу сторонним js, необходимо этот элемент удалить или скрыть (хотя бы визуально минимизировать) средствами css. С помощью js удалить его не проблема, но он периодически (закономерность не выявил) подгружается/обновляется, а городить скрипт для отслеживания его очень не хочется. Стили у элемента такие:

outline: medium none !important;
visibility: visible !important;
resize: none !important;
box-shadow: none !important;
overflow: visible !important;
background: transparent none repeat scroll 0% 0% !important;
opacity: 1 !important;
position: fixed !important;
border: 0px none !important;
padding: 0px !important;
transition-property: none !important;
cursor: auto !important;
float: none !important;
transform: rotate(0deg) translateZ(0px) !important;
transform-origin: 0px 50% 0px !important;
bottom: 15px !important;top: auto !important;
right: 4px !important;
left: auto !important;width: 259px !important;
max-width: 259px !important;
min-width: 259px !important;
height: 90px !important;
max-height: 90px !important;
min-height: 90px !important;
z-index: 1000000 !important;
margin: 0px !important;
display: block !important;
Ничего путного в голову не приходит, буду рад, если кто-то сможет помочь. Может быть упускаю какое-то элементарное решение.

★★★★

Лучшее решение - выкинуть сторонний js, раз тебе все равно не нужны результаты его работы. Остальное - говнокод с костылями и лишняя нагрузка на браузер. И вообще непрофессионально.

Если все же по-человечески решать не хочешь, попробуй выставить body z-index больше 1000000 и непрозрачный бекграунд.

ddos3
()
Последнее исправление: ddos3 (всего исправлений: 1)

В <head> пишешь:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

А элементу прописываешь

class="hide"

anonymous
()
Ответ на: комментарий от ddos3

Лучшее решение - выкинуть сторонний js, раз тебе все равно не нужны результаты его работы. Остальное - говнокод с костылями и лишняя нагрузка на браузер. И вообще непрофессионально.

Ну это все понятно, но дело в том что соседний элемент из того же скрипта нужен и весьма, адекватной замены не нашел, а своё запилить [не хочу] не умею.

Если все же по-человечески решать не хочешь, попробуй выставить body z-index больше 1000000 и непрозрачный бекграунд.

O_o, до такого я не дошёл и к сожалению слишком много других элементов в разных слоях (те-же дродауны, поп-апы и т.д.), всех их нереально переместить в оси z. Да и кcтати, есть ли лимит на значение z-index?

ddidwyll ★★★★
() автор топика

Может есть (устаревшее | сверхновое новое свойство | хак | баг) который хотя бы уменьшит визуальный шум от элемента. Может что-то наподобии -ms-filter из ie. Достаточно будет работы в latest firefox/chrome

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ya-betmen

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

ddidwyll ★★★★
() автор топика

Тут участвовал недавно в парочке тем о том, почему зависают браузеры. Что ж... С полнейшей ответственностью заявляю: из-за таких ужасных дилетантов, как ты. Хватит уже говнокодить, сделай, наконец, нормально. Поверь - сделать действительно хорошо проще, чем сделать чтобы так выглядело.

mr_Heisenberg
()
Ответ на: комментарий от ddidwyll

Ничем не поможет. Анонимус дурак, и еще больший говнокодер, чем ты. Не слушай его.

ddos3
()
Ответ на: комментарий от ddidwyll

Так он вроде бы, не сильно шумит, нет? Судя по стилю всего лишь тихонько пишет в нижнем правом углу что-то вроде «Your Windows is not genuine! Go to settings to activate Windows.» ;)

ddos3
()
Ответ на: комментарий от xtala

Ты читал условия задачи? Там же на элементе в стиле прописан display:block !important. То есть внешними стилями не перекроешь, а элемент через случайное время пересоздается. Авторы того скрипта, которым пользуется ТС, приложили некоторые усилия к тому, чтобы сообщение нельзя было скрыть тривиальными средствами.

ddos3
()

Кстати использование !important страшнейший зашквар за который нужно отпиливать руки тупой пилой без анестезии.

xtala
()
Ответ на: комментарий от ddos3

Вот я выше написал, что !important это страшнейший зашквар, использовать его можно только в самых запущенных случаев. Есть куча способоы повысить приоретет элемента без него. А импортант это тапка в пол — столб — морг.

xtala
()
Ответ на: комментарий от mr_Heisenberg

ужасных дилетантов, как ты

Чем это заявление обосновано?

сделать действительно хорошо

Так в том и вопрос как сделать «хорошо» в этой ситуации, или хотя бы приемлимо.

почему зависают браузеры

Я бы не хотел городить костылей, особенно ценой клиентских устройств

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ddos3

Поэтому наверное единтсвенный вариант это отключить этот скрипт нафик, а автора выследить и пристрелить из обреза.

xtala
()
Ответ на: комментарий от ddos3

Go to settings to activate Windows

В том-то и дело что скрипт беслатный, без возможность приобресть за денежку возможность кастомизации, и это параноидальное желание разработчиков захардкодить до такой степени мне не понятно. И это не ссылка на сайт разрабов, её я естественно не трогал.

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от xtala

отключить этот скрипт нафик

С удовольствием бы, но пока польза перевешивает, а альтернатив не найдено.

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

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ddidwyll

Проще написать свой скрипт. Более чем уверен, что ничего сложного он не выполняет. Это наиболее оптимальный путь, особенно для клиентских устройств. Через чистый css или html это, увы, не решить, все захардкожено через !important

mr_Heisenberg
()
Ответ на: комментарий от ddidwyll

Что за скрипт-то? Раз говоришь, что криминала в твоих действиях нет, то дай ссылку. Может, поможет найти решение.

ddos3
()
Ответ на: комментарий от ddidwyll

Таки да, буквально каждое css свойство, которое отвечает за отображение/позицию - important. Выхода два: js-костыль и js-велосипед. На велике, как мы знаем, передвигаться быстрее и приятнее))

mr_Heisenberg
()
Ответ на: комментарий от ddidwyll

через CSS вряд ли получится... Надо подключать к решению другой скрипт.

xtala
()
Ответ на: комментарий от mr_Heisenberg

Проще написать свой скрипт.
Через чистый css или html это, увы, не решить

Я пока в этом не уверен

все захардкожено через !important

Ну уж прямо таки не весь css3 :-) Что-то крутится в голове, что-то из крайне не распространых уголков спецификации, но никак не могу понять что, хотя может быть я зря тешу себя иллюзиями.

ничего сложного он не выполняет

Напротив.

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ddidwyll

ну тогда погуглить как перебить стиль импортант

xtala
()
Ответ на: комментарий от ddidwyll

И что это за скрипт? Быть может я смогу поделиться с тобой из личной коллекции. А по свойствам - все влияющие точно. Гугли: список всех css свойств. Через пару часов сам лично убедишься.

mr_Heisenberg
()
Ответ на: комментарий от ddidwyll

Ну кстати пишут, что пользовательские с !important стоят выше по приоритету чем авторские, так что попробуй все таки в своем css файле прописать .class {display:none !important;}

xtala
()
Ответ на: комментарий от ddos3

Скрипт от tawk.to, используется для тех. поддержки, по совокупности наличия необходимого функционала / некоторых других факторов, аналогов я не нашёл. Проблема в том что помимо фрейма с собственно чата, периодически подгружается фрейм с приглашением поболтать (для продажников вроде бы полезный функционал). Выглядит так http://imgur.com/OV4LmbD

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от xtala

Советую ознакомиться с темой более лучше

Встроенный стиль, добавляемый к тегу через атрибут style, имеет специфичность 1000, поэтому всегда перекрывает связанные и глобальные стили.

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от xtala

А самостоятельно погуглить? Чему вас только в школе учат :(

Стиль на элементе с important уже ничем не перебивается.

ddos3
()
Ответ на: комментарий от ddos3

iframe, в нём соответственно куча разметки, конечный тэг, который необходимо скрыть - да, img, можно конечно заинжектить стиль во фрейм, но толку, если он периодически обновляется.

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ddidwyll

А, это инлайновый стиль? ясно. Ну что тогда искать другое решение.

xtala
()
Ответ на: комментарий от ddidwyll

Короче, никак ты его не задавишь. Можешь попробовать поверх повесить заглушку (position: fixed, left, bottom, width, height, z-index:100000001), чтобы картинка была скрыта под ней. Лучше все равно ничего не придумаешь.

ddos3
()
Ответ на: комментарий от ddos3

Может написать разработчикам, выяснить хотя бы причину такого поведения. Сейчас подумал, что это борьба с мельницей, любой хак они всё равно смогут пофиксить, ибо до этого месяц рабочим решением было opacity:0, на что они ответили opacity:1!important (не мне скорее всего, просто совпало)

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ddidwyll

Они пользователей в чатик нагоняют. Ты же понимаешь, что если тебе что-то дают бесплатно, то товар - это ты.

ddos3
()
Ответ на: комментарий от ddos3

С каждым годом всё больше понимаю что я в 99.(9) случаев из 100 только товар (:

Вообщем, вроде как для лисы сработает

-moz-appearance: menuseparator;
Надо по-тестировать и придумать что-то для хрома.

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от ddidwyll

Это настолько чудовищно, что даже по-своему очаровательно.

ddos3
()
Ответ на: комментарий от ddos3

Придумать то можно. Только CSS это не ограничится. Читал статью на Хабре как один чел закастомил виджет твиттера который отображается через iframe. Как-то по хитрому он там это провернул с jquery вроде как. Жаль это дело сейчас не работает т.к. твиттер что-то поменял внутри, а человек не стал свою поделку дальше статьи развивать.

xtala
()
Ответ на: комментарий от ddidwyll

Открыть страницу в хроме, нажать ф12, найти элемент внутрь которого врисуется неугодный блок, открыть на нем контекстное меню, выбрать бреак он - субтри модификейшн. Ждешь. Как блок попытается врисоваться в страницу сможешь узнать кто его пытается туда засунуть и сможешь зачинить это место.

ya-betmen ★★★★★
()
Ответ на: комментарий от xtala

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

ddidwyll ★★★★
() автор топика

ТС сходи на статью по моей ссылке выше и обрати внимание на следующий абзац:

Выполним следующие манипуляции с фреймом: повесим на его body атрибут id=«#twitterStyled» (чтобы не беспокоиться о приоритетах стилей) и добавим внутрь блок со стилями.

Возможно это и есть ключ к решению твоих граблей.

xtala
()
Ответ на: комментарий от ddidwyll

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

xtala
()
Ответ на: комментарий от ya-betmen

Спасибо, я правда стараюсь держаться по-дальше от js, но в целом посыл понял. Правда сначала попробую решить в лоб чудовищным спосбом %) Поиск таких нестандартных подходов - отличная зарядка для ума.

ddidwyll ★★★★
() автор топика
Ответ на: комментарий от xtala

Так после перезагрузки контейнера, дом контейнера тоже перезагружается. Не выйдет, это я пробовал в первую очередь, только отслеживать перезагрузку фрейма, чего очень не хочется делать, да и тогда проще средствами js присваивать display:none каждый раз. В статье по ссылке контейнер не перезагружается, просто в него прилетают новые данные и только.

ddidwyll ★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.