0

I have a jquery function for my index.html page that runs when the page is ready. Its grabs an articles supporting image and follows the mouse cursor within a predefined area. However, upon visiting other pages and returning back to the index.html page the function no longer runs unless I perform a page refresh. How can I fix this?

Edit: It looks like the smoothstate function is causing the issue here as everything works as it is once I remove (smoothstate)[https://github.com/miguel-perez/smoothState.js]. HTML

<div id="main">

<p>Hover over titles</p>

<div class="content1">
  <a><h2>Title 1 goes here </h2></a>
  <img src="http://lorempixel.com/400/400/sports" alt="Image"/>
</div>

<div class="content2">
  <a><h2>Title 2 goes here </h2></a>
  <img src="http://lorempixel.com/300/300/people" alt="Image"/>
</div>

<div class="content2">
  <a><h2>Title 3 goes here </h2></a>
  <img src="http://lorempixel.com/200/300/technology" alt="Image"/>
</div>

</div>

jQuery

$(document).ready(function(){
    $('h2').on('mouseenter mousemove', function(evt){
        $(this).siblings('img').css({left: evt.pageX+30, top: evt.pageY-15}).show();
        $(this).on('mouseleave', function(){
            $(this).siblings('img').hide();
        });
    });
});

// Smoothstate

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        forms: 'form',
        onStart: {
          duration: 250, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 1000,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);

          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});
Samuel
  • 5,529
  • 5
  • 25
  • 39
  • I'm assuming your app is an SPA, so are you using any frameworks? – Rajesh Apr 03 '17 at 08:18
  • I'm only using [this](https://github.com/miguel-perez/smoothState.js). – Samuel Apr 03 '17 at 08:19
  • Issue is since your app is an SPA, your document is not getting loaded again. You will have to try some workarounds to achieve this – Rajesh Apr 03 '17 at 08:21
  • I see only an event callback for `mouseenter mousemove` which is very odd since `mousemove` already encapsulates `mouseenter` – vsync Apr 03 '17 at 08:22
  • are you referring to the `read` function which runs once? why do you even have that?? remove it. always put your script files before the closing `

    ` tag

     – vsync Apr 03 '17 at 08:23
  • Please show the HTML/code that deals with smoothstate transitions. – trincot Apr 03 '17 at 08:25
  • This question seems closely related to what you want http://stackoverflow.com/questions/3478654/browser-event-for-window-focus – airos Apr 03 '17 at 08:33

1 Answers1

0

Please refer following answers, closely related to what you want to do: browser event for window.focus()

Community
  • 1
  • 1
airos
  • 742
  • 5
  • 14