Ricentrare le descrizioni dei comandi JQuery durante il ridimensionamento della finestra

Question

Ho scritto una funzione che posiziona una descrizione comandi appena sopra una casella di testo.

La funzione accetta due argomenti:

• textBoxId : l'ID della casella di testo sopra la quale verrà visualizzata la descrizione comandi.

  • Esempio : " # textBoxA "
    

• suggerimento tool - L'ID del suggerimento che apparirà sopra la casella di testo.

  • Esempio : "#toolTipA"

    function positionTooltip(textBoxId, toolTipId){

        var hoverElementOffsetLeft = $(textBoxId).offset().left;
        var hoverElementOffsetWidth = $(textBoxId)[0].offsetWidth;

        var toolTipElementOffsetLeft = $(toolTipId).offset().left;
        var toolTipElementOffsetWidth = $(toolTipId)[0].offsetWidth;

        // calcluate the x coordinate of the center of the hover element.
        var hoverElementCenterX =
            hoverElementOffsetLeft + (hoverElementOffsetWidth / 2);

        // calculate half the width of the toolTipElement
        var toolTipElementHalfWidth = toolTipElementOffsetWidth / 2;
        var toolTipElementLeft = hoverElementCenterX - toolTipElementHalfWidth;

        $(toolTipId)[0].style.left = toolTipElementLeft + "px";


        var toolTipElementHeight = $(toolTipId)[0].offsetHeight;
        var hoverElementOffsetTop = $(textBoxId).offset().top;
        var toolTipYCoord = hoverElementOffsetTop - toolTipElementHeight;
        toolTipYCoord = toolTipYCoord - 10;
        $(toolTipId)[0].style.top = toolTipYCoord + "px";

        $(toolTipId).hide();
$(textBoxId).hover(
 function(){ $(toolTipId + ':hidden').fadeIn(); },
 function(){ $(toolTipId + ':visible').fadeOut(); }
);

$(textBoxId).focus (
 function(){ $(toolTipId + ':hidden').fadeIn(); }
);

$(textBoxId).blur (
 function(){ $(toolTipId+ ':visible').fadeOut(); }
);


    }

---

La funzione funziona bene al caricamento della pagina iniziale:

---

Tuttavia, dopo che l'utente ridimensiona la finestra, i suggerimenti si spostano in posizioni che non vengono più visualizzate sopra la casella di testo associata.

---

Ho provato a scrivere del codice per risolvere il problema chiamando la funzione positionTooltip () quando la finestra viene ridimensionata, ma per qualche motivo i suggerimenti non vengono riposizionati come quando caricarono la pagina:

            var _resize_timer = null;

            $(window).resize(function() {

             if (_resize_timer) {clearTimeout(_resize_timer);}


            _resize_timer = setTimeout(function(){

                 positionTooltip('#textBoxA', ('#toolTipA'));

            }, 1000);
        });

Sono davvero perplesso sul perché non riposiziona correttamente la descrizione comando come quando la pagina è stata caricata inizialmente dopo un ridimensionamento.

Answer 1

La tua logica per il calcolo della posizione della descrizione comandi si attiva inizialmente solo quando chiami positionTooltip. Vuoi chiamarlo per ricalcolare la posizione prima della chiamata fadeIn.

Answer 2

Non capisco perché usi setTimeout () per avviare la tua funzione. Prova

$(function(){
// all your code onDocumentReady
...
...
            $(window).resize(function() {
                 positionTooltip('#textBoxA', ('#toolTipA'));
        });


});

Answer 3

Per me ha funzionato come un incantesimo, l'unico inconveniente è che a volte non si ottiene la posizione X, Y corretta, a quanto pare non compensa i valori di riempimento / margine dell'oggetto, ho fatto una correzione sporca aggiungendo questi valori manualmente prima che siano impostati come:

  toolTipElementLeft = toolTipElementLeft + 40;
  $(toolTipId)[0].style.left = toolTipElementLeft + "px";

e

  toolTipYCoord = toolTipYCoord + 25;
  $(toolTipId)[0].style.top = toolTipYCoord + "px";