|
I've already tried that - the image.width property is still 0.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
I'm not particularly familiar with the <canvas> tag, but I can see why your _imageWidth is zero: the load(function(){ ... }) method is adding the function as a handler to the image's load event. It won't get called until the image has loaded, which won't happen immediately.
Try putting the rest of your code in the callback:
function doIt()
{
var _filename = "http://paddedwall.org/2012mustang/images/blacklights_03.jpg";
var _divName = "#canvasesDiv";
var _sceneWidth = $(_divName).width();
var _sceneHeight = $(_divName).height();
$('<img />').attr({'id': 'backgroundImage', 'src' : _filename}).load(function()
{
if (this.complete === true)
{
var _imageWidth = this.width;
if (_imageWidth === 0)
{
_imageWidth = _sceneWidth;
}
var _scale = _sceneWidth / _imageWidth;
var _canvas = $("<canvas>Not html5</canvas>");
_canvas.css('width', _sceneWidth);
_canvas.css('height', _sceneHeight);
_canvas.attr('id', "backgroundCanvas");
_canvas.css('width', _sceneWidth);
_canvas.css('height', _sceneHeight);
_canvas.css('position', 'absolute');
_canvas.css('top', 0);
_canvas.css('left', 0);
_canvas.css('z-index', 0);
_canvas.css("display", "block");
$(_divName).append(_canvas[0]);
var _context = _canvas[0].getContext('2d');
_context.setTransform(1, 0, 0, 1, 0, 0);
_context.scale(_scale, _scale);
_context.drawImage(this, 0, 0);
}
});
}
http://jsfiddle.net/hXqMG/[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
That's exactly what I meant. 
I'm not sure though that load will happen if the node JSOP constructed is not added to the DOM yet.
Cheers!
"I had the right to remain silent, but I didn't have the ability!"
Ron White, Comedian
|
|
|
|
|
It seems to work in the jsFiddle I linked to, at least in Firefox.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Thanks for the information Richard!
I should try that one in other browsers as well.
[Modified]Works in IE 10 as well[/Modified]
Cheers!
"I had the right to remain silent, but I didn't have the ability!"
Ron White, Comedian
|
|
|
|
|
It also appears to work in Chrome 29, Opera 12.15 and IE10.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Just modified my post for IE 10.
Cheers!
"I had the right to remain silent, but I didn't have the ability!"
Ron White, Comedian
|
|
|
|
|
That's all well and good for this sample, but the actual code I took it from is 700 lines spread out among four classes.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
Do you have this on a public website where one could take a look at the whole thing?
Cheers!
"I had the right to remain silent, but I didn't have the ability!"
Ron White, Comedian
|
|
|
|
|
Nope. I don't publish until something is working pretty much the way I want it to. I have a spaghetti-code non-jquery version running just fine, but that's kind of moot since that won't be used by anyone anyway.
FWIW, this little sample is exhibiting the same issues as the big version. I created this sample to simplify everything to try to see what's happening a little easier. Unfortunately, it hasn't helped.
I'm using Chrome to debug, and even though the image appears to load (if you put an alert in the load anonymous function, you can see that it succeeds), nothing shows up on the canvas. I'm willing to concede that I'm doing something wrong, but what it is, I don't know. I've also tried this code in both an aspx page, and a standard html page with the same results.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
If the code you've posted is representative of the code you're using, the problem is quite obvious: when the load method returns, the image hasn't loaded, and so you're trying to draw a blank image. You need to wait until the load event fires before you try to use the image.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I was under the impression that calling load on the image would cause it to load. Beyond that, what about the line that reads if (this.complete === true) in the anonymous function? Won't that do what you're saying?
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
Calling jQuery's load method[^] attaches an event handler to the load event; it doesn't cause the script to block until the image has loaded.
The this.complete === true line in the event handler works because it's called when the image has loaded. The code which follows the call to load(function(){...}) is executing before the image has loaded.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
...and the light goes on.
Is there a way to postpone exiting the anonymous function before loading has completed?
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
Not that I've seen. You'll need to trigger the remainder of the code from the anonymous function which handles the event.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Well, I don't like doing it this way, but I am using what I call a stair-step approach:
function doIt()
{
doStep1();
this.doStep1 = function()
{
do something
do something
$(img).load(function()
{
if (this.complete === true)
{
doStep2(img.naturalWidth)
}
});
}
this.doStep2 = function(width)
{
calc scale
do other suff
$(obj).dosomeOtherAsynchThing(function()
{
doStep3();
});
}
this.doStep3 = function(width)
{
do something
etc...
}
}
Now that the image is actually being displayed, I can now try to finger out why the scale isn't being set as expected in the context.
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass." - Dale Earnhardt, 1997
|
|
|
|
|
Hello, i am using play framework 1.2.3 with eclipse, i want to call a controller method with this java request, but when i click the button nothing happens. anyone have an idea what went wrong?
Best regards.
<script type="text/javascript">
$("#request").click(function(){
var reqphone = $('#reqPhone').val();
var key = $('#accesscode').val();
var fro = $('#from').val();
var too = $('#to').val();
var myPhone = $('#userPhone').val();
var action = #{jsAction @reversetest(':consumer',':accessKey', ':usersPhone', ':reqPhone',':from', ':to') /};
$.ajax({
type:"GET",
url = action({consumer: 'marcus', accessKey: key, usersPhone: myPhone, reqPhone: reqphone, from: fro, to: too}),
success: function (response)
{
$("#XMLArea").val(response);
}
});
})
</script>
<input type="button" id="request" class="button" name="request" style="float: left; top: 50px; left: 310px; position: absolute;"></input>
modified 27-May-13 7:21am.
|
|
|
|
|
I don't know the framework but I am curious how is action returning a usable url??
marcusKam wrote: url = action({consumer:
I would probably start with some breakpoints and step through this. maybe also add an error handler for that ajax call.
best of luck.
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
thanks both for your answers, play framework generates a useable urlwhen the action method is called.
I had to move my from the "<head>" section too the "<body>" section cause my button wasnt able to access the script otherwise for some too me unknown reason, anyway i used the jquery .load method and filled it with "action{data}" and it worked as supposed to.
Thanks for the help
|
|
|
|
|
marcusKam wrote: I had to move my <script> from the "<head>" section too the "<body>" section cause my button wasnt able to access the script
any script that will interface the document you want to put towards the bottom of your page. this is especially true when adding button handlers.
you may have seen it work 'sometimes' but when you add handlers like this in the <head> of your document you open yourself up to errors where the handler never gets called.
marcusKam wrote: play framework generates a useable urlwhen the action method is called.
I hate to say kind of like backbone but I am guessing this is similar in that it's for supporting another MVC framework on the client with a REST backend. pretty cool. 
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Yeah you are right! I'm not very experienced at java yet, i've only worked in visual studio before, and when you put the scripts in ur in vs it works perfectly fine.
of course i meant the JsAction method makes the action variable and useable Url and when u post
action{data: "hello"} it just adds the values to the url.
|
|
|
|
|
Everything inside the Ajax call should be a JSON object. In your second line of it, you have = instead of :
Fix that, and fix the URL of your action and this should work.
|
|
|
|
|
function OnTargetDrop(){
alert(oDragItem.value);
alert(oDragTarget.value);
var temp = oDragTarget.value;saving a value of target div that brings the position of dragged box
if arrived target is <div class="DropTarget" value="2"> brings 2 as value
var tmp_val = oDragItem.value-0;
var $node = $("#order").children().eq(temp);
var org_val = $node.text()-0;
$node.text(org_val+tmp_val);
oDragItem.style.position="";
oDragTarget.appendChild(oDragItem);
if (navigator.platform=="iPad") MakeDragable(oDragItem);
}
<blockquote class="FQ"><div class="FQA">Quote:</div>
<td>
{
<div class="DropTarget" value="1">
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="30">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="10">cb13030940</div>
</div>
<blockquote class="FQ"><div class="FQA">Quote:</div></td></blockquote>
</blockquote>
<blockquote class="FQ"><div class="FQA">Quote:</div><td align="center">
<div class="DropTarget" value="2">
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="10">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#eee8aa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#87cefa;" value="20">cb13030940</div>
<div class="Dragable" seletable="no" style="background-color:#66cdaa;" value="10">cb13030940</div>
</div>
</td></blockquote>
<blockquote class="FQ"><div class="FQA">Quote:</div>
<blockquote class="FQ"><div class="FQA">Quote:</div><%
int sum1, sum2;
%></blockquote>
<tr align="center" id="order">
<td width = "25">Order Quantity</td>
<td><%=sum1%></td>
<td><%=sum2%></td>
<td>sum3</td>
<td>sum4</td>
<td>sum5</td>
<td>sum6</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr></blockquote>}
}// when the value gets 1, the value in the div's sum
becomes sum1. when the value gets 2, the value in the div's sum becomes sum2. when div moves, sum1 or sum2 change depends on specific value,
|
|
|
|
|
What's your question?
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
can I recommend that you use.
http://jsfiddle.net/[^]
and then discuss the problem that you are having and need help with.
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
