Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Bouton "Sélectionner le contenu" pour les balises de code

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Re: Bouton "Sélectionner le contenu" pour les balises de code

Message par Walt Dim 21 Mar 2021 - 11:45

Bouton "Sélectionner" pour les balises de code

Cette astuce permet d'ajouter la possibilité à vos membres de sélectionner le contenu d'une information qui se trouve entre les balises code.

Voir illustration :
Bouton "Sélectionner le contenu" pour les balises de code 13-03-11

Installation


Créer un script Javascript


Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Bouton "Sélectionner" pour les balises de code" et pour placement "Sur les sujets" (plus d'informations sur la gestion des scripts).

Code:
function selectCode(e) {
    var s = $(e).closest("dl").find(".cont_code,code").get(0), range, selection;
    var a = s, z = s;
    while(a.nodeType == 1 && a.childNodes.length) a=a.firstChild;
    while(z.nodeType == 1 && z.childNodes.length) z=z.lastChild;
    if (!$(a).is('.fixff')) {
        var fix = $('<span class="fixff"/>').insertBefore(a);
    } else {
      a = a.nextSibling;
    }
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(s);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.setStart(a, 0);
        range.setEnd(z, z.nodeValue ? z.nodeValue.length : 0);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};
$(function(){$("dl.codebox:not(.spoiler,.hidecode)  > dd.code, dl.codebox:not(.spoiler,.hidecode)  > dd > code").closest("dl").find('dt').append('<span onClick="selectCode(this)" class="selectCode">Sélectionner</span>')});

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Modifier la feuille de style CSS


Panneau d'administration  Affichage  Images et Couleurs - Couleurs (Onglet Feuille de style CSS)

Ajoutez le code suivant :

Code:
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Walt

Walt
Modéractif
Modéractif

Masculin
Messages : 5919
Inscrit(e) le : 08/09/2015

Voir le profil de l'utilisateur
Walt a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum