8 résultats trouvés pour mpage-body-modern

Faire apparaitre du contenu html avec du CSS, ou JS

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('...') }); }

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 :

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 ...

Faire apparaitre du contenu html avec du CSS, ou JS

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

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 ^^

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 = 'Mon nouveau contenu';

(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("Mon texte"), vous n'obtiendrez pas un paragraphe contenant "Mon texte" mais un simple texte "Mon texte". 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

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

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 ?

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 !

Message illisible sur version mobile

Bon du coup kardo j'ai repris votre code et j'ai changé row 2 par row 1 puis collé avant celui que j'avais collé pour row2. apparemment ça fonctionne. J'ai bon j'ai pas fait de bêtises?
#mpage-body-modern .row1{
background-image:none;
}
#mpage-body-modern .row2{
background-image:none;
}

Bouton register tollbar

Si ça peux vous aider voici le code java que j'ai pour l'instant :
$(document).ready(function() {
$('body:not(#mpage-body-modern) a[href*="/register"]').each(function() {
$(this).attr("href", "http://www.pie10.forumactif.be/h1-terms")
})
});