1 Reply Latest reply on Feb 28, 2014 9:15 AM by cyclux

    Calculation of cursor position is not working properly with a responsive stage

    cyclux

      Hi there,

       

      I already wrote in another thread about it, but my problem is slightly different to the other discussion, so here again:

       

      I want to display a symbol next to the cursor. It should stay there like in this example here: http://sandbox.junglecrowd.org/static/publish/web/static.html

       

      When using a responsive Stage (what is crucial to my project, because I need 100% width on all window sizes) the placement ot the symbol is dependent on the size of the window and the position on the screen. Here is an example of the problem:

      http://sandbox.junglecrowd.org/responsive/publish/web/responsive.html

       

      So, gathering the coordinates within EA seems not to be the right way.. Or does someone know a solution to compensate for the responsivness?

      My idea would be to get the coordinates outside of EA.. would this be possible? And in which way?

      ..of course, any other solutions are very welcome!

       

      Below is my code... As you see I'm very new to EA and coding..

      Thanks!

       

      BTW: I read a lot in this forum before because of other problems, and I found a lot solutions: Thanks to you all!

       

       

      // CompositionReady

       

      sym.createsym = function(){

       

      var position = sym.$("box").show();

      var position2 = sym.$("text").show();

        position.css({

          top:sym.posY, left:sym.posX

        });

          position2.css({

          top:sym.posY, left:sym.posX

        });

      };

       

      // Stage.mousemove

      sym.posX = e.pageX + 30;

      sym.posY = e.pageY;

       

      sym.createsym();

        • 1. Re: Calculation of cursor position is not working properly with a responsive stage
          cyclux Level 1

          I found out a solution now!

           

          I take the window width and make a ratio variable with the stage width... Then the stageratio gets multiplicated with the coordinates... On window resize the variables are recalculated..  here's a working example:

           

          http://sandbox.junglecrowd.org/responsive_works/publish/web/responsive .html

           

          Here's the code.. If anyone knows how to improve it please tell me

           

          // CompositionReady

           

          sym.xycompensation = function() {

          var stage = sym.$('Stage');

          var parent = sym.$('Stage').parent();

          var parentWidth = stage.parent().width();

          var stageWidth = stage.width();

          sym.scaleratio = stageWidth/parentWidth;

          };

           

          sym.xycompensation();

           

          $(window).on('resize', function(){

          sym.xycompensation();

          });

           

          sym.infolabel = function(){

          var position = sym.$("box").show();

          var position2 = sym.$("text").show();

            position.css({

              top:sym.posY, left:sym.posX

            });

              position2.css({

              top:sym.posY, left:sym.posX

            });

          };

           

          // Stage.mousemove

           

          sym.posX = e.pageX * sym.scaleratio + 30;

          sym.posY = e.pageY * sym.scaleratio;

           

          sym.infolabel();