Faire apparaitre du contenu html avec du CSS, ou JS

[bplc]

Bonjour,

j'aurais aimer savoir si il exister une façon de faire apparaitre du contenu html avec du CSS,


Je sais que le javascript est plus adapté et je ne suis pas contre, mais le connaissant assez mal, ce n'est pas simple.



Au niveaux JS la seule chose que j'ai réussi a faire pour l'instant, est de changer l'attribut d'un CSS via le sélecteur querySelector

Code:

$(function(){ 
document.querySelector(".MON_CSS").style.MON_ATTRIBUT_CSS = "MA_VALEUR_CSS"
;});

je suppose que en suivant cette méthode, je devrais pouvoir injecter du texte, ou du code.

Je suis encore bien a la ramasse niveau DOM, je n'arrive toujours pas a sélectionner exactement ce que je veux, et j'ai pas mal de bug bizarre, mais j'avance a mon rythme ^^ et pour l'instant je suis très content d'avoir réussir a injecter un attribut CSS xD


Merci bien ^^

[chattigre]

Bonjour,

Non, c'est impossible, ou du moins très très limité.
Le seul moyen d'écrire du contenu, en CSS, c'est via les pseudos-classes :before et :after, ajoutées avant ou à la suite d'un sélecteur.

Par exemple, si vous avez une div et que vous voulez mettre un en-tête en CSS, c'est possible : Il vous faut utiliser pour cela la propriété content

Code:

.div-avert:before {
  color: red;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Arial';
  display: block;
  content: 'AVERTISSEMENT :';
}

Je vous invite à lire la documentation de la propriété sur MDN (Site que je conseille pour tout ce qui concerne HTML et CSS au moins.

---
Concernant Javascript, je vous conseille l'utilisation de la librairie JQuery pour tout ce qui est manipulation de contenu elle est très simple !
Elle est incluse nativement sur Forumactif, si vous voulez l'utiliser ailleurs ou dans une page HTML sans haut/bas de page du forum il vous faut l'appeler dans la section head de la page.

La documentation officielle
Un site qui regroupe les méthodes et leur usage de manière un peu moins technique et avec exemples interactifs

En gros, pour tout ce qui est manipulations de contenu, vous devez préciser le sélecteur CSS en écrivant $("selecteur_CSS") suivi des méthodes souhaitées.
Quelques exemples :

Code:

$("#div_accueil").html('<b>Bienvenue</b>'); //change le HTML de l'élément #div_accueil pour Bienvenue (en gras)
$("h2").first().before('<h1>Commençons par le commencement</h1>'); //Ajoute un titre h1 avant le premier titre h2 de la page
$(".tableau-perso").css("background-color", "red"); //arrière-plan rouge pour les .tableau-perso
$(".div-admin").remove(); //supprime de la page les .div-admin
$("a[href*='newtopic']").addClass("newtopic-btn"); //cible les boutons de nouveau sujet (attribut href contenant newtopic) et leur ajoute une classe newtopic-btn
$("a[href*='newtopic']").removeClass("btn-red"); // idem, retire la classe btn-red à ceux qui l'ont
$("a[href*='newtopic'][href*='f12']").attr('href', '/h12-formulaire-demande'); //remplace les attributs href des liens de nouveaux sujets ET vers le forum f12 par l'adresse d'une page HTML.
$("div").removeAttr('data-title'); //retire l'attribut data-title des div qui le possèdent
$("#input_username").val(); //recupère la valeur - pour un champ de formulaire -
... .show() //affiche l'élément s'il est masqué en CSS
... .hide() // IDEM, masque l'élément
... .toggle() // Affiche ou masque l'élément alternativement

Le gros avantage est que il suffit d'avoir le sélecteur CSS de ce qu'on veut cibler... Personnellement je le trouve bien moins prise de tête que le JS pur ^^
A noter que vous pouvez mélanger JS et JQuery sans problème dans de nombreux cas !

Bonne journée
Cordialement

[bplc]

Bonjour,

merci, j'utilise actuellement effectivement content, et les pseudos-classesbefore etafter, pour remplacer du texte, le plus marrant est que j'avais la même page dedocumentation MDN ouverte ^^, la je m'intéresse a ATTR, mon idée étais de trouver un moyens d'injecter mon code d'une manière aussi simpliste que URL pour les images.

Je vais me renseigner sur l'utilisation de la librairie JQuery, elle m'a l'air effectivement plus intuitive ^^

j'ai essayé avec 

Code:

$(".MONCSS").css("background-color", "red"); 

cette formulation n'a pas l'air de fonctionner en l'état, je vais me renseigner un peu plus. 

Bien a vous.

[chattigre]

j'ai essayé avec 

Code:

$(".MONCSS").css("background-color", "red"); 

cette formulation n'a pas l'air de fonctionner en l'état, je vais me renseigner un peu plus. 

Bonjour,

Normalement, cela devrait fonctionner et mettre un fond de couleur rouge à tous les éléments avec un attribut class="MONCSS".

Essayez d'entourer l'ensemble de votre code de cette façon :

Code:

$(function() {
  //votre code ici
});

Cela permet d'attendre la fin de la génération du document avant d'exécuter le script (cette écriture se base sur JQuery)

Le code JS doit être placé dans un code Javascript personnalisé dans le PA / Modules / HTML & Javascript - Gestion des codes Javascript.
Créez un nouveau code Javascript, placé à l'endroit approprié (sur Toutes les pages par exemple) plus collez votre code

Vérifier que l'option "Activer la gestion des codes Javascript" est bien sur Oui également. ^^

Bonne journée

[bplc]

Bien vu, c'est de ma faute, j'avais bien lu l'article de EA, qui parler de ralentir l'exécution du JS, je l'avais oublié merci bien ^^


Je viens de tester, effectivement cela est plus simple que mon selecteur ^^

[bplc]

Tu ne m'enlèveras pas l'idée que c'est un merdier complet cette façon de procéder en version mobile ^^
Faut pas oublier d'affecter une class au template mobile pour assigner certain élément, et créer un display block pour que les selecteurs fonctionnent comme prévu.

L'essentiel est que cela fonctionne bien ^^

[chattigre]

Tu ne m'enlèveras pas l'idée que c'est un merdier complet cette façon de procéder en version mobile ^^
Faut pas oublier d'affecter une class au template mobile pour assigner certain élément, et créer un display block pour que les selecteurs fonctionnent comme prévu.

L'essentiel est que cela fonctionne bien ^^

La classe, elle existe déjà, c'est un id plus précisément : #mpage-body-modern sur la balise body
Donc pour cibler quoi que ce soit sur mobile, il faut précéder le sélecteur par l'id de ce body, ce qui permet de ne cibler que le mobile

Par contre, je n'ai pas bien compris le rapport avec le display: block; ?

Bonne journée !

[bplc]

Code:

  $("#mpage-body-modern")("a[href*='FID'").css("background-color","blue");

Code:

$("#mpage-body-modern.a[href*='FID'").css("background-color","blue");

???

Par contre, je n'ai pas bien compris le rapport avec le display: block; ?

Car pour réussir a obtenir le résultat que je souhaitez, j'ai utilisé une faille dans le CSS, et que le display block me permet via cette faille d'injecter mon code directement dans la version web et mobile.


Je ne suis pas contre une utilisation normal, pour éviter tout conflit future par contre ^^

[chattigre]

Re,

Non, tout simplement un espace ^^
A B signifie "B dans A", mais peu importe le nombre de niveaux entre les deux.
Donc

Code:

$("#mpage-body-modern a[href*='FID']").css("background-color","blue");

Attention à bien refermer votre crochet : ]

Au passage, pour cibler le titre du forum uniquement dans la liste sur l'index, sur mobile, je vous conseille #mpage-body-modern .forum-content a[href*='FID'] h3 (sinon on cible TOUS les liens peu importe leur emplacement

Car pour réussir a obtenir le résultat que je souhaitez, j'ai utilisé une faille dans le CSS, et que le display block me permet via cette faille d'injecter mon code directement dans la version web et mobile.


Je ne suis pas contre une utilisation normal, pour éviter tout conflit future par contre ^^

Qu'essayez-vous de faire exactement ?  Pourriez-vous me transmettre une capture et votre CSS ?

[bplc]

Je reprend tout depuis zéro, je laisse ma bidouille de coté, effectivement le JS, est beaucoup mieux.

Pour l'instant ce que j'essais de faire, c'est un display none ou mieux un visibility Hidden, pour effacer mon texte.
Puis le  réinjecter via CSS avec un :after  content ou en JS avec un document.write

Code:

$("#mpage-body-modern .forum-content a[href*='f19'] h3").css("display","none");
$("#mpage-body-modern .forum-content a[href*='f19'] h3").css("visibility","Hidden");

bon maintenant la réécriture ^^ je cherche, mais pas facile avec la syntaxe, la moindre erreur est fatal ^^

[chattigre]

Code:

$("#mpage-body-modern .forum-content a[href*='f19'] h3").css("display","none");
$("#mpage-body-modern .forum-content a[href*='f19'] h3").css("visibility","Hidden");

bon maintenant la réécriture ^^ je cherche, mais pas facile avec la syntaxe, la moindre erreur est fatal ^^

Pourquoi le masquer ?

Il suffit de remplacer le contenu du h3 par ce que vous voulez en utilisant la méthode html

Code:

$("#mpage-body-modern .forum-content a[href*='f19'] h3").html('votre contenu HTML');

Après, il peut aussi être bien de passer aussi via JS pour la version PC et de se limiter à du texte pour le champ "Nom du forum", car le HTML n'est pas interprété dans les notifications par e-mail...
Mais si on se limite à la version mobile, vous avez une solution

N'hésitez pas à détailler ce que vous voulez faire (quel forum, quel contenu...) pour que je puisse vous aider, comme ça une fois que vous aurez compris comment le faire une fois, vous pourrez le refaire

[bplc]

Pour faire simple je voudrais remplacer le TEXTE de mon TITRE sur mobile situé a :

Code:

#mpage-body-modern .forum-content a[href*='FID'] h3

, par un autre TEXTE.

J'ai essayer plein de méthode différente sans succès, avec replace, document.write ...

Mais celle la me semble correct même si cela ne fonctionne pas encore :

Code:

$("#mpage-body-modern .forum-content a[href*='FID'] h3").innerHTML ("texte_de_remplacement");

Code:

var MAVARIABLE = $("#mpage-body-modern .forum-content a[href*='FID'] h3");
  MAVARIABLE.innerHTML = "texte_de_remplacement"

[bplc]

J'ai trouvéééééé !!!!!!!!!!

Avec le queryselector seulement ^^

Code:

$(function() {
  var MAVARIABLE = document.querySelector("#mpage-body-modern .forum-content a[href*='FID'] h3");
  MAVARIABLE.innerHTML = "texte de remplacement"
});

Je n'arrive pas a l'adapter au format jQuery, j'ai tout essayé, il existe surement une expression que je ne connais pas pour la nommer.

[chattigre]

Re,
--- Je vois que vous avez édité votre message pendant que je répondais, mais vous pouvez le lire quand même pour comprendre la logique. Je parlais de ce code : ---

Vous vous compliquez la vie pour pas grand chose avec ce code ^^

Spoiler:

Les variables sont utiles dans le cas de manipulations répétées, de contenu d'un élément intégré à un autre, etc, et surtout pour alléger le code, mais ici elle est pleinement dispensable

De même, inutile de "vider" d'abord le html pour le modifier :

Code:

MAVARIABLE.html(''); //On vide le HTML
newcontent.appendTo(MAVARIABLE);  //On ajoute à la suite de l'élément représenté par MAVARIABLE le contenu newcontent

D'autant qu'il faut dans ce cas d'abord définir le nouveau contenu dans la variable, il ne s'invente pas ^^

Code:

var newcontent = '<p>Mon nouveau contenu</p>';

(au début du code)

Pour l'instant je me contente d'apprendre la logique du JS, qui n'est pas facile ^^

Je comprends.
Une fois qu'on a compris, je ne dis pas qu'on fait des miracles, mais ce genre de manipulations de contenu, extrêmement basique comparées à l'éventail d'options du JS, devient simple .

Si je comprend bien ce code veux dire remplacer h3 a l'adresse "#mpage-body-modern .forum-content a[href*='f19']" par "votre contenu HTML" dans la version mobile.
Je viens d'essayer cela n'a pas l'air de fonctionner, a moins que j'ai oublié de spécifier quelque chose au code ?

Vous ciblez le ou les élément(s) -ici le- #mpage-body-modern a[href*='f19'] h3, autrement dit tout élément qui corresponde à ce sélecteur CSS.
Vous utilisez la méthode .html(), qui n'a pas pour effet de remplacer l'élément mais le contenu de l'élément, autrement dit, avec cette méthode, votre h3 reste un h3, mais son contenu est modifié.

Sachant que le HTML n'est pas géré dans les titres Vmobile, je me suis dit que, peut être  sans balise, cela injecteras seulement du texte, mais apparemment non.

Nuançons
Le code généré par le forum supprime les balises HTML avant de générer la page, affichant ainsi le texte brut, sans mise en forme, au lieu de laisser les balises et leur interprétation. Cela, c'est côté serveur, le contenu envoyé au client (votre navigateur web) est donc ainsi formé de texte sans balises HTML et donc sans autre mise en forme que celle d'un h3 placé à cet endroit, peu importe le contenu original.
Ce n'est pas la zone qui ne gère pas le HTML, c'est ce que le serveur génère dans cette zone qui ne contient pas de HTML...

Javascript vous permet de modifier le contenu envoyé par le serveur après coup.
Si un élément existe et que vous demandez au code Javascript d'y insérer du HTML, il insère du HTML. Ce que le serveur génère au départ ne change rien. Là est toute la puissance du JS : Modifier le résultat du serveur par ce qu'on veut.
Si vous voulez essayer, il existe la méthode text(), qui vous permet de remplacer le contenu de la cible par du texte brut. Si vous essayez .text("<p>Mon texte</p>"), vous n'obtiendrez pas un paragraphe contenant "Mon texte" mais un simple texte "<p>Mon texte</p>". Cette méthode échappe les balises html < et >, ce qui a pour effet de les afficher textuellement au lieu qu'elles soient interprétées.

Je comprend, mais comment procéder pour injecter juste du texte alors ?

Comme pour du HTML, suffit de passer à la méthode html() un argument sans balises : html('Mon texte')


Tout ça pour dire que, en pensant bien à retarder l'exécution avec $(function() {... });, on a le code suivant :

Code:

$(function () {
  $("#mpage-body-modern .forum-content a[href*='f1'] h3").html('Test JS');
});

(ici pour le forum f1, sur la version mobile, on remplace son nom sur l'index par "Test JS")

Spoiler:

On pourrait faire pareil pour la version PC, en adaptant le sélecteur.

Bonne soirée

[bplc]

re,
oui désolé, j'ai décidé de synthétiser un peu, car je me disperser un peu trop dans tout les sens, j'ai pourtant essayer avec HTML et même TXT par logique, mais cela n'a pas marché, j'ai dû faire une faute dans l'écriture :/ 
peut être un " au lieu d'un ', écrit html en MAJ ou laissé du code aux mauvais endroit, je ne sais pas.


Effectivement c'est mieux de modifier le contenu de l'élément, plutôt que cette élément, en tout cas dans mon cas ^^

Une fois qu'on a compris, je ne dis pas qu'on fait des miracles, mais ce genre de manipulations de contenu, extrêmement basique comparées à l'éventail d'options du JS, devient simple Smile .

Simple pas encore dans mon cas, je fais encore beaucoup d'erreur, mais cela me permet de comprendre un peu mieux la structure du code, la syntaxe c'est pas encore ça ^^ 
(enfin j'ai compris, mais le code est tellement sensible a la casse, que j'arrive toujours a faire un connerie ^^)


Oui je commence a comprendre la lecture inversé du JS, ainsi que ce que je nommerais la réécriture du code ^^


J'avais utilisé cette méthode utilisant une variable :

Code:

$(function() {
  var MAVARIABLE = document.querySelector("#mpage-body-modern .forum-content a[href*='FID'] h3");
  MAVARIABLE.innerHTML = "texte de remplacement"
});

Içi je n'ai pas réussi a le faire fonctionner, sans document.querySelector, comment faire avec votre méthode d'écriture en jquery ?
j'ai essayé cela, mais sans succès :

Code:

var MAVARIABLE = ("#mpage-body-modern .forum-content a[href*='FID'] h3");

Code:

var MAVARIABLE = $("#mpage-body-modern .forum-content a[href*='FID'] h3");

Et inversement comment utiliser un innerHTML sans variable ?

Code:

$("#mpage-body-modern .forum-content a[href*='f7'] h3").innerHTML('TEXTE');

Sans succès non plus :/

---------------------

J'avais compris l'idée de HTML, le nom dit tout ^^ effectivement le champ des possible s'ouvre.

On pourrait faire pareil pour la version PC, en adaptant le sélecteur.

• Vous penser a une structure comme cela ?
  

Code:

$(function() {

$("adress-CSS-WEB").HTML('TEXTE');
$("adress-CSS-MOBILE").HTML('TEXTE');

});

• ou un méthode comme celle çi :
  

(cela me semble théoriquement possible, j'ai conscience que je l'ai mal écrit, mais je pense que vous comprendrais)

Code:

var MAVARIABLE = ("#mpage-body-modern")

Code:

$("MAVARIABLE + .forum-content a[href*='f7'] h3").innerHTML('MONTEXTE');

(mal écrit, je me doute que MAVARIABLE ne ce rajoute pas dans le champ d'adress-CSS)
du coup je pourrais mettre une condition qui si, détermine la version d'affichage, ajoute ou supprime MAVARIABLE qui est le CSS mobile est avoir un code adaptatif aux deux version, me permettant ainsi d'alléger le code, et de garder mon code dans les deux version.
(Je me répète, j'ai conscience de l'avoir écrit de la pire des manière possible, mais c'est pour vous donner une idée du principe)

• ou simplement une autre méthode que je ne connais pas pour adapter le sélecteur comme vous dite ^^
  
  

Bonne soirée

[chattigre]

Bonjour,

J'avais utilisé cette méthode utilisant une variable :

Code:

$(function() {
  var MAVARIABLE = document.querySelector("#mpage-body-modern .forum-content a[href*='FID'] h3");
  MAVARIABLE.innerHTML = "texte de remplacement"
});

ça, on est bien d'accord que ça marche ? ^^

Code:

    var MAVARIABLE = ("#mpage-body-modern .forum-content a[href*='FID'] h3");

Non, manque le $, qui fait appel à JQuery. Il est indispensable

Code:

    var MAVARIABLE = $("#mpage-body-modern .forum-content a[href*='FID'] h3");

Pourquoi pas.
Et après :

Code:

MAVARIABLE.html('<p>Un paragraphe</p>');

Mais à moins de cibler de nombreuses fois l'élément représenté par MAVARIABLE, dans ce cas ça peut servir à raccourcir l'écriture, la variable est dispensable.

Code:

    $(function() {
   
    $("adress-CSS-WEB").HTML('TEXTE');
    $("adress-CSS-MOBILE").HTML('TEXTE');
   
    });

Exactement pour la structure.
En revanche, Javascript est sensible à la casse donc .html() en minuscule. Et on pparle plutôt de sélecteur CSS.
Si le texte est le même sur PC et mobile, on peut même fusionner en une ligne :

Code:

$(function() {
  $("selecteurweb, selecteurmobile").html('...');
});

Comme on appliquerait un CSS à plusieurs sélecteurs en les séparant par une virgule

(mal écrit, je me doute que MAVARIABLE ne ce rajoute pas dans le champ d'adress-CSS)
du coup je pourrais mettre une condition qui si, détermine la version d'affichage, ajoute ou supprime MAVARIABLE qui est le CSS mobile est avoir un code adaptatif aux deux version, me permettant ainsi d'alléger le code, et de garder mon code dans les deux version.
(Je me répète, j'ai conscience de l'avoir écrit de la pire des manière possible, mais c'est pour vous donner une idée du principe)

On utilisera plutôt deux sélecteurs propres à leur version (un pour mobile, un pour PC) en deux lignes ou séparés par une virgule, comme je l'ai dit plus haut.

Si JQuery ne trouve rien (le comportement n'est pas le même en JS pur), JQuery ne fait rien, point barre
Donc vous mettez vos deux codes, et celui qui aura une cible existante aura un effet, l'autre tombera dans le vide sans rien changer, puisque son sélecteur ne correspond à rien.
Si je fais

Code:

$("span, div").text("Ceci est une div ou un span");

Le code (parfaitement bidon ) va chercher toutes les div et tous les span et remplacer leur contenu.
Mais s'il y a 15 div et pas de span, bah le code agira sur les div et passera son chemin sur les span, tout simplement car elles n'existent pas.

[bplc]

Génial vous venez de répondre a plusieurs de mes interrogations, et un seul post ^^

Pour l'instant j'avance étape par étape, j'essais de comprendre comment insérer les éléments, et ou.


Je ne suis pas un fou de la variable ^^j'essai de raccourcir le code un maximum pour le rendre lisible et digeste.
j'ai ma petite idée de ce que je veux faire, mais avant j'essai de comprendre comment cela fonctionne, ce qui est possible ou pas de faire, je trouve cela plus instructif que de juste demander un code tout fais ^^

Et imaginons que je puisse insérer une variable FID dans mes variables "selecteurweb"et "selecteurmobile"
Je pense que vous comprenez ou je veux en venir ^^

Voici le code que j'ai mis au point dans la journée, de ce que j'ai vu il fonctionne très bien : 

Code:

$(function() {

$("#mpage-body-modern .forum-content a[href*='FID'] h3").html('Mon-html'); //S-mobile
$("h2.hierarchy a[href*='FID']").html('Mon-html'); //S-web
});

J'ai utilisé : h2.hierarchy a[href*='FID'] comme sélecteur web, je ne sais pas si c'est la meilleur manière de l'écrire, mais en l'état il fonctionne. 

Je viens d'utiliser votre méthode et rajouter $ a ma variable et simplifier le code, mais cela ne marche pas :
(même sans simplification, l'ajout de $, ne fonctionne pas)

Code:

$(function() {

 var selecteurmobile = $("#mpage-body-modern .forum-content a[href*='FID'] h3");
 var selecteurweb = $("h2.hierarchy a[href*='FID']");

$("selecteurweb, selecteurmobile").html('Mon-html');

});

 J'ai du mal a identifier d'ou viens l'erreur :/

[bplc]

J'ai réussi a les faire fonctionner tous les deux ensemble avec cette syntaxe mais sur deux script différent :

script 1 :  

Code:

var MAVARIABLE1 = $("h2.hierarchy a[href*='FID1']");
MAVARIABLE1.html('<p>Un paragraphe1</p>');

script 2 :

Code:

var MAVARIABLE2 = $("#mpage-body-modern .forum-content a[href*='FID2'] h3");
MAVARIABLE2.html('<p>Un paragraphe2</p>');

cette méthode fonctionne aussi :
Mais que si je créer mes 2 "MAVARIABLE.html", si j'en suprime une par exemple le code ne fonctionne plus.
(je ne parle pas de la déclaration de mes variables, mais bien de " MAVARIABLE.html('<p>Un paragraphe</p>'); " )

Code:

var MAVARIABLE1 = $("h2.hierarchy a[href*='FID1']");
var MAVARIABLE2 = $("#mpage-body-modern .forum-content a[href*='FID2'] h3");
  
MAVARIABLE1.html('<p>Un paragraphe1</p>');
MAVARIABLE2.html('<p>Un paragraphe2</p>');

(petite erreur sur version web, le titre est un peu plus petit, problème de css, peux être un problème d'adresse)
(Fonctionnes pour du texte, j'ai du code css qui n'est plus interpréter par contre sur la version mobile, des bug étranges, je ne pense pas que ce soit la meilleur manière d'écrire ^^ )

C'est officiel j'ai perdu mon sang froid   

J'ai tout essayé, le JS n'a aucune logique   !!!

Affiché sur pc pas sur mobile :
$((mvr1),(mvr2)).html('texte');

Affiché sur mobile pas sur pc :
((mvr1),(mvr2)).html('texte');

Quelle rapport avec ce #@!"# de  "$" ???

Je vais me dire que j'ai un conflit dans les adresses d'ou ces bug sinon, rien n'as de sens.

[chattigre]

Re,

Je ne suis pas un fou de la variable ^^j'essai de raccourcir le code un maximum pour le rendre lisible et digeste.
j'ai ma petite idée de ce que je veux faire, mais avant j'essai de comprendre comment cela fonctionne, ce qui est possible ou pas de faire, je trouve cela plus instructif que de juste demander un code tout fais ^^

Et imaginons que je puisse insérer une variable FID dans mes variables "selecteurweb"et "selecteurmobile"
Je pense que vous comprenez ou je veux en venir ^^

Pour quelques lignes, si on peut s'en passer sans s'arracher les cheveux en structures imbriquées, on s'en passe des variables, c'est plus simple

Je vois ce que vous voulez dire.

Il ne faut pas confondre Objet JQuery / JS et chaine de caractères.
- "#mpage-body-modern .forum-content a[href*='FID'] h3" est une chaine de caractères, entre guillemets (simples ou doubles, pour ça, ça change rien);
- $("#mpage-body-modern .forum-content a[href*='FID'] h3") est un Objet JQuery construit à partir d'un argument, la chaine de caractères.

Vous ne pouvez pas passer en argument pour créer un objet une variable qui contient déjà un objet.
Bon code :

Code:

var MV = "#mpage-body-modern .forum-content a[href*='FID'] h3";
$(MV).html('...');

//OU
var MV = $("#mpage-body-modern .forum-content a[href*='FID'] h3");
MV.html('...');

Pas un mélange des deux.
Variable string => Argument sélecteur (ou autre) $(MV).methode(arguments)
Variable Object => Cible directe de la méthode avec MV.methode(arguments)

Et une variable ne se met pas entre guillemets (ça peut, mais on va faire simple) :

Code:

$("#mpage-body-modern .forum-content a[href*='"+FID+"'] h3"); //On coupe la chaine, on ajoute la variable avec + puis la suite de la chaine de la même manière

J'ai utilisé : h2.hierarchy a[href*='FID'] comme sélecteur web, je ne sais pas si c'est la meilleur manière de l'écrire, mais en l'état il fonctionne.

Sans doute que non si vous constatez des anomalies visuelles, ou alors c'est le contenu que vous mettez dans html qui ne va pas

Je viens d'utiliser votre méthode et rajouter $ a ma variable et simplifier le code, mais cela ne marche pas :
(même sans simplification, l'ajout de $, ne fonctionne pas)

Problème : Vous mettez une variable objet en argument (l'argument doit être une chaine) ET la varaible entre guillemets, donc comme simple chaine, pas comme variable.

Ce que j'ai envie de vous conseiller là, c'est de mettre les deux sélecteurs ensemble, pas besoin de couper en deux. Une virgule entre les deux sélecteurs suffit.
Soit dans une variable objet var selectors = $("selpc, selmobile"); soit dans une chaine "selpc, selmobile".
Selon la méthode choisie, suivie de selectors.html('...'); ou de $(selectors).html('...');

Mais que si je créer mes 2 "MAVARIABLE.html", si j'en suprime une par exemple le code ne fonctionne plus.

Sans doute une faute de frappe, car l'ensemble me semble correct et donc supprimer l'un des 2 ne devrait rien changer.

(petite erreur sur version web, le titre est un peu plus petit, problème de css, peux être un problème d'adresse)
(Fonctionnes pour du texte, j'ai du code css qui n'est plus interpréter par contre sur la version mobile, des bug étranges, je ne pense pas que ce soit la meilleur manière d'écrire ^^ )

Un problème de sélecteur sans doute.
Il serait peut-être temps de vous fixer sur un vrai code avec du vrai HTML qui corresponde à ce que vous voulez concrètement pour un forum, ça devrait nous aider à savoir quel sélecteur prendre pour ne pas tout casser

J'ai tout essayé, le JS n'a aucune logique MDR !!!

Si si ^^.
Comprendre la distinction chaine (string) / obje(c)t / variable devrait vous aider à la trouver

[bplc]

Objet JQuery / JS et chaine de caractères, ok j'assimile, je risque de faire encore l'erreur mais j'ai compris ^^

+FID+ : juste génial     , mais pas pour aujourd'hui, la prochaine étapes ^^

J'ai utilisé : h2.hierarchy a[href*='FID'] comme sélecteur web, je ne sais pas si c'est la meilleur manière de l'écrire, mais en l'état il fonctionne.

Sans doute que non si vous constatez des anomalies visuelles, ou alors c'est le contenu que vous mettez dans html qui ne va pas 

Tout me laisse penser que je me suis tromper, mais cela me semble juste :/ pour le contenu html, je pense que vous le connaissez deja
c'est simplement les DIV et les SPAN contenant les class pour la traduction :
(je test aussi bien avec le html, que du simple texte, a chaque fois)

Code:

<div class="fa_translate_container">
<span class="fa_translate fa_translate\_fr">TEXTE_FR</span>
<span class="fa_translate fa_translate_en">TEXTE_EN</span>
</div>

"_" demande un antislash ??

Sans doute une faute de frappe, car l'ensemble me semble correct et donc supprimer l'un des 2 ne devrait rien changer.

Je pense pareil, c'est pourquoi j'ai d'abord télécharger un pluging pour vider le cache, mais cela n'a rien changé, du coup je me suis dit surement un conflit dans les sélecteurs (adresse), je vais essayer de retravailler ce bout de code avec vos nouveaux conseils voir si un miracle ce produit.

Comprendre la distinction chaine (string) / obje(c)t / variable devrait vous aider à la trouver

Ne surestimer pas trop mon intelligence javascript , j'ai compris ce que vous avais voulu me faire comprendre, de la a réussir a l'appliquer sans faire aucune erreur de frappe,  trouver les bon sélecteurs.. sachant que la moindre petite erreur, va me faire perdre un temps fou et la raison...

J'ai besoin d'une petite pause avant et je m'y remets ^^ 
Ne trouvant pas la réponse j'ai essayé de brute forcé la syntaxe par logique, 
mais sans notion de "chaine / object / variable", j'aurais pu continuer longtemps ^^

[bplc]

Code:

var MAVARIABLE1 = $("h2.hierarchy a[href*='FID1']");
var MAVARIABLE2 = $("#mpage-body-modern .forum-content a[href*='FID2'] h3");
  
MAVARIABLE1.html('<p>Un paragraphe1</p>');
MAVARIABLE2.html('<p>Un paragraphe2</p>');

Fonctionne parfaitement maintenant a ne plus rien comprendre, enfin toujours un léger bug d'affichage, j'ai du envoyer trop de script a la minute et faire bugger le server je pense xD 

bref maintenant je vais essayer de la simplifier avec votre méthode ^^


Bon

Ce que j'ai envie de vous conseiller là, c'est de mettre les deux sélecteurs ensemble, pas besoin de couper en deux. Une virgule entre les deux sélecteurs suffit.
Soit dans une variable objet var selectors = $("selpc, selmobile"); soit dans une chaine "selpc, selmobile".
Selon la méthode choisie, suivie de selectors.html('...'); ou de $(selectors).html('...');

Je suppose que c'est cela que vous voulez que je fasse :

Code:

var MV1 = $("h2.hierarchy a[href*='f19']");
var MV2 = $("#mpage-body-modern .forum-content a[href*='f19'] h3");
var MV3 = $("MV1, MV2");
 
MV3.html('<p>Un paragraphe1</p>');

ca ne marche pas vraiment, pourtant j'ai bien limité l'object a la variable.

Et dans l'autre sens même résultat :

Code:

var MV1 = "h2.hierarchy a[href*='f19']";
var MV2 = "#mpage-body-modern .forum-content a[href*='f19'] h3";
var MV3 = "MV1, MV2";
 
$(MV3).html('<p>Un paragraphe1</p>');

Pour éviter la confusion je suis revenu sur un baground color :
ici j'ai testé chacune de mes variable une a une, le fond rouge s'affiche de partout, sauf pour MV5

Code:

var MV1 = "h2.hierarchy a[href*='f19']";
var MV2 = "#mpage-body-modern .forum-content a[href*='f19'] h3";
var MV3 = ".table-title";
var MV4 = ".forumtitle";  
var MV5 = "MV3, MV4";
  
$(MV5).css("background-color", "red");

si je fais un :

Code:

$(MV3, MV4).css("background-color", "red");

 cela ne marche pas non plus, du coup je conclus que la syntaxe est mauvaise.

Finalement 

Code:

"a.forumtitle[href*='f19']"

me semble mieux pour la version web, j'était trop focalisé sur le fait que forumtitle n'existe plus en web que je l'ai carrément enlever, la fatigue ^^
Du coup je réduit aussi pour le web :

Code:

"a[href*='f19'] h3"

Je pense que j'ai un gros problème de cache, ce qui expliquer mes bugs, je viens d'avoir une modif html que j'ai utilisé il y a 2h, et que j'ai désactiver, qui viens tout juste de s'activer. Un clear du cache et c'est revenu a la normal.

[chattigre]

Code:

var MAVARIABLE1 = $("h2.hierarchy a[href*='FID1']");
var MAVARIABLE2 = $("#mpage-body-modern .forum-content a[href*='FID2'] h3");
  
MAVARIABLE1.html('<p>Un paragraphe1</p>');
MAVARIABLE2.html('<p>Un paragraphe2</p>');

Fonctionne parfaitement maintenant a ne plus rien comprendre, enfin toujours un léger bug d'affichage, j'ai du envoyer trop de script a la minute et faire bugger le server je pense xD

Sans doute n'est-ce pas très approprié de remplir un h3 de paragraphes, et encore moins de plusieurs div ^^
Il faudrait voir pour y mettre au mieux uniquement des span, ou agir non pas sur h3 mais sur a, et corriger le CSS en conséquence.

Normalement il ne peut pas y avoir de problème de cache en JS, le nom du fichier change à chaque édition, ce qui oblige le navigateur à le recharger.

Spoiler:

En effet, c'est mauvais

Ce dont ont besoin les méthodes (html, text, etc.), c'est d'un objet JQuery.
Ce dont a besoin le constructeur $(), c'est d'une chaine de caractères contenant un sélecteur CSS, rien d'autre.

Donc vos variables doivent être du texte, entre guillemets, et ce texte doit être un sélecteur CSS.

Code:

var MV1 = "div";
var MV2 = "span";
var arg = MV1+", "+MV2;
$(arg).html(...);

Tout ce que vous pouvez faire, c'est mettre bout à bout toutes vos variables sans guillemets autour, sinon ce n'est pas la variable mais un simple texte en les séparant par une virgule dans une chaine

Vous avez besoin de 3 lignes, un peu barbares, pour un truc que vous pourriez faire en une seule. Donc arrêtez de vous compliquer la vie, là

Code:

$("liste des sélecteurs").html("le HTML")

Et c'est TOUT ! ^^

Vous ne connaissez pas le JS, vous connaissez le CSS. Alors faites du CSS avec du JS

Code:

$("selecteur").methode()

On ne peut pas plus simple

Vos codes corrigés quand même:

---

Code:

    <div class="fa_translate_container">
    <span class="fa_translate fa_translate\_fr">TEXTE_FR</span>
    <span class="fa_translate fa_translate_en">TEXTE_EN</span>
    </div>

Si vous essayez de mettre ça dans un a ET dans un h3, je comprends que ça ne fonctionne pas ^^
le div étant un bloc, le mettre dans un h3 qui est un élément linéaire peut faire très mauvais ménage

----

Vous cherchez à faire quoi exactement ? Traduire les noms des forums ?
Pas uniquement sur l'index (/) mais aussi sur les forums (/fxx-) je suppose ?

[bplc]

Je viens de tester a l'instant cela marche parfaitement,

Aujourd'hui je serais un peu occupé je vous répondrai un peu plus tard.

J'ai passé une bonne partie de la nuit a me documenter un peu mieux sur le sujet JS, et grâce a nos petit exercice et aux notions que vous m'avez transmise, j'ai progressé assez vite  

MV3+", "+MV4 :

Ok je comprend on Concaténe (si ce verbe existe  ) la virgule en tant que chaine de caractère via l'opérateur de Concaténation +, pour la placer entre deux variable, pas bête   , bon après avoir fais l'effort de lire de la docu, il est normal que cela deviens du coup un peu plus facile ^^ enfin je pense que j'aurais quand même mis un peu de temps avant d'avoir l'illumination...

Merci pour la réponse      , a ce soir ^^

[bplc]

Re, je suis bête, vous m'aviez laissé un très gros indice  : '"+FID+"'
Je viens de le tester fonctionne très bien.
J'ai juste fait la bêtise de placer la variable FID après la variable MV2, mais je l'ai rectifié et tout va bien :

Code:


var FID = "f"+ 19; 
var MV2 = "a.forumtitle[href*='"+FID+"']";

Si vous essayez de mettre ça dans un a ET dans un h3, je comprends que ça ne fonctionne pas ^^
le div étant un bloc, le mettre dans un h3 qui est un élément linéaire peut faire très mauvais ménage Wink

Je vous rassure, mes test était plutôt effectué dans ces format la :

Code:

$("selecteur").html("texte")
$("selecteur").css("background-color", "red");

Même si je le tester avec mon HTML de temps en temps.
Le format n'est pas forcement le plus optimal, mais en l'état il fonctionne parfaitement sans problème, je me pencherai plus tard sur comment optimiser son écriture ^^merci du conseil.

Comme pour le sélecteur mobile je l'ai simplifié a : "a[href*='f19'] h3", car dans le cas du titre je peux me le permettre mais a un autre endroit cette simplification poserai problème, mais je garde en tête le #mpage-body-modern .forum-content pour éviter tout problème.

Vous cherchez à faire quoi exactement ? Traduire les noms des forums ? Wink
Pas uniquement sur l'index (/) mais aussi sur les forums (/fxx-) je suppose ?

Oui je veux traduire tout les éléments du forum non géré par la traduction native.
Seul les sujets des membre ne seront pas traduit.

On pourrais aller plus loins et créer les bonnes class associer a la langue utilisateur, lors de la création d'un sujet, puis je pense que l'on pourrais récupérer l'api ou un truc du genre de google trad et associer les trad, aux profils utilisateurs, mais évitons les extrêmes ^^

Si on arrives a créer un script pour gérer la trad manuel des section de notre forum, ce seras deja génial ^^

Par contre ce que j'essayerais de faire par la suite, est de créer des boutons/ou selecteur de choix dans une alert ou une page d'accueil, qui permettrons a un utilisateur invité de sélectionner une langue utilisateur et de ce l'assigner, mais c'est d'un autre niveaux ...

[chattigre]

Code:

var FID = "f"+ 19;

Attention, parce que là vous pourriez créer une erreur de type en essayant de concaténer une chaine (string) à un nombre (number)
Donc plutôt "f"+"19"+"-" (j'ai ajouté un tiret, ça permet d'éliminer une partie du risque de cibler un truc qui n'a rien à voir...

Comme pour le sélecteur mobile je l'ai simplifié a : "a[href*='f19'] h3", car dans le cas du titre je peux me le permettre mais a un autre endroit cette simplification poserai problème, mais je garde en tête le #mpage-body-modern .forum-content pour éviter tout problème.

Attention, rien ne restreint votre sélecteur à la version mobile ici, a et h3 étant des balises natives utilisées pour les deux versions. Il est possible que ça passe, mais mieux vaut prendre la sécurité.

Je vais vous conseiller les sélecteurs propres pour cibler toutes les apparitions de noms de forums sur mobile et PC (ModernBB).
A inclure en une seule chaine, ne cherchez pas compliqué ^^
- Version web

Code:

#modernbb .topiclist.forums .dterm a[href*="fID-"]

- Version mobile

Code:

#mpage-body-modern .forum-section .forum-content a[href*="fID-"] h3

Un petit JS que vous pouvez mettre avec le reste mais qui ne peut pas être fait avec un seul sélecteur CSS pour les pages "forum"

Code:

//Pour les pages "forum" (version web et mobile)
if (window.location.pathname.indexOf('/fID-') == 0) {
  $(function() {
    $("#modernbb h1.page-title").html('...');
    $("#mpage-body-modern h1.mobile-title-content").html('...')
  });
}

[bplc]

Attention, parce que là vous pourriez créer une erreur de type en essayant de concaténer une chaine (string) à un nombre (number)
Donc plutôt "f"+"19"+"-"

Je ne m'était pas pris la tête j'ai fait :

Code:

var Num = 19;
var FID_W = "f"+Num; 
var AWT = "a.forumtitle[href*='"+FID_W+"']";

j'ai ajouté un tiret, ça permet d'éliminer une partie du risque de cibler un truc qui n'a rien à voir...

On me l'a deja dit mais pour l'instant je n'ai pas eu de problème particulier, mais ok ^^ je ferais la rectification. 

Pour les adresses je vous donne raison a 100%, va falloir que je remettre un peu d'ordre.

Code:

if (window.location.pathname.indexOf('/fID-') == 0) {
$(function() {
$("#modernbb h1.page-title").html('...');
$("#mpage-body-modern h1.mobile-title-content").html('...')
});
}

Oula, j'essai de comprendre  window.location.pathname.indexOf ^^ Je suis largué la ^^
Ni tout le reste du coup   



Voici mon code :

Code:


 var FID = 19; 
var AWT = "#mpage-body-modern .forum-section .forum-content a[href*='f"+FID+"-'] h3"; //web
var AMT = "#modernbb .topiclist.forums .dterm a[href*='f"+FID+"-']"; //mobile
var AWTA = ".sub-header a[href*='f"+FID+"-']"; //Titre dans fil d'ariane

var Titre = AMT+", "+AWT+", "+AWTA;


$(Titre).css("background-color", "red").html("mon-texte");

L’idée étant de faire un tableau de correspondances id=> traduction et que la partie exécution du cor tienne en 5 lignes, et pas en 200…

Oui c'est exactement cela que j'essai de faire ^^ je ne penser pas que l'on pouvais faire corresponde aussi les traductions mais je suis super content de le savoir ^^

[bplc]

Je suis en train de chercher les adresses de chaque éléments, si vous avez des idées je suis preneur ^^

[chattigre]

Bonjour,

J'ai le script fonctionnel, il me manque juste le traitement des en-têtes textuels (sur fond bleu) pour l'index (titres des catégories) et les forums qui contiennent des sous-forums. Et ne cherchez pas, ce n'est pas faisable avec un simple sélecteur CSS ^^

Je m'y remets dès que j'ai un peu de temps à y consacrer

[bplc]

Au génial ^^ j'ai hate de voir ce que vous avais créer, je cherche aussi alors

Avec les combinateur : ">" ,"+", "~", cela doit être possible mais un peu chiant.

Je réfléchi au code html du coup :
 

Code:

<div class="fa_translate_container">
    <span class="fa_translate fa_translate\_fr">TEXTE_FR</span>
    <span class="fa_translate fa_translate_en">TEXTE_EN</span>
    </div>

Je ne comprend pas votre idée, je suppose que vous voulais remplacer la DIV par un P, mais on reste toujours dans une balise type block, du coup pas vraiment de grosse différence que le block soit définit ou pas.
Ce qui me fait penser que votre idée est de rester sur des span, mettre fa_translate_container dans une span, pour rester sur du inline, mais pour l'instant le code fonctionne en l'état, donc je ne comprend pas vraiment le raisonnement, a moins que vous penser a une balise en particulier ?

[bplc]

Donc on est sur du : dd.dterm h2   /   .icon dd.dterm .table-title
faux trouver un moyen de sélectionner celui que l'on veux maintenant, je vous l'envoie quand je le trouve ^^

Si on pouvais sélectionner un élément parent ce serais plus facile :/ voir avoir un ID



Pour être plus précis on est sur : .forabg ul.topiclist li.header dl.icon dd.dterm div.table-title h2
Alors maintenant comment faire pour sélectionner notre élément ??
Si je dit pas de bêtise, on peux toujours faire un "replace" en JS, mais c'est pas propre.


Donc si je comprend bien on a :

• un DIV #main-content
  
• qui contient des DIV .forabg pour chaque section
  
• qui contiennent 2 UL .topiclist et .topiclist forums
  

Perso je gère mal les cascades et encore plus quand on peux pas assigner un ID.

Note HS avec un : dd.dterm [href^='/f19'] On peux agir sur le titre dans la version web et mobile avec le CSS.


Si le Js le permet ne pourrais t'on pas affecter une class CSS ou un ID a un élément parent et problème résolu ??