jquery - javascript tooltip follows cursor position -


i'm trying make tooltip image appear above cursor when hovering on thumbnail, i'm working developer's code , having trouble figuring out.

i've created simplified version of code on website can found below, or on jsfiddle: http://jsfiddle.net/justinwebpro/kf8lqn5v/5/

or live site issue i'm trying correct here: https://www.mychicnest.com/productdetails.asp?productcode=503

i'm trying use method .mousemove() make follow mouse position rather being static @ top of page i'm doing wrong. ideally factor in offset of cursor position, getting work @ comes first!

html

<div id="swatch">     <div id="panel">           <img src="large.jpg" id="large-image" />     </div>     <div id="thumbs">         <img src="1.jpg" />         <img src="2.jpg" />         <img src="3.jpg" />     </div> </div>

css

#swatch { position: relative; }  #panel {         position: absolute;         top: -115px;         left: 115px; }

javascript

function swthumbeffect(){     $('#panel').css('visibility','hidden');      $('#thumbs img').mouseover(function(){         $('#largeimage').attr('src',$(this).attr('src'));         $('#panel').css('visibility','visible');     });     $('#thumbs img').mouseout(function(){         $('#panel').css('visibility','hidden');     }); }   // came swatch follow cursor isn't working hoped. ideally factor in offset of cursor, getting work comes first. $('#thumbs img').mousemove(function( event ) {     var mousepositionx = event.pagex;     var mousepositiony = event.pagey;     log(mousepositionx);     log(mousepositiony);     $('#panel').css('left', mousepositionx);     $('#panel').css('right', mousepositiony); });

thanks in advance!

you have couple of problems current function, should work minor modifications. first problem: you're setting right css property clienty. should top:

     $('#panel').css('top', mousepositiony);

then need consider position of #panel parent position correctly. can way:

     //you should avoid showing panel right under mouse, because it'll mess      //with mouseout event since #thumb hidden.      //you can add 20 pixels position example.        var mousepositionx = event.pagex-$('#panel').parent().offset().left+20;      var mousepositiony = event.pagey-$('#panel').parent().offset().top+20;

and maybe should try put mousemove call in swthumbeffect function other mouseevents call.

and should work properly.


Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more