Discussion :

[herveD]

Bonsoir
Je souhaite masquer plusieurs onglets comme [publication] qui surcharge trop le formulaire
jtest-ext.88h.ovh/index.php?option=com_dpcalendar&view=form&Itemid=165
Comment faire
Jai essayé sans succès avec ou sans important

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#dp-tab-publishing{
	display: none!important  ;
	background-color:  #e7f1ff;
}

[NoSmoking]

Bonjour,
avec le code que tu proposes tu ne masques que l'input, qui l'est déjà d'une certaine façon !

Compte-tenu du HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type="radio"
  class="dp-tabs__input valid form-control-success"
  name="dp-event-form-tabs"
  id="dp-tab-publishing"
  aria-invalid="false">
 
<label for="dp-tab-publishing"
  class="dp-tabs__label">
  Publication
</label>
 
<div class="dp-tabs__tab dp-tabs__tab-publishing">
  <!-- le contenu -->
</div>

il te faut masquer le <label> avec par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
/* masquage de l'onglet, attention au poids du sélecteur */
.dp-tabs__label[for="dp-tab-publishing"] {
  display: none;
}

mais cela ne suffit pas car ton <input> est également accessible au clavier, touches de direction, donc il faut désactiver l'effet si celui-ci est checked :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#dp-tab-publishing:checked + .dp-tabs__label + .dp-tabs__tab {
  display: none;
}

ceci étant tu pourrais également lui affecter un attribut disabled mais pas en CSS, en JavaScript.

Un autre solution étant de passer par JavaScript pour supprimer purement et simplement ces trois éléments, voir code HTML ci-dessus, ainsi aucune modification ne pourrait s'opérer depuis l'inspecteur.

[herveD]

Re
Super, j'ai regardé cela
Le contenu est bien supprimé mais pas l'onglet lui même
Le code que j'ai copié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/* injection css, début */
.com-dpcalendar-eventform .dp-control, .com-dpcalendar-eventform .control-group {
  display: flex;
  margin-bottom: 5px;
  flex-wrap: wrap;    /* pour passage à la ligne */
}
/*  ajout avant l'élément */
.control-group.dp-field-location-ids:before {
  content: "via CSS";
  width: 100%;
}
/* injection css, fin */

Merci

[NoSmoking]

Le contenu est bien supprimé mais pas l'onglet lui même

Vérifie le poids des sélecteurs comme indiqué dans mon code CSS ci-dessus.

En résumé mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#dp-tab-publishing + .dp-tabs__label,
#dp-tab-publishing + .dp-tabs__label +.dp-tabs__tab {
  display: none;
}

devrait le faire mais il subsiste le soucis avec le clavier.

Pour une solution« radicale » en JavaScript, ajoute à ton script, celui de ta précédente discussion :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
const selector = [
  "#dp-tab-publishing",
  "#dp-tab-publishing + .dp-tabs__label",
  "#dp-tab-publishing + .dp-tabs__label +.dp-tabs__tab",
]
const elements = document.querySelectorAll(selector.join(","))
elements.forEach((el) => {
  el.remove();
})

[herveD]

Bonjour
la proposition CSS fonctionnait sur le site de test mais pas sur un autre lien du site
Du coup , je préfère la solution "radical" sachant qu'elle ne me parait pas plus compliqué

Malheureusement cela ne fonctionne pas; Il me semble avoir pourtant bien copier/collé le code

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// injection code HTML pour demander à sléectionner et/ou remplir formulaire lieu, DEBUT
document.addEventListener("DOMContentLoaded", () => {
  // récup. élément de référence
  const elRef = document.querySelector(".control-group.dp-field-location-ids");
  // création élément à ajouter, par exemple
  const newElement = document.createElement("DIV");
  newElement.innerHTML  = "Sélectionnez <b>obligatoirement un lieu</b>. Si celui-ci n'existe pas, merci de sélectionner [zAFaire] puis d'ajouter le lieu <a href='https://jtest-ext.88h.ovh/' target='_blank'>lien formulaire</a>" ;
  // insertion en dessous
  elRef.after(newElement);
  // insertion au dessus
  elRef.before(newElement);
});
// injection code HTML pour demander à sléectionner et/ou remplir formulaire lieu, FIN
 
const selector = [
  "#dp-tab-publishing",
  "#dp-tab-publishing + .dp-tabs__label",
  "#dp-tab-publishing + .dp-tabs__label +.dp-tabs__tab",
]
const elements = document.querySelectorAll(selector.join(","))
elements.forEach((el) => {
  el.remove();
})

[NoSmoking]

Le JavaScript doit être entre :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("DOMContentLoaded", () => {
  // code exécuté quand le document est chargé
});

soit par exemple pour plusieurs onglets à supprimer :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.addEventListener("DOMContentLoaded", () => {
  //--
  // tes autres codes ...
  //--
  const selector = [
    // onglet Publication 
    "#dp-tab-publishing",                 // l'INPUT
    "#dp-tab-publishing + label",         // le LABEL
    "#dp-tab-publishing + label + div",   // la DIV content
    // onglet Métadonnées 
    "#dp-tab-jmetadata",
    "#dp-tab-jmetadata + label",
    "#dp-tab-jmetadata + label + div",
    // onglet Images 
    "#dp-tab-images",
    "#dp-tab-images + label",
    "#dp-tab-images + label + div",
  ]
  const elements = document.querySelectorAll(selector.join(","));
  elements.forEach((el) => {
    el.remove();
  });
});

[herveD]

Merci pour ce support réactif
J'ai essayé avec tout le code (pour éviter les erreurs) puis en commentant le 1re qui fonctionnait, j'ai aussi vidé le cache à chaque fois
Malheureusement cela ne fonctionne pas

J'ai 2 menus dont je souhaite masquer les mêmes onglets:
jtest-ext.88h.ovh/index.php?option=com_dpcalendar&view=form&Itemid=165 mais aussi
jtest-ext.88h.ovh/index.php?option=com_dpcalendar&view=locationform&l_id=0&Itemid=166

[NoSmoking]

il manque l'accolade fermante dans le code que j'ai fourni et que je viens de corriger !!!

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("DOMContentLoaded", () => {
  // code exécuté quand le document est chargé
}); // <- manque accolade fermante

[herveD]

Bonjour
Effectivement cela fonctionne bien comme cela sauf ... que le code précédent ne fonctionnait plus si je l'insérais au point mentionné.
En repartant en arrière l'ancien code fonctionne comme ceci:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//document.addEventListener("DOMContentLoaded", () => {
 
// injection code HTML pour demander à sléectionner et/ou remplir formulaire lieu, DEBUT
document.addEventListener("DOMContentLoaded", () => {
  // récup. élément de référence
  const elRef = document.querySelector(".control-group.dp-field-location-ids");
  // création élément à ajouter, par exemple
  const newElement = document.createElement("DIV");
  newElement.innerHTML  = "Sélectionnez <b>obligatoirement un lieu</b>. Si celui-ci n'existe pas, merci de sélectionner [zAFaire] puis d'ajouter le lieu <a href='https://jtest-ext.88h.ovh/' target='_blank'>lien formulaire</a>" ;
  // si insertion en dessous   elRef.after(newElement);
  // insertion au dessus
  elRef.before(newElement);
});
 
 
 
//});

Cela fonctionne si je mets le code comme ceci:
view-source:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
document.addEventListener("DOMContentLoaded", () => {
const selector = [
    // onglet Publication joomla, dpcalendar
    "#dp-tab-publishing",                 // l'INPUT
    "#dp-tab-publishing + label",         // le LABEL
    "#dp-tab-publishing + label + div",   // la DIV content
    // onglet Métadonnées joomla, dpcalendar
    "#dp-tab-jmetadata",
    "#dp-tab-jmetadata + label",
    "#dp-tab-jmetadata + label + div",
    // onglet Options dpcalendar
    "#dp-tab-jbasic",
    "#dp-tab-jbasic + label",
    "#dp-tab-jbasic + label + div",
  ]
  const elements = document.querySelectorAll(selector.join(","));
  elements.forEach((el) => {
    el.remove();
  });
});  
 
// injection code HTML pour demander à sléectionner et/ou remplir formulaire lieu, DEBUT
document.addEventListener("DOMContentLoaded", () => {
  // récup. élément de référence
  const elRef = document.querySelector(".control-group.dp-field-location-ids");
  // création élément à ajouter, par exemple
  const newElement = document.createElement("DIV");
  newElement.innerHTML  = "Sélectionnez <b>obligatoirement un lieu</b>. Si celui-ci n'existe pas, merci de sélectionner [zAFaire] puis d'ajouter le lieu <a href='https://jtest-ext.88h.ovh/' target='_blank'>lien formulaire</a>" ;
  // si insertion en dessous   elRef.after(newElement);
  // insertion au dessus
  elRef.before(newElement);
});

mais du coup 2 fonctions séparées. Est-ce correct?

[NoSmoking]

mais du coup 2 fonctions séparées. Est-ce correct?

oui mais c'est inutile, il faut voir le

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("DOMContentLoaded", () => {
  // le(s) code(s)
});

comme un conteneur de scripts qui ne seront exécutés qu'une fois le DOM chargé.

Il faut toutefois « blinder » le code pour éviter les erreurs, comme je viens de voir sur ta page l'élément elRef n'existant pas(plus).

Au final ton code pourrait être celui-ci :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
document.addEventListener("DOMContentLoaded", () => {
  //--------------------------------------
  // suppression des onglets non souhaités
  //--------------------------------------
  const selector = [
    // onglet Publication
    "#dp-tab-publishing", // l'INPUT
    "#dp-tab-publishing + label", // le LABEL
    "#dp-tab-publishing + label + div", // la DIV content
    // onglet Métadonnées
    "#dp-tab-jmetadata",
    "#dp-tab-jmetadata + label",
    "#dp-tab-jmetadata + label + div",
    // onglet Options
    "#dp-tab-jbasic",
    "#dp-tab-jbasic + label",
    "#dp-tab-jbasic + label + div",
  ]
  const elements = document.querySelectorAll(selector.join(","));
  elements.forEach((el) => {
    el.remove();
  });
  //-------------------------------------------------------------------------------------  
  // Modification du code HTML pour demander à sélectionner et/ou remplir formulaire lieu
  //-------------------------------------------------------------------------------------
  // récup. élément de référence
  const elRef = document.querySelector(".control-group.dp-field-location-ids");
  // si existe
  if (elRef) {
    // création élément à ajouter, par exemple
    const newElement = document.createElement("DIV");
    newElement.innerHTML = "Sélectionnez <b>obligatoirement un lieu</b>. Si celui-ci n'existe pas, merci de sélectionner [zAFaire] puis d'ajouter le lieu <a href='https://jtest-ext.88h.ovh/' target='_blank'>lien formulaire</a>";
    // si insertion en dessous   elRef.after(newElement);
    // insertion au dessus
    elRef.before(newElement);
  }
});

en ajoutant un test d’existence.

[herveD]

Super
Merci
j'ai pris note, je devrais me débrouiller pour e=des ajours simples ;-)
et je peux partir qq jours plus Serain :-)