Almiar
Estoy usando WordPress y tengo una presentación de diapositivas de mi sitio Smugmug.
La presentación de diapositivas muestra una notificación de cookies que deseo ocultar. El problema es que el id atributo es aleatorio, excepto por el primer y último carácter (comenzando con yui_ y con _32 al final. La Clase es constante, pero su uso no hace ninguna diferencia en la visualización de la Advertencia de cookies. Hay algunos javascript cargados dinámicamente que también se ejecutan como parte de la presentación de diapositivas incrustada. No sé si eso hace una diferencia en la capacidad del CSS local para modificar el código.
HTML:
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_32"> = $0
“ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class"headermessagelink"="" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
Llevo horas intentando buscar una respuesta sin éxito.
¿Cómo puedo ocultar todo <div> elemento usando CSS?
EDITAR: Debería haber mencionado que no tengo control sobre el servidor desde el cual se sirve el código incrustado y la mayor parte de la coed anterior se genera dinámicamente cuando se carga la página. Solo puedo editar el CSS local en mi tema de WordPress y el CSS del tema en mis galerías alojadas en Smugmug (pero no creo que eso afecte la presentación de diapositivas que se muestra en incrustaciones externas). el sitio es https://luz/touch.photography/ si desea ver el código de la página tal como se presenta al usuario.
Ricky
Enfoque CSS
Si la clase de la notificación de cookies es consistente, puede utilizar:
.sm-eu-cookie-message{
display: none; /* If it is persistent, use the !important flag. */
}
O, usando !important bandera:
.sm-eu-cookie-message{
display: none!important;
}
Si la clase no es consistente pero el atributo id valores son, puede utilizar el ^ o $ selectores de atributo de coincidencia de subcadena.
[attribute^=value]Selecciona todos los elementos donde el atributo comienza con el valor especificado.[attribute$=value]Selecciona cada elemento donde el atributo termina con el valor especificado.
[id^=yui_],
[id^=yui_ i] { /* match attribute values case-insensitively */
color: red;
/*display: none;*/
}
[id$=_32] {
color: blue;
/*display: none;*/
}<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>Para cubrir más terreno, también puede utilizar el * Selector de atributo de coincidencia de subcadena.
[attribute*=value]Selecciona todos los elementos en los que el atributo contiene al menos una instancia del valor especificado.
[id^=yui_],
[id^=yui_ i], /* match attribute values case-insensitively */
[id*=yui_],
[id*=yui_ i]{ /* match attribute values case-insensitively */
color: red;
/*display: none;*/
}
[id$=_32],
[id*=_32]{
color: blue;
/*display: none;*/
}<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute containing an instance of <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yUI_</em>
</div>Más información sobre estos selectores aquífuente W3C.
Tenga en cuenta que esta notificación proviene de una fuente externa y puede cambiar por completo de repente, haciendo que los selectores anteriores sean inútiles y necesiten una actualización.
EDITAR:
Enfoque JS
Esto requiere jQuery biblioteca.
Tienes dos opciones:
- Crear manualmente un Selector múltiple jQuery y use
remove(). - Usa una función para que lo haga por ti.
1) Cree manualmente un selector jQuery Multiple:
$(document).ready(function() {
$("[id^=yui_], [id$=_32], [id*=yui_], [id*=_32], [id^=yui_ i], [id$=_32 i], [id*=yui_ i], [id*=_32 i], [id^=yui_][id$=_32], [id^=yui_ i][id$=_32 i]").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute containing an instance of <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yUI_</em>
</div>2. Usa una función para que lo haga por ti.
$(document).ready(function() {
// Summary: Removes an element from the DOM by substring matching attribute selectors.
// Params: att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith
function removeByAttSubstring(att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith) {
// Assign string variables for each selector that we want to create
var sBw = att + "^=" + beginsWith,
sEw = att + "$=" + endsWith,
sCbw = att + "*=" + beginsWith,
sCew = att + "*=" + endsWith;
// Create an array of the string selectors
var aSelectors = [sBw, sEw, sCbw, sCew];
// If boolean case insensitive equals true, add those strings as well
if (bCaseInsensitive === true) {
var sBwCi = att + "^=" + beginsWith + " i",
sEwCi = att + "$=" + endsWith + " i",
sCbwCi = att + "*=" + beginsWith + " i",
sCewCi = att + "*=" + endsWith + " i";
aSelectors.push(sBwCi, sEwCi, sCbwCi, sCewCi);
}
// If boolean stack attributes equals true, combine the strings
if (bBeginsAndEndsWith === true) {
var sBwaew = sBw + "][" + sEw;
aSelectors.push(sBwaew);
}
// If booleans case insensitive and stack attributes equals true, combine the case insensitive strings
if (bCaseInsensitive === true && bBeginsAndEndsWith === true) {
var sBwaewCi = sBw + " i][" + sEw + " i";
aSelectors.push(sBwaewCi);
}
// For each string in the array, construct the attribute selector.
for (var i = 0; i < aSelectors.length; i++) {
aSelectors[i] = "[" + aSelectors[i] + "]";
}
// Format the jQuery Multiple Selector
var sSelectors = aSelectors.join(", ");
// Illustration purposes only
console.log("Attribute Selectors: " + sSelectors);
// Remove the elements, if matched, entirely from the DOM
$(sSelectors).remove();
}
// Initialize function
removeByAttSubstring("id", "yui_", "_32", true, true, true);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute ends with <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
Id attribute starts with <em>yUI_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
Id attribute containing an instance of <em>_32</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yui_</em>
</div>
<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
Id attribute containing an instance of <em>yUI_</em>
</div>Parámetros:
att– (tipo: cadena) El atributo que desea hacer coincidir.beginsWith– (tipo: cadena) El valor con el que comienza el valor del atributo.endsWith– (tipo: cadena) El valor con el que termina el valor del atributo.bContains– (tipo: booleano) Si es cierto, utilice el*selector de atributo de coincidencia de subcadena para ambosbeginsWithyendsWithvariables creando nuevos selectores (no los reemplaza, agrega otros nuevos).bCaseInsensitive– (tipo: booleano) Si es verdadero, agregue nuevos selectores pero usando el indicador que no distingue entre mayúsculas y minúsculasi.bBeginsAndEndsWith– (tipo: booleano) Si es verdadero, apila los selectores de atributos. (SibCaseInsensitivees cierto, agrega otro selector apilado que también no distingue entre mayúsculas y minúsculas).
Ejemplo:
removeByAttSubstring("id", "yui_", "_32", true, true, true);
jsviolín
Notas:
- Los selectores de atributos CSS que no distinguen entre mayúsculas y minúsculas son nivel 4es posible que desee comprobar el soporte del navegador aquí. Se incluyen en la demostración para cubrir más terreno, pero es posible que no funcionen en algunos navegadores. Es por eso que también mantenemos los que distinguen entre mayúsculas y minúsculas.
-
Wow, parece mucho trabajo escribir esto, gracias. Sin embargo, no estoy seguro de cómo implementarlo en el sitio, es decir, qué va dónde y cómo lograrlo en WordPress. Como el código para la presentación de diapositivas incrustada se llama desde una fuente remota (todo el código, y más, que copié en la pregunta original), supongo que la segunda opción sería la que debería probar, pero no entiendo cuál. los bits van donde en la página.
– Rick
10 de noviembre de 2016 a las 22:47
-
@Rick El enfoque JS debe incluirse dentro de un archivo Javascript (extensión
.js), y debe ser referenciado después del jQuery biblioteca… Cree un nuevo archivo JS, pegue la parte javascript de mi respuesta allí, luego haga referencia a ella en su archivo HTML usando un<script>etiqueta, colóquela debajo del resto de la<script>referencias de etiquetas.– Ricky
10 de noviembre de 2016 a las 22:52
-
Excelente. Gracias otra vez. Intentaré mañana 🙂
– Rick
10/11/2016 a las 22:55
-
Intenté agregar el javascript, a través de un complemento (CSS y Javascript Toolbox), pero no puedo hacerlo funcionar. El código se muestra en la fuente de la página, pero no elimina la advertencia de cookies. Además, la ventana Inspeccionar elemento muestra una advertencia de que “$ no es una función. (En ‘$(documento)’, ‘$’ no está definido)”.
– Rick
11/11/2016 a las 23:57
-
jQuery no se hace referencia en absoluto, o no se hace referencia antes de su archivo javascript.
– Ricky
12 de noviembre de 2016 a las 0:35
Agradable y simple: apilar selectores de atributos. También agregué el !important directiva porque si este HTML proviene de un complemento, es probable que ya haya CSS disponible. Con !important fuerza el uso de su CSS, a menos que la otra parte use un selector aún más específico con !important. Si reemplazan CSS con JavaScript, debe recurrir a una solución JS usted mismo.
div[id^="yui_"][id$="_32"] {
display: none!important;
}<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478235091986_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_14782349638956_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_33">NOT HIDDEN
<a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
<div class="sm-eu-cookie-close">
<button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
<span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
</button>
</div>
</div>-
Gracias. Probé el CSS pero el html se escribe dinámicamente al cargar la página. Parece que el estilo está escrito dentro del javascript. Como no tengo conocimiento de javascript, creo que tendré que admitir la derrota 🙁
– Rick
10 de noviembre de 2016 a las 15:29
¿Por qué no seleccionar el div por su clase (que asumo es consistente y no se comparte con nada) en lugar de su ID?
.sm-eu-cookie-message {display: none;}– Cazador de karité Belsky
10 de noviembre de 2016 a las 4:27
Gracias. Lo he intentado por clase tanto de wordpress CSS como de Smugmug CSS, pero no hace ninguna diferencia. Supongo que, como la presentación de diapositivas se ejecuta como código incrustado, el cambio de CSS debería estar en el extremo de WordPress, pero probé ambos, por si acaso.
– Rick
10 de noviembre de 2016 a las 15:03