Trigger mouse enter event on page load if cursor already on the element





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







3















I have binded a mouseenter event with some elements on my page, I am checking if the page has been loaded before allowing the actual functionality of mouseenter to run. Everything works fine but the problem is, if a user already places the cursor on the element before the page loaded, the user is then forced to first move out of the div and then again move cursor inside the div for the event to fire which makes it pretty awkward.



Is there a way by which I can check where the cursor is on page load, as in, on which element it is hovering and trigger the mouseenter event accordingly?



I have attached a snippet for better understanding of my problem.



Thanks, in advance.






let pageLoaded;

/* assuming page load takes 3 seconds*/
window.onload = () => setTimeout(() => pageLoaded = true, 3000)

$(document).ready(() => {

$('#box').mouseenter(() => {

/* continue only if the page has been loaded */
if (!pageLoaded)
return;

$('body').append('mouse entered after page load <br>')


})
})

#box {
height: 150px;
width: 150px;
background-color: green;
margin:10px;
cursor:pointer;
float: left;
}

p {
font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box">
</div>

<p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>












share|improve this question





























    3















    I have binded a mouseenter event with some elements on my page, I am checking if the page has been loaded before allowing the actual functionality of mouseenter to run. Everything works fine but the problem is, if a user already places the cursor on the element before the page loaded, the user is then forced to first move out of the div and then again move cursor inside the div for the event to fire which makes it pretty awkward.



    Is there a way by which I can check where the cursor is on page load, as in, on which element it is hovering and trigger the mouseenter event accordingly?



    I have attached a snippet for better understanding of my problem.



    Thanks, in advance.






    let pageLoaded;

    /* assuming page load takes 3 seconds*/
    window.onload = () => setTimeout(() => pageLoaded = true, 3000)

    $(document).ready(() => {

    $('#box').mouseenter(() => {

    /* continue only if the page has been loaded */
    if (!pageLoaded)
    return;

    $('body').append('mouse entered after page load <br>')


    })
    })

    #box {
    height: 150px;
    width: 150px;
    background-color: green;
    margin:10px;
    cursor:pointer;
    float: left;
    }

    p {
    font-style: italic;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="box">
    </div>

    <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>












    share|improve this question

























      3












      3








      3








      I have binded a mouseenter event with some elements on my page, I am checking if the page has been loaded before allowing the actual functionality of mouseenter to run. Everything works fine but the problem is, if a user already places the cursor on the element before the page loaded, the user is then forced to first move out of the div and then again move cursor inside the div for the event to fire which makes it pretty awkward.



      Is there a way by which I can check where the cursor is on page load, as in, on which element it is hovering and trigger the mouseenter event accordingly?



      I have attached a snippet for better understanding of my problem.



      Thanks, in advance.






      let pageLoaded;

      /* assuming page load takes 3 seconds*/
      window.onload = () => setTimeout(() => pageLoaded = true, 3000)

      $(document).ready(() => {

      $('#box').mouseenter(() => {

      /* continue only if the page has been loaded */
      if (!pageLoaded)
      return;

      $('body').append('mouse entered after page load <br>')


      })
      })

      #box {
      height: 150px;
      width: 150px;
      background-color: green;
      margin:10px;
      cursor:pointer;
      float: left;
      }

      p {
      font-style: italic;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <div id="box">
      </div>

      <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>












      share|improve this question














      I have binded a mouseenter event with some elements on my page, I am checking if the page has been loaded before allowing the actual functionality of mouseenter to run. Everything works fine but the problem is, if a user already places the cursor on the element before the page loaded, the user is then forced to first move out of the div and then again move cursor inside the div for the event to fire which makes it pretty awkward.



      Is there a way by which I can check where the cursor is on page load, as in, on which element it is hovering and trigger the mouseenter event accordingly?



      I have attached a snippet for better understanding of my problem.



      Thanks, in advance.






      let pageLoaded;

      /* assuming page load takes 3 seconds*/
      window.onload = () => setTimeout(() => pageLoaded = true, 3000)

      $(document).ready(() => {

      $('#box').mouseenter(() => {

      /* continue only if the page has been loaded */
      if (!pageLoaded)
      return;

      $('body').append('mouse entered after page load <br>')


      })
      })

      #box {
      height: 150px;
      width: 150px;
      background-color: green;
      margin:10px;
      cursor:pointer;
      float: left;
      }

      p {
      font-style: italic;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <div id="box">
      </div>

      <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>








      let pageLoaded;

      /* assuming page load takes 3 seconds*/
      window.onload = () => setTimeout(() => pageLoaded = true, 3000)

      $(document).ready(() => {

      $('#box').mouseenter(() => {

      /* continue only if the page has been loaded */
      if (!pageLoaded)
      return;

      $('body').append('mouse entered after page load <br>')


      })
      })

      #box {
      height: 150px;
      width: 150px;
      background-color: green;
      margin:10px;
      cursor:pointer;
      float: left;
      }

      p {
      font-style: italic;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <div id="box">
      </div>

      <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





      let pageLoaded;

      /* assuming page load takes 3 seconds*/
      window.onload = () => setTimeout(() => pageLoaded = true, 3000)

      $(document).ready(() => {

      $('#box').mouseenter(() => {

      /* continue only if the page has been loaded */
      if (!pageLoaded)
      return;

      $('body').append('mouse entered after page load <br>')


      })
      })

      #box {
      height: 150px;
      width: 150px;
      background-color: green;
      margin:10px;
      cursor:pointer;
      float: left;
      }

      p {
      font-style: italic;
      }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

      <div id="box">
      </div>

      <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>






      javascript jquery html css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 22 '18 at 14:10









      saibbywebsaibbyweb

      7691620




      7691620
























          4 Answers
          4






          active

          oldest

          votes


















          0














          ** Edited answer **
          Since hiding the box is not an option, use a boolean which tracks if the user is on the box using mouseenter and mouseleave before page load. Then, if after the page is loaded the boolean is true, call the same logic as the mouseover event manually.
          Then remove the mouseenter and mouseleave listeners.






          let pageLoaded;
          let insideBox = false;

          /* assuming page load takes 3 seconds*/
          window.onload = () => setTimeout(function() {
          pageLoaded = true;
          if (insideBox) {
          // Manually call the mouseover logic here
          $('body').append('mouse entered BEFORE page load <br>')
          }
          $('#box').off('mouseenter').off('mouseleave')
          }, 3000)


          $(document).ready(() => {
          $('#box').on('mouseenter', function() {
          insideBox = true;
          })
          $('#box').on('mouseleave', function() {
          insideBox = false;
          })

          $('#box').mouseover(() => {
          /* continue only if the page has been loaded */
          if (!pageLoaded)
          return;

          $('body').append('mouse entered after page load <br>')
          })
          })

          #box {
          height: 150px;
          width: 150px;
          background-color: green;
          margin:10px;
          cursor:pointer;
          float: left;
          }

          p {
          font-style: italic;
          }

          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

          <div id="box">
          </div>

          <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>








          share|improve this answer

































            1














            [EDITED]
            i use mousemove inside the box, but it needs that you move the mouse 1px or more, here is the code






            let pageLoaded;

            /* assuming page load takes 3 seconds*/
            window.onload = () => setTimeout(() => pageLoaded = true, 3000)

            $(document).ready(() => {
            //created for control and trigger event only one time
            var outControl = true;
            $('#box').mousemove(() => {
            /* continue only if the page has been loaded */
            if (!pageLoaded)
            return;
            if(outControl){
            outControl = false;
            $('body').append('mouse entered after page load <br>')
            }
            })

            $( "#box" ).mouseout(function() {
            outControl = true;
            $('body').append('mouse left after page load <br>')
            });
            })

            #box {
            height: 150px;
            width: 150px;
            background-color: green;
            margin:10px;
            cursor:pointer;
            float: left;
            }

            p {
            font-style: italic;
            }

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div id="box">
            </div>

            <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





            [EDIT]
            Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(



            [SECOND_EDIT]
            In this case, i use localStorage, is not possible teste this in code sniped, but paste this in the same example but at local page, this works fine for me.
            This code is not very good (i do not have mutch time, sorry), but you can use localStorage as a kick-start to find a better solution



            let pageLoaded;

            window.onload = () => setTimeout(() => pageLoaded = true, 3000)

            $(document).ready(function (e){
            $('#box').mousemove((e) => {
            /* continue only if the page has been loaded */
            if (!pageLoaded){
            if(outControl){
            localStorage.setItem("mouseHoverElementId",e.target.id)
            $('body').append('mouse entered before page load <br>')
            outControl = false;
            }

            return;
            }
            if(outControl){
            localStorage.setItem("mouseHoverElementId",e.target.id)
            outControl = false;
            $('body').append('mouse entered after page load <br>')
            }
            })

            $( "#box" ).mouseout(function() {
            localStorage.setItem("mouseHoverElementId","")
            outControl = true;
            !pageLoaded ? $('body').append('mouse left before page load <br>') : $('body').append('mouse left after page load <br>')
            });
            //created for control and trigger event only one time
            var outControl = true;
            if(localStorage.getItem("mouseHoverElementId") != ""){
            $('#'+ localStorage.getItem("mouseHoverElementId")).mousemove();
            }
            })





            share|improve this answer


























            • That's definitely much better. But can we do better? Like firing the event without moving the mouse.

              – saibbyweb
              Nov 22 '18 at 14:52











            • @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

              – Demian Bibiano
              Nov 22 '18 at 15:00













            • Appreciate your efforts man!. Thanks.

              – saibbyweb
              Nov 22 '18 at 15:03











            • @saibbyweb do you have a masterpage?

              – Demian Bibiano
              Nov 22 '18 at 15:14






            • 1





              @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

              – Demian Bibiano
              Nov 22 '18 at 16:55





















            0














            You could register a mousemove listener which is executed once with jQuery.one and store the mouse position.
            Then you get the position of your reference element and compare them.
            If elements are coliding just use jQuerys trigger method.






            share|improve this answer































              0














              I would suggest you create a region within your page, for example, the different sections of the page and use if statements to check the mousecursor position on page load, then run whatever you want to if the check comes out true.
              That's my suggestion.






              share|improve this answer
























                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });














                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53432813%2ftrigger-mouse-enter-event-on-page-load-if-cursor-already-on-the-element%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                4 Answers
                4






                active

                oldest

                votes








                4 Answers
                4






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                0














                ** Edited answer **
                Since hiding the box is not an option, use a boolean which tracks if the user is on the box using mouseenter and mouseleave before page load. Then, if after the page is loaded the boolean is true, call the same logic as the mouseover event manually.
                Then remove the mouseenter and mouseleave listeners.






                let pageLoaded;
                let insideBox = false;

                /* assuming page load takes 3 seconds*/
                window.onload = () => setTimeout(function() {
                pageLoaded = true;
                if (insideBox) {
                // Manually call the mouseover logic here
                $('body').append('mouse entered BEFORE page load <br>')
                }
                $('#box').off('mouseenter').off('mouseleave')
                }, 3000)


                $(document).ready(() => {
                $('#box').on('mouseenter', function() {
                insideBox = true;
                })
                $('#box').on('mouseleave', function() {
                insideBox = false;
                })

                $('#box').mouseover(() => {
                /* continue only if the page has been loaded */
                if (!pageLoaded)
                return;

                $('body').append('mouse entered after page load <br>')
                })
                })

                #box {
                height: 150px;
                width: 150px;
                background-color: green;
                margin:10px;
                cursor:pointer;
                float: left;
                }

                p {
                font-style: italic;
                }

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                <div id="box">
                </div>

                <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>








                share|improve this answer






























                  0














                  ** Edited answer **
                  Since hiding the box is not an option, use a boolean which tracks if the user is on the box using mouseenter and mouseleave before page load. Then, if after the page is loaded the boolean is true, call the same logic as the mouseover event manually.
                  Then remove the mouseenter and mouseleave listeners.






                  let pageLoaded;
                  let insideBox = false;

                  /* assuming page load takes 3 seconds*/
                  window.onload = () => setTimeout(function() {
                  pageLoaded = true;
                  if (insideBox) {
                  // Manually call the mouseover logic here
                  $('body').append('mouse entered BEFORE page load <br>')
                  }
                  $('#box').off('mouseenter').off('mouseleave')
                  }, 3000)


                  $(document).ready(() => {
                  $('#box').on('mouseenter', function() {
                  insideBox = true;
                  })
                  $('#box').on('mouseleave', function() {
                  insideBox = false;
                  })

                  $('#box').mouseover(() => {
                  /* continue only if the page has been loaded */
                  if (!pageLoaded)
                  return;

                  $('body').append('mouse entered after page load <br>')
                  })
                  })

                  #box {
                  height: 150px;
                  width: 150px;
                  background-color: green;
                  margin:10px;
                  cursor:pointer;
                  float: left;
                  }

                  p {
                  font-style: italic;
                  }

                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                  <div id="box">
                  </div>

                  <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>








                  share|improve this answer




























                    0












                    0








                    0







                    ** Edited answer **
                    Since hiding the box is not an option, use a boolean which tracks if the user is on the box using mouseenter and mouseleave before page load. Then, if after the page is loaded the boolean is true, call the same logic as the mouseover event manually.
                    Then remove the mouseenter and mouseleave listeners.






                    let pageLoaded;
                    let insideBox = false;

                    /* assuming page load takes 3 seconds*/
                    window.onload = () => setTimeout(function() {
                    pageLoaded = true;
                    if (insideBox) {
                    // Manually call the mouseover logic here
                    $('body').append('mouse entered BEFORE page load <br>')
                    }
                    $('#box').off('mouseenter').off('mouseleave')
                    }, 3000)


                    $(document).ready(() => {
                    $('#box').on('mouseenter', function() {
                    insideBox = true;
                    })
                    $('#box').on('mouseleave', function() {
                    insideBox = false;
                    })

                    $('#box').mouseover(() => {
                    /* continue only if the page has been loaded */
                    if (!pageLoaded)
                    return;

                    $('body').append('mouse entered after page load <br>')
                    })
                    })

                    #box {
                    height: 150px;
                    width: 150px;
                    background-color: green;
                    margin:10px;
                    cursor:pointer;
                    float: left;
                    }

                    p {
                    font-style: italic;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                    <div id="box">
                    </div>

                    <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>








                    share|improve this answer















                    ** Edited answer **
                    Since hiding the box is not an option, use a boolean which tracks if the user is on the box using mouseenter and mouseleave before page load. Then, if after the page is loaded the boolean is true, call the same logic as the mouseover event manually.
                    Then remove the mouseenter and mouseleave listeners.






                    let pageLoaded;
                    let insideBox = false;

                    /* assuming page load takes 3 seconds*/
                    window.onload = () => setTimeout(function() {
                    pageLoaded = true;
                    if (insideBox) {
                    // Manually call the mouseover logic here
                    $('body').append('mouse entered BEFORE page load <br>')
                    }
                    $('#box').off('mouseenter').off('mouseleave')
                    }, 3000)


                    $(document).ready(() => {
                    $('#box').on('mouseenter', function() {
                    insideBox = true;
                    })
                    $('#box').on('mouseleave', function() {
                    insideBox = false;
                    })

                    $('#box').mouseover(() => {
                    /* continue only if the page has been loaded */
                    if (!pageLoaded)
                    return;

                    $('body').append('mouse entered after page load <br>')
                    })
                    })

                    #box {
                    height: 150px;
                    width: 150px;
                    background-color: green;
                    margin:10px;
                    cursor:pointer;
                    float: left;
                    }

                    p {
                    font-style: italic;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                    <div id="box">
                    </div>

                    <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>








                    let pageLoaded;
                    let insideBox = false;

                    /* assuming page load takes 3 seconds*/
                    window.onload = () => setTimeout(function() {
                    pageLoaded = true;
                    if (insideBox) {
                    // Manually call the mouseover logic here
                    $('body').append('mouse entered BEFORE page load <br>')
                    }
                    $('#box').off('mouseenter').off('mouseleave')
                    }, 3000)


                    $(document).ready(() => {
                    $('#box').on('mouseenter', function() {
                    insideBox = true;
                    })
                    $('#box').on('mouseleave', function() {
                    insideBox = false;
                    })

                    $('#box').mouseover(() => {
                    /* continue only if the page has been loaded */
                    if (!pageLoaded)
                    return;

                    $('body').append('mouse entered after page load <br>')
                    })
                    })

                    #box {
                    height: 150px;
                    width: 150px;
                    background-color: green;
                    margin:10px;
                    cursor:pointer;
                    float: left;
                    }

                    p {
                    font-style: italic;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                    <div id="box">
                    </div>

                    <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





                    let pageLoaded;
                    let insideBox = false;

                    /* assuming page load takes 3 seconds*/
                    window.onload = () => setTimeout(function() {
                    pageLoaded = true;
                    if (insideBox) {
                    // Manually call the mouseover logic here
                    $('body').append('mouse entered BEFORE page load <br>')
                    }
                    $('#box').off('mouseenter').off('mouseleave')
                    }, 3000)


                    $(document).ready(() => {
                    $('#box').on('mouseenter', function() {
                    insideBox = true;
                    })
                    $('#box').on('mouseleave', function() {
                    insideBox = false;
                    })

                    $('#box').mouseover(() => {
                    /* continue only if the page has been loaded */
                    if (!pageLoaded)
                    return;

                    $('body').append('mouse entered after page load <br>')
                    })
                    })

                    #box {
                    height: 150px;
                    width: 150px;
                    background-color: green;
                    margin:10px;
                    cursor:pointer;
                    float: left;
                    }

                    p {
                    font-style: italic;
                    }

                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

                    <div id="box">
                    </div>

                    <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    edited Nov 22 '18 at 14:55

























                    answered Nov 22 '18 at 14:30









                    ShushanShushan

                    1,1171915




                    1,1171915

























                        1














                        [EDITED]
                        i use mousemove inside the box, but it needs that you move the mouse 1px or more, here is the code






                        let pageLoaded;

                        /* assuming page load takes 3 seconds*/
                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(() => {
                        //created for control and trigger event only one time
                        var outControl = true;
                        $('#box').mousemove(() => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded)
                        return;
                        if(outControl){
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        outControl = true;
                        $('body').append('mouse left after page load <br>')
                        });
                        })

                        #box {
                        height: 150px;
                        width: 150px;
                        background-color: green;
                        margin:10px;
                        cursor:pointer;
                        float: left;
                        }

                        p {
                        font-style: italic;
                        }

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <div id="box">
                        </div>

                        <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





                        [EDIT]
                        Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(



                        [SECOND_EDIT]
                        In this case, i use localStorage, is not possible teste this in code sniped, but paste this in the same example but at local page, this works fine for me.
                        This code is not very good (i do not have mutch time, sorry), but you can use localStorage as a kick-start to find a better solution



                        let pageLoaded;

                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(function (e){
                        $('#box').mousemove((e) => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded){
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        $('body').append('mouse entered before page load <br>')
                        outControl = false;
                        }

                        return;
                        }
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        localStorage.setItem("mouseHoverElementId","")
                        outControl = true;
                        !pageLoaded ? $('body').append('mouse left before page load <br>') : $('body').append('mouse left after page load <br>')
                        });
                        //created for control and trigger event only one time
                        var outControl = true;
                        if(localStorage.getItem("mouseHoverElementId") != ""){
                        $('#'+ localStorage.getItem("mouseHoverElementId")).mousemove();
                        }
                        })





                        share|improve this answer


























                        • That's definitely much better. But can we do better? Like firing the event without moving the mouse.

                          – saibbyweb
                          Nov 22 '18 at 14:52











                        • @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

                          – Demian Bibiano
                          Nov 22 '18 at 15:00













                        • Appreciate your efforts man!. Thanks.

                          – saibbyweb
                          Nov 22 '18 at 15:03











                        • @saibbyweb do you have a masterpage?

                          – Demian Bibiano
                          Nov 22 '18 at 15:14






                        • 1





                          @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

                          – Demian Bibiano
                          Nov 22 '18 at 16:55


















                        1














                        [EDITED]
                        i use mousemove inside the box, but it needs that you move the mouse 1px or more, here is the code






                        let pageLoaded;

                        /* assuming page load takes 3 seconds*/
                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(() => {
                        //created for control and trigger event only one time
                        var outControl = true;
                        $('#box').mousemove(() => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded)
                        return;
                        if(outControl){
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        outControl = true;
                        $('body').append('mouse left after page load <br>')
                        });
                        })

                        #box {
                        height: 150px;
                        width: 150px;
                        background-color: green;
                        margin:10px;
                        cursor:pointer;
                        float: left;
                        }

                        p {
                        font-style: italic;
                        }

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <div id="box">
                        </div>

                        <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





                        [EDIT]
                        Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(



                        [SECOND_EDIT]
                        In this case, i use localStorage, is not possible teste this in code sniped, but paste this in the same example but at local page, this works fine for me.
                        This code is not very good (i do not have mutch time, sorry), but you can use localStorage as a kick-start to find a better solution



                        let pageLoaded;

                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(function (e){
                        $('#box').mousemove((e) => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded){
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        $('body').append('mouse entered before page load <br>')
                        outControl = false;
                        }

                        return;
                        }
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        localStorage.setItem("mouseHoverElementId","")
                        outControl = true;
                        !pageLoaded ? $('body').append('mouse left before page load <br>') : $('body').append('mouse left after page load <br>')
                        });
                        //created for control and trigger event only one time
                        var outControl = true;
                        if(localStorage.getItem("mouseHoverElementId") != ""){
                        $('#'+ localStorage.getItem("mouseHoverElementId")).mousemove();
                        }
                        })





                        share|improve this answer


























                        • That's definitely much better. But can we do better? Like firing the event without moving the mouse.

                          – saibbyweb
                          Nov 22 '18 at 14:52











                        • @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

                          – Demian Bibiano
                          Nov 22 '18 at 15:00













                        • Appreciate your efforts man!. Thanks.

                          – saibbyweb
                          Nov 22 '18 at 15:03











                        • @saibbyweb do you have a masterpage?

                          – Demian Bibiano
                          Nov 22 '18 at 15:14






                        • 1





                          @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

                          – Demian Bibiano
                          Nov 22 '18 at 16:55
















                        1












                        1








                        1







                        [EDITED]
                        i use mousemove inside the box, but it needs that you move the mouse 1px or more, here is the code






                        let pageLoaded;

                        /* assuming page load takes 3 seconds*/
                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(() => {
                        //created for control and trigger event only one time
                        var outControl = true;
                        $('#box').mousemove(() => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded)
                        return;
                        if(outControl){
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        outControl = true;
                        $('body').append('mouse left after page load <br>')
                        });
                        })

                        #box {
                        height: 150px;
                        width: 150px;
                        background-color: green;
                        margin:10px;
                        cursor:pointer;
                        float: left;
                        }

                        p {
                        font-style: italic;
                        }

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <div id="box">
                        </div>

                        <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





                        [EDIT]
                        Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(



                        [SECOND_EDIT]
                        In this case, i use localStorage, is not possible teste this in code sniped, but paste this in the same example but at local page, this works fine for me.
                        This code is not very good (i do not have mutch time, sorry), but you can use localStorage as a kick-start to find a better solution



                        let pageLoaded;

                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(function (e){
                        $('#box').mousemove((e) => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded){
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        $('body').append('mouse entered before page load <br>')
                        outControl = false;
                        }

                        return;
                        }
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        localStorage.setItem("mouseHoverElementId","")
                        outControl = true;
                        !pageLoaded ? $('body').append('mouse left before page load <br>') : $('body').append('mouse left after page load <br>')
                        });
                        //created for control and trigger event only one time
                        var outControl = true;
                        if(localStorage.getItem("mouseHoverElementId") != ""){
                        $('#'+ localStorage.getItem("mouseHoverElementId")).mousemove();
                        }
                        })





                        share|improve this answer















                        [EDITED]
                        i use mousemove inside the box, but it needs that you move the mouse 1px or more, here is the code






                        let pageLoaded;

                        /* assuming page load takes 3 seconds*/
                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(() => {
                        //created for control and trigger event only one time
                        var outControl = true;
                        $('#box').mousemove(() => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded)
                        return;
                        if(outControl){
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        outControl = true;
                        $('body').append('mouse left after page load <br>')
                        });
                        })

                        #box {
                        height: 150px;
                        width: 150px;
                        background-color: green;
                        margin:10px;
                        cursor:pointer;
                        float: left;
                        }

                        p {
                        font-style: italic;
                        }

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <div id="box">
                        </div>

                        <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





                        [EDIT]
                        Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(



                        [SECOND_EDIT]
                        In this case, i use localStorage, is not possible teste this in code sniped, but paste this in the same example but at local page, this works fine for me.
                        This code is not very good (i do not have mutch time, sorry), but you can use localStorage as a kick-start to find a better solution



                        let pageLoaded;

                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(function (e){
                        $('#box').mousemove((e) => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded){
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        $('body').append('mouse entered before page load <br>')
                        outControl = false;
                        }

                        return;
                        }
                        if(outControl){
                        localStorage.setItem("mouseHoverElementId",e.target.id)
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        localStorage.setItem("mouseHoverElementId","")
                        outControl = true;
                        !pageLoaded ? $('body').append('mouse left before page load <br>') : $('body').append('mouse left after page load <br>')
                        });
                        //created for control and trigger event only one time
                        var outControl = true;
                        if(localStorage.getItem("mouseHoverElementId") != ""){
                        $('#'+ localStorage.getItem("mouseHoverElementId")).mousemove();
                        }
                        })





                        let pageLoaded;

                        /* assuming page load takes 3 seconds*/
                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(() => {
                        //created for control and trigger event only one time
                        var outControl = true;
                        $('#box').mousemove(() => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded)
                        return;
                        if(outControl){
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        outControl = true;
                        $('body').append('mouse left after page load <br>')
                        });
                        })

                        #box {
                        height: 150px;
                        width: 150px;
                        background-color: green;
                        margin:10px;
                        cursor:pointer;
                        float: left;
                        }

                        p {
                        font-style: italic;
                        }

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <div id="box">
                        </div>

                        <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>





                        let pageLoaded;

                        /* assuming page load takes 3 seconds*/
                        window.onload = () => setTimeout(() => pageLoaded = true, 3000)

                        $(document).ready(() => {
                        //created for control and trigger event only one time
                        var outControl = true;
                        $('#box').mousemove(() => {
                        /* continue only if the page has been loaded */
                        if (!pageLoaded)
                        return;
                        if(outControl){
                        outControl = false;
                        $('body').append('mouse entered after page load <br>')
                        }
                        })

                        $( "#box" ).mouseout(function() {
                        outControl = true;
                        $('body').append('mouse left after page load <br>')
                        });
                        })

                        #box {
                        height: 150px;
                        width: 150px;
                        background-color: green;
                        margin:10px;
                        cursor:pointer;
                        float: left;
                        }

                        p {
                        font-style: italic;
                        }

                        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                        <div id="box">
                        </div>

                        <p> I want the mouseenter event to fire (on page load ~ "3 seconds here"), if the cursor was already placed inside the green box before the page loaded. </p>






                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Nov 22 '18 at 16:53

























                        answered Nov 22 '18 at 14:42









                        Demian BibianoDemian Bibiano

                        16810




                        16810













                        • That's definitely much better. But can we do better? Like firing the event without moving the mouse.

                          – saibbyweb
                          Nov 22 '18 at 14:52











                        • @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

                          – Demian Bibiano
                          Nov 22 '18 at 15:00













                        • Appreciate your efforts man!. Thanks.

                          – saibbyweb
                          Nov 22 '18 at 15:03











                        • @saibbyweb do you have a masterpage?

                          – Demian Bibiano
                          Nov 22 '18 at 15:14






                        • 1





                          @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

                          – Demian Bibiano
                          Nov 22 '18 at 16:55





















                        • That's definitely much better. But can we do better? Like firing the event without moving the mouse.

                          – saibbyweb
                          Nov 22 '18 at 14:52











                        • @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

                          – Demian Bibiano
                          Nov 22 '18 at 15:00













                        • Appreciate your efforts man!. Thanks.

                          – saibbyweb
                          Nov 22 '18 at 15:03











                        • @saibbyweb do you have a masterpage?

                          – Demian Bibiano
                          Nov 22 '18 at 15:14






                        • 1





                          @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

                          – Demian Bibiano
                          Nov 22 '18 at 16:55



















                        That's definitely much better. But can we do better? Like firing the event without moving the mouse.

                        – saibbyweb
                        Nov 22 '18 at 14:52





                        That's definitely much better. But can we do better? Like firing the event without moving the mouse.

                        – saibbyweb
                        Nov 22 '18 at 14:52













                        @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

                        – Demian Bibiano
                        Nov 22 '18 at 15:00







                        @saibbyweb Sorry bro, but its not possible get mouse position before the mouse move, the browser does not have this information before the mouse move, and you may think "then I'm going to fire the event manually at the top of the page", this does not work either :(

                        – Demian Bibiano
                        Nov 22 '18 at 15:00















                        Appreciate your efforts man!. Thanks.

                        – saibbyweb
                        Nov 22 '18 at 15:03





                        Appreciate your efforts man!. Thanks.

                        – saibbyweb
                        Nov 22 '18 at 15:03













                        @saibbyweb do you have a masterpage?

                        – Demian Bibiano
                        Nov 22 '18 at 15:14





                        @saibbyweb do you have a masterpage?

                        – Demian Bibiano
                        Nov 22 '18 at 15:14




                        1




                        1





                        @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

                        – Demian Bibiano
                        Nov 22 '18 at 16:55







                        @saibbyweb sorry I edited again, the old one did not work, but now is working, I do not want points, I found this problem really interesting

                        – Demian Bibiano
                        Nov 22 '18 at 16:55













                        0














                        You could register a mousemove listener which is executed once with jQuery.one and store the mouse position.
                        Then you get the position of your reference element and compare them.
                        If elements are coliding just use jQuerys trigger method.






                        share|improve this answer




























                          0














                          You could register a mousemove listener which is executed once with jQuery.one and store the mouse position.
                          Then you get the position of your reference element and compare them.
                          If elements are coliding just use jQuerys trigger method.






                          share|improve this answer


























                            0












                            0








                            0







                            You could register a mousemove listener which is executed once with jQuery.one and store the mouse position.
                            Then you get the position of your reference element and compare them.
                            If elements are coliding just use jQuerys trigger method.






                            share|improve this answer













                            You could register a mousemove listener which is executed once with jQuery.one and store the mouse position.
                            Then you get the position of your reference element and compare them.
                            If elements are coliding just use jQuerys trigger method.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 22 '18 at 14:20









                            Code SpiritCode Spirit

                            9761511




                            9761511























                                0














                                I would suggest you create a region within your page, for example, the different sections of the page and use if statements to check the mousecursor position on page load, then run whatever you want to if the check comes out true.
                                That's my suggestion.






                                share|improve this answer




























                                  0














                                  I would suggest you create a region within your page, for example, the different sections of the page and use if statements to check the mousecursor position on page load, then run whatever you want to if the check comes out true.
                                  That's my suggestion.






                                  share|improve this answer


























                                    0












                                    0








                                    0







                                    I would suggest you create a region within your page, for example, the different sections of the page and use if statements to check the mousecursor position on page load, then run whatever you want to if the check comes out true.
                                    That's my suggestion.






                                    share|improve this answer













                                    I would suggest you create a region within your page, for example, the different sections of the page and use if statements to check the mousecursor position on page load, then run whatever you want to if the check comes out true.
                                    That's my suggestion.







                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Nov 22 '18 at 14:22









                                    Benedict BincomBenedict Bincom

                                    664




                                    664






























                                        draft saved

                                        draft discarded




















































                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53432813%2ftrigger-mouse-enter-event-on-page-load-if-cursor-already-on-the-element%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Guess what letter conforming each word

                                        Port of Spain

                                        Run scheduled task as local user group (not BUILTIN)