Pagina 1 di 1

CSS a tutti gli elementi tranne uno

Inviato: 05/01/2016, 12:33
da brunino
Devo rendere non cliccabili tutti gli URL in una pagina, tranne che quelli che si trovano in un div con un preciso id.
Come posso farlo?

Re: CSS a tutti gli elementi tranne uno

Inviato: 05/01/2016, 15:40
da Sir Xiradorn
Mmmm non è una domanda banale. Ti do uno spunto poi vedo se ho tempo di provare a estrarre un po di codice. Sarebbe più facile se ai link tu dessi ad esempio una classe spicifica. Allora potresti fare una cosa del genere:

Chiami la classe ad esempio x_token_activator e poi fai una cosa del genere

Codice: Seleziona tutto

/**
 * Global Href Remover except for x_token_activator links
 */
(function(){
  var x = document.getElementsByTagName('a');
  for (i=0; i<x.length; i++) {
    if(x[i].getAttribute('class') !== 'x_token_activator') {
      x[i].removeAttribute('href');
    }
  }
})();
EDIT: Non ho il tempo di verifica ma credo vada fatta una piccola regex per il filtraggio di classe in caso di classi multiple

Se vuoi avere un container allora devi procedere diversamente. Dovresti individuare comunque tutti i link e andare pero per nodi ad esempio. E dire se il nodo parent del link o in soldoni il padre o ancora più semplicemente il contenitore del link ha quel contenitore, allora non toglierli lo href ma ti complichi un po (non tanto alla fine) la vita

EDIT2 Ho fatto una cosa del genere e se la provi nella console del tuo browser fa questo: In questa pagina proprio va a rimuovere tutti i link e fa restare attivi SOLO e SOLTANTO quelli che si trovano nella barra sottostante con servizi, regolamento, collabora, ecc e quindi non dovreste essere più in grado di cliccare altri link eccetto i suddetti. Il che è piuttosto frustrante :twisted: :twisted: :twisted: :twisted: Provate e dite che ne pensate. Che nervi :lol: :lol: :lol: :lol:

Codice: Seleziona tutto

/**
 * Global Href Remover except links into container
 * @author Sir Xiradorn <http://xiradorn.it>
 */
(function(){
  // config
  var config = {
    id        : 'fmenu',
    colorTxt  : 'gray',
    cursor    : 'not-allowed'
  };
  
  var x = document.getElementsByTagName('a');
  for (i=0; i<x.length; i++) {
    var nodeGrabber = x[i].parentNode.parentNode;
    if (nodeGrabber.getAttribute('id') !== config.id) {
      x[i].removeAttribute('href');
      x[i].style.cursor = config.cursor; // tanto per far crescere la rabbia :lol:
      x[i].style.color = config.colorTxt;
      x[i].style.textDecoration = 'none';
    }
  }
})();
Parti da questo esempio e individua i nodi con il tuo attributo. Basta eliminare un parentNode e al posto del id fmenu inserire il tuo id. Dovrebbe fungere.

Re: CSS a tutti gli elementi tranne uno

Inviato: 05/01/2016, 17:55
da brunino
Grazie, proverò sicuramente appena possibile!
Ma non bastava usare semplicemente queste proprietà css?

Codice: Seleziona tutto

pointer-events: none;
cursor: default;

Re: CSS a tutti gli elementi tranne uno

Inviato: 05/01/2016, 19:03
da Sir Xiradorn
Non è compatibile su IE fino alla versione 11 mentre così hai compatibilità su tutto. Aggiungo che quella soluzione non esclude la tua, ma potenzieresti il tutto. Usale entrambe insieme o anche implementarla anche la dentro nel codice aggiungendo:

Codice: Seleziona tutto

x[i].style.pointerEvents = 'none';
Hai davvero più vie.

IMPORTANTISSIMO: Per i link nell'id è facile da css e il pointer-events è molto compatibile. Quella condizione, però, usata nei CSS3 e quindi attraverso pseudo-selettori, NON è compatibile su vecchi browser e con lo pseudo-selettore :not(...) tale soluzione CSS lo è ancor meno.

In ogni caso

Codice: Seleziona tutto

:not(#fmenu) a {
    pointer-events: none;
}
#fmenu a {
    pointer-events: auto !important;
}

Re: CSS a tutti gli elementi tranne uno

Inviato: 05/01/2016, 20:05
da brunino
Perfetto. Grazie mille.

Re: CSS a tutti gli elementi tranne uno

Inviato: 06/01/2016, 12:00
da Sir Xiradorn
Ho fatto un test e funziona. Così è ultra compatibile anche a ritroso. Il Browser pensavo non avesse memoria della cosa ma invece può farlo tranquillamente. Quindi ti basta fare così

Codice: Seleziona tutto

a {
    pointer-events: none;
}
#fmenu a {
    pointer-events: auto !important;
}
Inoltre se vuoi farlo per una pagina specifica assicurati che questa abbia almeno un ID o una CLASS di riferimento in maniera da poter fare qualcosa del genere e poter applicare il css globalmente senza dar fastidio alle altre pagine. Ammesso che la tua pagina abbia un id del tipo .mia_pagina puoi scrivere una cosa del tipo

Codice: Seleziona tutto

.mia_pagina a {
    pointer-events: none;
}
.mia_pagina #fmenu a {
    pointer-events: auto !important;
}
E non servirebbe nemmeno l'important visto la specificity