Faire en sorte que la zone d'édition suive le scroll

a marqué ce sujet comme résolu.
Auteur du sujet

Salut,

En train d’éditer un tutoriel dont l’aperçu d’une section dépasse de mon écran, je suis obligé de scroller vers le bas après après pressé "Aperçu" puis de scroller à nouveau vers le haut pour corriger une erreur, puis de scroller vers le bas pour reprendre ma lecture, puis… C’est assez laborieux.

Il me semble qu’il avait été mentionné une zone d’édition verticale dans le futur (édition à gauche, aperçu à droite) et ça devrait aider, mais en attendant il est possible de simplifier la vie des auteurs en fixant la zone d’édition (au sens CSS du terme), c’est-à-dire en la faisant suivre le scroll.

Merci. :)

Édité par Vayel

"Bienheureux celui qui sait rire de lui-même, il n’a pas fini de s’amuser." Joseph Folliet

+2 -0

Tu peux utiliser ça dans la console web :

const $div = $('#div_id_text'),
      $controls = $div.children('.controls');

$div.find('.markdown-help').remove();

$(window).on('scroll', () => {
    if ($div.offset().top - 10 < $(window).scrollTop()) {
        $div.next().css('margin-top', $controls.height() + 'px');
        $controls.css({
            background: '#f0f0f0',
            position: 'fixed',
            width: $controls.innerWidth() + 'px',
            top: 10 + 'px',
            'z-index': 1000
        });
    } else {
        $div.next().css('margin-top', 0 + 'px');
        $controls.removeAttr('style');
    }
});

EDIT : Pour les pages : https://zestedesavoir.com/contenus/editer-section/*/*

Édité par anonyme

+1 -0

C’est fait ! Par contre, la zone d’édition qui suit le scroll dans la zone de l’aperçu doit être optionnel et activable/désactivable avec un bouton car sinon sur les petits écrans (mon écran 1366x768 par exemple) ça va être la galère. :)

Corruptible avec des crêpes au sirop d’érable

+0 -0

Ouvrir dans une pop-up :

Ce type d’amélioration n’est pas souhaité sur Zeste de Savoir mais si ça peut aider certain, j’ai fais un mode popup. Ça permet de corriger les fautes pendant une relecture, plus rapidement.

Avant d’envoyer, il faudra générer le dernier Aperçu !

A c/c dans la console :

//EDIT

EDIT : J’ai fais un sujet ici : https://zestedesavoir.com/forums/sujet/12275/userscript-zds-editer-une-section-dans-une-pop-up/

Édité par anonyme

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte