Fmdpa Posted November 17, 2010 Share Posted November 17, 2010 I just wrote this code: $(function() { var left = parseFloat($('#sample').css('left'), 10); var top = parseFloat($('#sample').css('top'), 10); $('#sample').hover(function(e) { $('<div id="color"></div>') .css({'top' : e.pageY - 125, 'left' : e.pageX + 10, 'background-color' : getColor(e.pageX - left, e.pageY - top, $('#sample').attr('src'))}) .appendTo('body'); }, function() { $('#color').remove(); }); $('#sample').click(function(e) { $('#color').css({'background-color' : getColor(e.pageX - left, e.pageY - top, $('#sample').attr('src'))}); }); $('#sample').mousemove(function(e) { $('#color').css({'top' : e.pageY - 125, 'left' : e.pageX + 10}); }); });//functions function getColor(x,y,img) { $.post ( '/eyedropper2.php', { 'image' : img, 'x' : x, 'y' : y }, function(color) { value = color; }); return value; } $(function() { if (document.getElementById('sample')) { document.title = 'Color Picker Experiment'; $('.loading').html('Hover over the image, and click to choose a color.'); setTimeout("load()", 2500); } }); function load() { $('.loading').fadeOut(400, function() { $('.body_cont').fadeIn(700); }); } My problem is (I think) quite simple. Firstly, the first hover event is not triggered until you hover two times. The click event also is one step behind. It consistently executes what it should have done the previous event (double-clicking does it properly). What's wrong? Link to comment Share on other sites More sharing options...
Fmdpa Posted November 17, 2010 Author Share Posted November 17, 2010 If I change the "click" event to "dblclick", then it is still one step behind. I know this is the cause of the problem, but where's it coming from? Link to comment Share on other sites More sharing options...
ApocalypeX Posted November 17, 2010 Share Posted November 17, 2010 Could you upload the page its on so I can play around with it? I think I know what's up but it's hard to explain in words, a solution would be more clearer. Link to comment Share on other sites More sharing options...
justsomeguy Posted November 17, 2010 Share Posted November 17, 2010 It sounds like the first event only causes the event handlers to be added, and the second event executes the handler, so you might want to look into how the handlers are getting assigned. It's not clear to me how that function is running to assign the handlers. Link to comment Share on other sites More sharing options...
Fmdpa Posted November 17, 2010 Author Share Posted November 17, 2010 Here's the code. Save the long one as "eyedropper.php", and the short one as "eyedropper2.php". Also change the image tag to something on your computer. Don't resize the image with CSS (it will mess up the coordinates). <html> <head> <title>Loading...</title> <style> body { background:#000; color:#fff; } #sample { padding:0px; margin:0px; position:absolute; left:320px; top:80px; box-shadow:0 0 250px #2a2a2a; -moz-box-shadow:0 0 250px #2a2a2a; -webkit-box-shadow:0 0 250px #2a2a2a; cursor:crosshair; } .loading { z-index:100; color:white; width:100%; height:100%; font-family:Gill, Helvetica, sans-serif; position:relative; text-align:center; padding-top:30%; background-color:black; } #color { width:100px; height:100px; border:1px solid #555; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; position:absolute; padding:5px; text-shadow:1px 1px 3px #111; -moz-text-shadow:1px 1px 3px #111; -webkit-text-shadow:1px 1px 3px #111; } </style> </head> <body> <img src="uploads/your-image.jpg" alt="image" id="sample" /> <!--CHANGE THIS SRC attr--> <p class="loading">Loading...</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!--jQuery file--> <script> $(function() { var left = parseFloat($('#sample').css('left'), 10); var top = parseFloat($('#sample').css('top'), 10); $('#sample').hover(function(e) { color = getColor(e.pageX - left, e.pageY - top, $('#sample').attr('src')); $('<div id="color"></div>') .css({'top' : e.pageY - 125, 'left' : e.pageX + 10, 'background-color' : 'rgba(' + color + ', 0.8)'}) .appendTo('body'); $('#color').html(color); }, function() { $('#color').remove(); }); $('#sample').mousedown(function(e) { color = getColor(e.pageX - left, e.pageY - top, $('#sample').attr('src')); $('#color').css({'background-color' : 'rgba(' + color + ', 0.8)'}); $('#color').html(color); }); $('#sample').mousemove(function(e) { $('#color').css({'top' : e.pageY - 125, 'left' : e.pageX + 10}); }); }); function getColor(x,y,img) { $.post ( '/eyedropper2.php', { 'image' : img, 'x' : x, 'y' : y }, function(color) { value = color; }); return value; } $(function() { if (document.getElementById('sample')) { document.title = 'Color Picker Experiment'; $('.loading').html('Double-click the image to choose a color.'); setTimeout("load()", 2500); } }); function load() { $('.loading').fadeOut(300); } </script> </body></html> And eyedropper2.php: <?php$image = $_POST['image'];$x = $_POST['x'];$y = $_POST['y'];$im = imagecreatefromjpeg($image);$rgb = imagecolorat($im, $x, $y);$r = ($rgb >> 16) & 0xFF;$g = ($rgb >> 8) & 0xFF;$b = $rgb & 0xFF;echo "$r, $g, $b"; Link to comment Share on other sites More sharing options...
justsomeguy Posted November 17, 2010 Share Posted November 17, 2010 Why do you wrap the code inside $(function() {}) instead of just running it normally? Link to comment Share on other sites More sharing options...
Fmdpa Posted November 17, 2010 Author Share Posted November 17, 2010 I wanted to make the "left" and "top" variables accessible throughout the the entire function to save some typing. I redid it to eliminate the $(function() { });, but it still did not change anything. The problem is still there: $('#sample').hover(function(e) { var left = parseFloat($('#sample').css('left'), 10); var top = parseFloat($('#sample').css('top'), 10); color = getColor(e.pageX - left, e.pageY - top, $('#sample').attr('src')); $('<div id="color"></div>') .css({'top' : e.pageY - 125, 'left' : e.pageX + 10, 'background-color' : 'rgba(' + color + ', 0.8)'}) .appendTo('body'); $('#color').html(color); }, function() { $('#color').remove(); }); $('#sample').click(function(e) { var left = parseFloat($('#sample').css('left'), 10); var top = parseFloat($('#sample').css('top'), 10); color = getColor(e.pageX - left, e.pageY - top, $('#sample').attr('src')); $('#color').css({'background-color' : 'rgba(' + color + ', 0.8)'}); $('#color').html(color); }); $('#sample').mousemove(function(e) { $('#color').css({'top' : e.pageY - 125, 'left' : e.pageX + 10}); }); }); Link to comment Share on other sites More sharing options...
justsomeguy Posted November 17, 2010 Share Posted November 17, 2010 I wanted to make the "left" and "top" variables accessible throughout the the entire function to save some typing.You can still define them outside of the functions and use them inside the functions. Is that what wrapping the code in that does, is it just for the sake of scope? I was seriously just asking that as a question, I don't do a lot with jQuery, I wasn't necessarily suggesting that you remove it. Link to comment Share on other sites More sharing options...
Fmdpa Posted November 17, 2010 Author Share Posted November 17, 2010 Yes, I did it just for the sake of scope. I'm still puzzled what is causing this problem, though. The XHRs are all working correctly (as I saw in Firebug), so I don't see why it would fall behind like this. Did you try the application? Link to comment Share on other sites More sharing options...
justsomeguy Posted November 17, 2010 Share Posted November 17, 2010 No, I haven't tried to run it. It looks like the post request you're sending is asynchronous, so the code isn't going to wait for that request to come back to go on. It just sends the request, and continues executing the next statement. So the getColor function will execute the return statement before the response from the server has come back. Look for a way in jQuery to specify a synchronous ajax request instead of asynchronous. Link to comment Share on other sites More sharing options...
Fmdpa Posted November 18, 2010 Author Share Posted November 18, 2010 That was the key! I just created the AJAX request with asyc set to false (What's it called now, SJAX??? Not that the last letter is very accurate either...). It worked perfectly. To prevent repeating myself, I put the variables at the top without being enclosed in the function tags. It failed. I enclosed it in the function tags again, and it worked. Anyway, I don't want the function running unless the page is loaded, so I'll keep it enclosed. Thanks for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.