Faire apparaitre du contenu html avec du CSS, ou JS
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 2 sur 2 • Partagez
Page 2 sur 2 • 1, 2
Faire apparaitre du contenu html avec du CSS, ou JS
Rappel du premier message :
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
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 ^^
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 ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Bonjour,
Alors, si, du replace, il va y en avoir, forcément. On pourra pas faire autrement et ce sera très bien comme ça, ce n'est pas parce que c'est du JS que ce n'est pas propre.
Voici l'ensemble du "Pack Traduction", code à placer bien sûr sur Toutes les pages.
Vous remarquerez que le début est le script de traduction de FA.
A utiliser dans les descriptions de catégories et de forums (avec le fa_translate_container etc.).
Ensuite, il faut configurer le script.
Pour chaque forum ou catégorie à traduire, vous devez ajouter un élément qui porte son identifiant (commençant par f ou c + des chiffres, sans le tiret final). Puis ouvrir une accolade et lister les langues sous la forme "lg":"traduction"
Je m'attarde sur deux choses :
- la traduction "original" : Le texte tel qu'il est dans le PA.
Elle est nécessaire dans deux cas : Les catégories, dont le titre est affiché au format texte sur l'index. Et les forums qui contiennent des sous-forums, dont le nom est affiché textuellement sur leur page.
- L'importance de ne pas inclure de textes confidentiels dans le JS : Un utilisateur averti pourra les lire via le code de la page. A garder à l'esprit si vous avez une rubrique "top secrete" dont le nom doit rester confidentiel... Je parle pas d'un truc genre "Corbeille" hein, mais éventuellement d'un titre un peu sensible ^^
Si vous avez des questions, n'hésitez pas (notamment sur la construction du code ^^)
Bonne soirée
Alors, si, du replace, il va y en avoir, forcément. On pourra pas faire autrement et ce sera très bien comme ça, ce n'est pas parce que c'est du JS que ce n'est pas propre.
Voici l'ensemble du "Pack Traduction", code à placer bien sûr sur Toutes les pages.
- Code:
$(function() {
var defaultTranslation = "en";
$('.fa_translate_container').each(function() {
if ($('.fa_translate_' + _userdata["user_lang"], this).length < 1)
$('.fa_translate_' + defaultTranslation, this).show();
else {
$('.fa_translate_' + _userdata["user_lang"], this).show();
}
});
});
$(function() {
var trans_lang = ["en", "es"]; //Toutes les langues possibles, tous éléments confondus
//ensemble des traductions.
var translate = {
"c1": {
"original": 'Votre 1ère catégorie',
"en": "My first cat"
},
"f1": {
"original": 'Votre 1er forum',
"en": 'My first fofo',
"es": 'Espagnol',
},
"f2": {
"original": 'Corbeille',
"en": 'Wastes',
"es": 'Espagnol',
},
"f3": {
"en": 'AnglaisF3',
"es": 'Espagnol',
},
"f4": {
"en": 'AnglaisF4',
"es": 'Espagnol',
},
"f5": {
"en": 'AnglaisF5',
"es": 'Espagnol',
}
};
if (trans_lang.includes(_userdata.user_lang)) {
for (var el in translate) { //pour chaque élément du tableau
if (translate.hasOwnProperty(el)) { //Si il s'agit bien d'un élément direct
if (Object.keys(translate[el]).includes(_userdata.user_lang)) { //Si la langue est disponible pour cet élément
var val = translate[el];
$('#modernbb .topiclist.forums .dterm a[href*="' + el + '-"].forumtitle, .dterm a[href*="' + el + '-"].gensmall, #mpage-body-modern .forum-section .forum-content a[href*="' + el + '-"] h3').html(translate[el][_userdata.user_lang]); //liens web et mobile sur l'index et sous-forums
$('#modernbb a[href*="' + el + '-"].nav').html(translate[el][_userdata.user_lang]); //fil d'ariane version web
if (window.location.pathname.indexOf('/' + el + '-') == 0) { //Si on est sur la page de l'élément
document.title = translate[el][_userdata.user_lang]; //On change le titre de la page
if (Object.keys(translate[el]).includes("original")) { //Si un texte original est disponible
$("#modernbb h1.page-title, #mpage-body-modern h1.mobile-title-content, .mobile_title_content").html(translate[el][_userdata.user_lang]); //Gros titre
$("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() { //Titre sur fond bleu (catégories et forums avec sous-forums)
$(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
});
}
}
if ((window.location.pathname == '/') || (window.location.pathname == '/forum')) { //Sur l'index
$("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() {
$(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
});
}
}
}
}
}
});
Vous remarquerez que le début est le script de traduction de FA.
A utiliser dans les descriptions de catégories et de forums (avec le fa_translate_container etc.).
Ensuite, il faut configurer le script.
- Code:
var trans_lang = ["en", "es"]; //Toutes les langues possibles, tous éléments confondus
- Code:
var translate = {
"c1": {
"original": 'Votre 1ère catégorie',
"en": "My first cat"
},
"f1": {
"original": 'Votre 1er forum',
"en": 'My first fofo',
"es": 'Espagnol'
},
"f2": {
"original": 'Corbeille',
"en": 'Wastes',
"es": 'Espagnol'
},
"f3": {
"en": 'AnglaisF3',
"es": 'Espagnol'
},
"f4": {
"en": 'AnglaisF4',
"es": 'Espagnol'
},
"f5": {
"en": 'AnglaisF5',
"es": 'Espagnol'
}
};
Pour chaque forum ou catégorie à traduire, vous devez ajouter un élément qui porte son identifiant (commençant par f ou c + des chiffres, sans le tiret final). Puis ouvrir une accolade et lister les langues sous la forme "lg":"traduction"
- Code:
"fID": {
"lg1": 'Trad lg1',
"lg2": 'Trad lg2'
},
Je m'attarde sur deux choses :
- la traduction "original" : Le texte tel qu'il est dans le PA.
Elle est nécessaire dans deux cas : Les catégories, dont le titre est affiché au format texte sur l'index. Et les forums qui contiennent des sous-forums, dont le nom est affiché textuellement sur leur page.
- L'importance de ne pas inclure de textes confidentiels dans le JS : Un utilisateur averti pourra les lire via le code de la page. A garder à l'esprit si vous avez une rubrique "top secrete" dont le nom doit rester confidentiel... Je parle pas d'un truc genre "Corbeille" hein, mais éventuellement d'un titre un peu sensible ^^
Si vous avez des questions, n'hésitez pas (notamment sur la construction du code ^^)
Bonne soirée
Dernière édition par chattigre le Mer 5 Jan 2022 - 19:52, édité 1 fois (Raison : Mise à jour)
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Wow code magnifique :
Je viens de le tester mais il ne fonctionne pas :
Pour les test j'ai mis la langue du fofo par default en FR,la langue par default de admin est francais aussi,
J'ai changé esp pour la langue que j'utilise, et mis f7 au lieux de f1, mais cela n'as pas fonctionné, sachant qu'un simple point mal placé peux détruire le code, j'ai bien peur de ne pas savoir ou est l'erreur xD dans ce cas de figure existe t'il un mode debug ou autres pour voir d'ou peux provenir une erreur ?
Je viens de le tester mais il ne fonctionne pas :
Pour les test j'ai mis la langue du fofo par default en FR,la langue par default de admin est francais aussi,
J'ai changé esp pour la langue que j'utilise, et mis f7 au lieux de f1, mais cela n'as pas fonctionné, sachant qu'un simple point mal placé peux détruire le code, j'ai bien peur de ne pas savoir ou est l'erreur xD dans ce cas de figure existe t'il un mode debug ou autres pour voir d'ou peux provenir une erreur ?
- Code:
$(function() {
var defaultTranslation = "fr";
$('.fa_translate_container').each(function() {
if ($('.fa_translate_' + _userdata["user_lang"], this).length < 1)
$('.fa_translate_' + defaultTranslation, this).show();
else {
$('.fa_translate_' + _userdata["user_lang"], this).show();
}
});
});
$(function() {
var trans_lang = ["en", "pt"]; //Toutes les langues possibles, tous éléments confondus
//ensemble des traductions.
var translate = {
"c1": {
"original": 'Votre 1ère catégorie',
"pt": "My first cat"
},
"f7": {
"original": 'Votre 1er forum',
"en": 'My first fofo',
"pt": 'Espagnol',
},
"f2": {
"original": 'Corbeille',
"en": 'Wastes',
"pt": 'Espagnol',
},
"f3": {
"en": 'AnglaisF3',
"pt": 'Espagnol',
},
"f4": {
"en": 'AnglaisF4',
"pt": 'Espagnol',
},
"f5": {
"en": 'AnglaisF5',
"pt": 'Espagnol',
}
};
if (trans_lang.includes(_userdata.user_lang)) {
for (var el in translate) { //pour chaque élément du tableau
if (translate.hasOwnProperty(el)) { //Si il s'agit bien d'un élément direct
if (Object.keys(translate[el]).includes(_userdata.user_lang)) { //Si la langue est disponible pour cet élément
var val = translate[el];
$('#modernbb .topiclist.forums .dterm a[href*="' + el + '-"].forumtitle, .dterm a[href*="' + el + '-"].gensmall, #mpage-body-modern .forum-section .forum-content a[href*="' + el + '-"] h3').html(translate[el][_userdata.user_lang]); //liens web et mobile sur l'index et sous-forums
$('#modernbb a[href*="' + el + '-"].nav').html(translate[el][_userdata.user_lang]); //fil d'ariane version web
if (window.location.pathname.indexOf('/' + el + '-') == 0) { //Si on est sur la page de l'élément
document.title = translate[el][_userdata.user_lang]; //On change le titre de la page
if (Object.keys(translate[el]).includes("original")) { //Si un texte original est disponible
$("#modernbb h1.page-title, #mpage-body-modern h1.mobile-title-content, .mobile_title_content").html(translate[el][_userdata.user_lang]); //Gros titre
$("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() { //Titre sur fond bleu (catégories et forums avec sous-forums)
$(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
});
}
}
if ((window.location.pathname == '/') || (window.location.pathname == '/forum')) { //Sur l'index
$("#modernbb .topiclist:not(.topics) .table-title, #mpage-body-modern .forum h2").each(function() {
$(this).html($(this).html().replace(translate[el]["original"], translate[el][_userdata.user_lang]));
});
}
}
}
}
}
});
Re: Faire apparaitre du contenu html avec du CSS, ou JS
EDIT : ok je suis un débile, vous avais utilisé replace, du coup je doit rentrer le nom exacte de ma catégorie dans sa version original, désolé
Dernière édition par bplc le Mer 5 Jan 2022 - 21:25, édité 1 fois
Re: Faire apparaitre du contenu html avec du CSS, ou JS
RE édit ^^ je supprime ma question idiote, vu que vous utiliser une autre méthode.
Dernière édition par bplc le Mer 5 Jan 2022 - 21:45, édité 1 fois
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Vu que vous avais largement répondu a mes questions, je vais mettre ce sujet en Résolu,
votre travaille est extraordinaire, vous avais largement dépassé mes attentes, je vous remercie !!!
votre travaille est extraordinaire, vous avais largement dépassé mes attentes, je vous remercie !!!
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Bonjour,
En utilisant un vérificateur de syntaxe je ne constate aucune erreur fatale sur votre code.
Avez-vous bien utilisé le bon code langue correspondant à la langue configurée dans votre profil ?
Attention toutefois à ceci :
---
Pour les guillemets, non, ce n'est pas une erreur. Pour une chaine de base, on peut utiliser aussi bien des guillemets doubles que des guillemets simples / apostrophes. Le tout est que la chaine soit ouverte et fermée avec le même caractère.
Pour les sélecteurs CSS par exemple, j'ai volontairement mis des guillemets simples car, dans la chaine, il y a des guillemets doubles. Si je délimitais la chaine avec ces mêmes caractères, il aurait fallu les échapper...
D'ailleurs, ça peut vous servir pour vos traductions : Si vous avez dedans des ", délimitez entre apostrophes, si vous avez des apostrophes, délimitez entre guillemets doubles. Et s'il y a des deux, il faut choisir et échapper le délimiteur
Votre forum étant en mode construction, je ne peux pas aller voir directement dessus...
Bonne soirée
En utilisant un vérificateur de syntaxe je ne constate aucune erreur fatale sur votre code.
Avez-vous bien utilisé le bon code langue correspondant à la langue configurée dans votre profil ?
Attention toutefois à ceci :
- Code:
"f7": {
"original": 'Votre 1er forum',
"en": 'My first fofo',
"pt": 'Espagnol',
},
---
Pour les guillemets, non, ce n'est pas une erreur. Pour une chaine de base, on peut utiliser aussi bien des guillemets doubles que des guillemets simples / apostrophes. Le tout est que la chaine soit ouverte et fermée avec le même caractère.
Pour les sélecteurs CSS par exemple, j'ai volontairement mis des guillemets simples car, dans la chaine, il y a des guillemets doubles. Si je délimitais la chaine avec ces mêmes caractères, il aurait fallu les échapper...
- Code:
var str = 'Une chaine';
var str2 = "Une chaine";
var str3 = "Vivement l'année prochaine";
var str4 = 'Vivement l\'année prochaine';
var str5 = 'Il se tourna vers eux et dit "Bonjour, chers amis !"';
var str6 = "Il se tourna vers eux et dit \"Bonjour, chers amis !\"";
D'ailleurs, ça peut vous servir pour vos traductions : Si vous avez dedans des ", délimitez entre apostrophes, si vous avez des apostrophes, délimitez entre guillemets doubles. Et s'il y a des deux, il faut choisir et échapper le délimiteur
Votre forum étant en mode construction, je ne peux pas aller voir directement dessus...
Bonne soirée
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Re,
D'accord, parfait alors !
Il est possible que l'on ait oublié des éléments, dans ce cas n'hésitez pas à envoyer un MP à un membre du Staff pour demander le replacement de ce sujet
Je pense notamment aux listes déroulantes de forums, de type "sauter vers" mais je n'en vois définitivement pas de "publiques" sous ModernBB, je suis peut-être aveugle
Il y en aura par contre au niveau modération, pour diviser / déplacer / fusionner, actuellement ce n'est pas traduit, je n'y ai pas pensé.
Si c'est nécessaire pour vous, ça doit être faisable, n'hésitez pas à me le signaler !
EDIT : Je n'utilise pas replace partout, mais je l'utilise. Sur les liens, j'utilise directement la méthode html pour remplacer le texte du lien.
Quand ce n'est pas un lien, il n'y a pas trop d'autre solution que vérifier l'url de la page et/ou faire un replace sur un élément précis au maximum mais non limité par CSS à un forum défini.
PS2 : Notez que les noms des forums ne seront pas traduits dans les notifications par e-mail dont le contenu n'est modifiable d'aucune manière.
D'accord, parfait alors !
Il est possible que l'on ait oublié des éléments, dans ce cas n'hésitez pas à envoyer un MP à un membre du Staff pour demander le replacement de ce sujet
Je pense notamment aux listes déroulantes de forums, de type "sauter vers" mais je n'en vois définitivement pas de "publiques" sous ModernBB, je suis peut-être aveugle
Il y en aura par contre au niveau modération, pour diviser / déplacer / fusionner, actuellement ce n'est pas traduit, je n'y ai pas pensé.
Si c'est nécessaire pour vous, ça doit être faisable, n'hésitez pas à me le signaler !
EDIT : Je n'utilise pas replace partout, mais je l'utilise. Sur les liens, j'utilise directement la méthode html pour remplacer le texte du lien.
Quand ce n'est pas un lien, il n'y a pas trop d'autre solution que vérifier l'url de la page et/ou faire un replace sur un élément précis au maximum mais non limité par CSS à un forum défini.
PS2 : Notez que les noms des forums ne seront pas traduits dans les notifications par e-mail dont le contenu n'est modifiable d'aucune manière.
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Merci, non pour l'instant je n'ai pas besoin d'une modération multilingue ^^ ni le dans les notifications par email ^^
Ne nous compliquons pas la tache non plus ^^
J'ai des millier de question a vous poser, car j'ai bien aimé ce petit cour accéléré de JS, mais je vais vous laisser un peu tranquille ^^
Ne nous compliquons pas la tache non plus ^^
J'ai des millier de question a vous poser, car j'ai bien aimé ce petit cour accéléré de JS, mais je vais vous laisser un peu tranquille ^^
Page 2 sur 2 • 1, 2
Sujets similaires
» Impossible de faire apparaitre le bouton sélectionner le contenu
» (2292): Problème avec contenu html de balise [code] à l'édition en wysiwg
» Faire apparaître une image
» Faire glisser une image pour faire apparaitre un texte.
» Faire apparaitre les sujets
» (2292): Problème avec contenu html de balise [code] à l'édition en wysiwg
» Faire apparaître une image
» Faire glisser une image pour faire apparaitre un texte.
» Faire apparaitre les sujets
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 2 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum