Menu

Obtention du centre de la page à chaque scroll avec page séparé

Messages postés
34
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
15 mars 2019
-
Bonjour,

J'ai un petit souci et vous sollicite votre aide s'il vous plaît!
En fait, voici mon problème, j'ai un page html qui permet de lire et d'insérer un nouveau div éditable pour l'ajout d'un nouveau texte dans un fichier pdf et sur le menu il y a un boutton qui permet d'insérer un nouveau texte.
Et voici son monde de fonctionnement, à chaque fois qu'on créer un nouveau texte alors il y a un div qui permet d'ajouter un texte, et ce div doit toujours se positionné sur le centre du document même à chaque scroll. Et jusqu'ici tous fonctionne bien avec ce code:

Boutton qui permet d'ajouter du texte:

          var $new_div=$('<div id="'+id_max+'"  class="draggable "  contenteditable="true" data-text="Nouveau Texte"  style="color:black;  z-index:100; fontSize:16px; margin:0;padding:5px;position:absolute;top:'+position_scroll_top+'px;left:368px;width:150px; height:42px; border: 3px black solid; word-wrap: break-word; overflow:hidden; word-break:break-all; padding-left:10px;">Votre texte ici</div>');  
   


Le div qui permet d'ajouter du texte et centré sur le document grâce à la propriété position_scroll_top:

position_scroll_top= 200+$("#mainContainer").scrollTop();


Tous fonctionne très bien mais le problème c'est que quand je sépare le document par page à l'aide de ce fonction:

function isShowen(elem){
            var $elem = $(elem);
            //mainContainer et le div principal du document
   var $window = $("#mainContainer");
  
   elemTop = $elem.offset().top;
   //elemTop permet de marquer le note de la page à chaque scroll 
   //si le document et <=70 et >=-1185 alors le note de la page change
            return elemTop<= 70 && elemTop>= -1185;
        
    }


  $(".PDFPage").each(function(index){
               if (isShowen(this)){
//                   console.log("PAGE VIEWED "+(index+1));
                   $("#actualPage").text((index+1));
                   //console.log(index+1);
                   pageConcerner=index+1;
 }


Ce qui permet de marquer la page comme l'image ci-dessous:


Mais ce qui est étrange c'est que dans le premier page le texte s'affiche bien au centre du document à chaque scroll mais lorsque je passe sur la deuxième page et que j'insère un nouveau texte alors le texte ne se positionne plus au centre mais elle saute tout de suite dans la troisième page et sa valeur varie bizharrement.

Quand je comment le code

 return elemTop<= 70 && elemTop>= -1185;


qui permet de numéroté le page alors tous fonctionne bien mais lorsque je l'active et que le page est numéroté page 1, page 2,... alors de nouveau quand je scroll sur la deuxième page, le texte ne se positionne plus sur le centre mais saute dans la troisième page et ainsi de suite.Comme l'image ci-dessous:



Ce que je veux donc c'est que le texte s'ajoute toujours au centre du document même si le document est séparé par un numéro de page.

C'est un peu long à expliquer mais j'espère que vous avez compris mon problème et vous sollicite votre aide.

Cordialement,
Afficher la suite 

Votre réponse

1 réponse

0
Merci
Bonjour,
plutôt avec (window.offsetHeight - body.offsetTop + window.scrollHeight)/2 pour obtenir le centre vertical je pense:
window.offsetHeight donne la hauteur totale de la page
body.offsetTop la position à partir du haut de la page(par son parent)
window.scrollHeigth la position du scroll dans la page
ou leur équivalents JQuery


A recalculer à chaque scroll effectué(événement onChange ou lors de la génération de l’élément à afficher au centre) bien sûr.
A vérifier mais $("#mainContainer").offset().top donne la position à partir du haut de la page en pixels du parent de id=maincontainer donc ne tient as compte du scroll.
et
return elemTop<= 70 && elemTop>= -1185;
est assez peu adapté aux différentes résolutions possibles et une valeur négative c'est possible que si offsetTop n'est pas toute la page mais que son élément parent n'est pas body ou window et comporte déjà un décalage.
J'espére avoir compris la question bonne chance.
rasielblas
Messages postés
34
Date d'inscription
jeudi 20 mars 2014
Dernière intervention
15 mars 2019
-
Merci de m'avoir répondu, en fait j'ai fait console.log(window.offsetHeight) et aussi les autres est cela m'a retourné un résultat undefined! pouvez vous donnez un exemple complet pour ce petit guide que vous m'avez suggérer ou un lien montrant son utilisation, je suis un peu perdu! Merci!
Commenter la réponse de lauden