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 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Faire apparaitre du contenu html avec du CSS, ou JS
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 ^^
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,
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
---
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 :
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
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 :';
}
---
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
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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
cette formulation n'a pas l'air de fonctionner en l'état, je vais me renseigner un peu plus.
Bien a vous.
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.
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Bonjour,bplc a écrit: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.
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
});
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
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 ^^
Je viens de tester, effectivement cela est plus simple que mon selecteur ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 ^^
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 ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
bplc a écrit: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 !
Re: Faire apparaitre du contenu html avec du CSS, ou JS
- Code:
$("#mpage-body-modern")("a[href*='FID'").css("background-color","blue");
- Code:
$("#mpage-body-modern.a[href*='FID'").css("background-color","blue");
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.Par contre, je n'ai pas bien compris le rapport avec le display: block; ?
Je ne suis pas contre une utilisation normal, pour éviter tout conflit future par contre ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Re,
Non, tout simplement un espace ^^
A B signifie "B dans A", mais peu importe le nombre de niveaux entre les deux.
Donc
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
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");
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
Qu'essayez-vous de faire exactement ? Pourriez-vous me transmettre une capture et votre CSS ?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 ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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
bon maintenant la réécriture ^^ je cherche, mais pas facile avec la syntaxe, la moindre erreur est fatal ^^
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 ^^
Dernière édition par bplc le Sam 1 Jan 2022 - 20:59, édité 2 fois
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Pourquoi le masquer ?bplc a écrit:
- 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 ^^
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
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Pour faire simple je voudrais remplacer le TEXTE de mon TITRE sur mobile situé a :
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
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"
Re: Faire apparaitre du contenu html avec du CSS, ou JS
J'ai trouvéééééé !!!!!!!!!!
Avec le queryselector seulement ^^
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.
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.
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 ^^
De même, inutile de "vider" d'abord le html pour le modifier :
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 .
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é.
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.
Tout ça pour dire que, en pensant bien à retarder l'exécution avec $(function() {... });, on a le code suivant :
On pourrait faire pareil pour la version PC, en adaptant le sélecteur.
Bonne soirée
--- 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:
- Code:
$(function() {
var MAVARIABLE = $('#mpage-body-modern .forum-content a[href*='FID'] h3');
MAVARIABLE.html('');
newcontent.appendTo(MAVARIABLE);
$('div.demo-container').html('<p>Mon html de remplacement</p>');
});
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
- Code:
var newcontent = '<p>Mon nouveau contenu</p>';
Je comprends.Pour l'instant je me contente d'apprendre la logique du JS, qui n'est pas facile ^^
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 .
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.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 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é.
NuançonsSachant 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.
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.
Comme pour du HTML, suffit de passer à la méthode html() un argument sans balises : html('Mon texte')Je comprend, mais comment procéder pour injecter juste du texte alors ?
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');
});
- Spoiler:
- Et si vous voulez une écriture rouge pour le titre du forum sur l'index sur mobile :
- Code:
$(function () {
$("#mpage-body-modern .forum-content a[href*='f1'] h3").html('<span style="color: red;">Titre du forum</span>');
});
On pourrait faire pareil pour la version PC, en adaptant le sélecteur.
Bonne soirée
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 ^^
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 :
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 :
Et inversement comment utiliser un innerHTML sans variable ?
Sans succès non plus :/
---------------------
J'avais compris l'idée de HTML, le nom dit tout ^^ effectivement le champ des possible s'ouvre.
(cela me semble théoriquement possible, j'ai conscience que je l'ai mal écrit, mais je pense que vous comprendrais)
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)
Bonne soirée
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');
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
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Bonjour,
Et après :
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 :
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
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.
ça, on est bien d'accord que ça marche ? ^^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"
});
Non, manque le $, qui fait appel à JQuery. Il est indispensable
- Code:
var MAVARIABLE = ("#mpage-body-modern .forum-content a[href*='FID'] h3");
Pourquoi pas.
- Code:
var MAVARIABLE = $("#mpage-body-modern .forum-content a[href*='FID'] h3");
Et après :
- Code:
MAVARIABLE.html('<p>Un paragraphe</p>');
Exactement pour la structure.
- Code:
$(function() {
$("adress-CSS-WEB").HTML('TEXTE');
$("adress-CSS-MOBILE").HTML('TEXTE');
});
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('...');
});
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.(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)
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");
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.
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 :
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)
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
});
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');
});
Re: Faire apparaitre du contenu html avec du CSS, ou JS
J'ai réussi a les faire fonctionner tous les deux ensemble avec cette syntaxe mais sur deux script différent :
script 1 :
script 2 :
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>'); " )
(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 ^^ )
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.
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>');
(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.
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Re,
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 :
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) :
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('...');
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
Comprendre la distinction chaine (string) / obje(c)t / variable devrait vous aider à la trouver
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 simpleJe 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 ^^
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('...');
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
Sans doute que non si vous constatez des anomalies visuelles, ou alors c'est le contenu que vous mettez dans html qui ne va pasJ'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.
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.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)
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('...');
Sans doute une faute de frappe, car l'ensemble me semble correct et donc supprimer l'un des 2 ne devrait rien changer.Mais que si je créer mes 2 "MAVARIABLE.html", si j'en suprime une par exemple le code ne fonctionne plus.
Un problème de sélecteur sans doute.(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 ^^ )
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
Si si ^^.J'ai tout essayé, le JS n'a aucune logique MDR !!!
Comprendre la distinction chaine (string) / obje(c)t / variable devrait vous aider à la trouver
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 ^^
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)
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 ^^
+FID+ : juste génial , mais pas pour aujourd'hui, la prochaine étapes ^^
Tout me laisse penser que je me suis tromper, mais cela me semble juste :/ pour le contenu html, je pense que vous le connaissez dejaSans doute que non si vous constatez des anomalies visuelles, ou alors c'est le contenu que vous mettez dans html qui ne va pasJ'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.
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>
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.Sans doute une faute de frappe, car l'ensemble me semble correct et donc supprimer l'un des 2 ne devrait rien changer.
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...Comprendre la distinction chaine (string) / obje(c)t / variable devrait vous aider à la trouver
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 ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
- 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
Je suppose que c'est cela que vous voulez que je fasse :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('...');
- 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");
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.
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Sans doute n'est-ce pas très approprié de remplir un h3 de paragraphes, et encore moins de plusieurs div ^^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
- 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>');
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:
- Bon
Je suppose que c'est cela que vous voulez que je fasse :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('...');- 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");
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(...);
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")
Vous ne connaissez pas le JS, vous connaissez le CSS. Alors faites du CSS avec du JS
- Code:
$("selecteur").methode()
- Vos codes corrigés quand même:
- Code:
var MV1 = "h2.hierarchy a[href*='f19']";
var MV2 = "#mpage-body-modern .forum-content a[href*='f19'] h3";
var MV3 = MV1+", "+MV2; //Ne pas mettre les variables dans une chaine, mais constituer une chaine composée avec les variables et une chaine contenant une virgule.
$(MV3).html('<p>Un paragraphe1</p>');
- Code:
var MV3 = ".table-title";
var MV4 = ".forumtitle";
var MV5 = MV3+", "+MV4; //meme chose
$(MV5).css("background-color", "red");
- Code:
$(MV3+","+MV4).css("background-color", "red"); //Si la virgule n'est pas dans une chaine, c'est un séparateur d'arguments, or vous devez mettre tous vos sélecteurs dans un seul argument.
Si vous essayez de mettre ça dans un a ET dans un h3, je comprends que ça ne fonctionne pas ^^
- 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>
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 ?
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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
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...
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 ^^
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 :
Je vous rassure, mes test était plutôt effectué dans ces format la :
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.
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 ...
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 ...
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Attention, parce que là vous pourriez créer une erreur de type en essayant de concaténer une chaine (string) à un nombre (number)
- Code:
var FID = "f"+ 19;
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...
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é.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.
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-"]
- Code:
#mpage-body-modern .forum-section .forum-content a[href*="fID-"] h3
- 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('...')
});
}
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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+"']";
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.j'ai ajouté un tiret, ça permet d'éliminer une partie du risque de cibler un truc qui n'a rien à voir...
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('...')
});
}
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 ^^
Dernière édition par bplc le Mer 5 Jan 2022 - 1:14, édité 1 fois
Re: Faire apparaitre du contenu html avec du CSS, ou JS
Dernière édition par bplc le Mer 5 Jan 2022 - 18:27, édité 1 fois
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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
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
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 :
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 ?
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 ?
Dernière édition par bplc le Mer 5 Jan 2022 - 19:23, édité 1 fois
Re: Faire apparaitre du contenu html avec du CSS, ou JS
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 :
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 ??
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 ??
Page 1 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 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum