|
ASPnoob wrote: Can't the button be a regular HTML button that uses a javascript function to send the values...
Yes.
Again more directed towards the ASP.Net forum. The following article should help you get you started in the right direction towards what you are looking to do.
Calling Server Side Code from Client Side using Ajax[^]
Best of luck. 
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Here's the code I ended up with (explanation follows code).
HTML (you may have to adjust for the versions of jquery and modernizr you're using):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="../Scripts/jquery-2.0.0.js"></script>
<script type="text/javascript" src="TreeOfHope/jscripttest.js" ></script>
</head>
<body>
<div id="canvasesDiv" style="position:relative; width:490px; height:356px; border:1px solid black; background-color:silver;"></div>
<div id="testImage" style="width:490px; height:356px; border:1px solid black; background-color:silver;">
<img src="http://paddedwall.org/2012mustang/images/blacklights_03.jpg" width="490px" height="356px;" alt="" />
</div>
<script type="text/javascript" >
$(document).ready(function()
{
doIt();
});
</script>
</body>
</html>
Javascript (jscripttest.js):
function doIt()
{
var _filename = "http://paddedwall.org/2012mustang/images/blacklights_03.jpg";
var _divName = "#canvasesDiv";
var _sceneWidth = $(_divName).width();
var _sceneHeight = $(_divName).height();
var _scaleX = 1.0;
var _scaleY = 1.0;
var _canvas = null;
var _context = null;
var _image = $('<img />')
.attr(
{
'id' : 'backgroundImage',
'src' : _filename
})
.css(
{
'-ms-interpolation-mode' : 'bicubic',
'image-rendering' : 'optimizeQuality'
})[0];
$(_image).load(function()
{
if (this.complete === true)
{
Continue($(this)[0].naturalWidth, $(this)[0].naturalHeight)
}
});
this.Continue = function(imgWidth, imgHeight)
{
_scaleX = _sceneWidth / imgWidth;
_scaleY = _sceneHeight / imgHeight;
_canvas = $("<canvas>Not html5-compatible</canvas>")
.css(
{
'position': 'absolute'
,'top' : 0
,'left' : 0
,'z-index' : 0
,'display' : 'inline'
})
.attr(
{
'id' : 'backgroundCanvas'
,'width' : _sceneWidth+"px"
,'height' : _sceneHeight+"px"
});
$(_divName).append($(_canvas)[0]);
_context = $(_canvas)[0].getContext('2d');
_context.setTransform(_scaleX, 0, 0, _scaleY, 0, 0);
_context.drawImage(_image, 0, 0);
}
}
The first problem was determining the actual "natural" size of the image. I had to put a call to subsequent code inside the call to image.load.
The second problem involved scaling the image to fit the desired size. Originally, I was using the jquery object's css() method to set the size of the canvas. When you do it that way, the canvas does not properly transform/scale. You MUST set the width and height as attributes in order to get scaling to work correctly.
Maybe this will help someone else in the future.
".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
|
|
|
|
|
very cool... you should write an article on this.
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Hello all,
How to invoke Code behind method and java script function
on check box change event
|
|
|
|
|
sujeet321 wrote: How to invoke Code behind method and java script function on check box change event
I am not sure what you meant by code behind... I am guessing ASP.NET in which case I would recommend you post this question in that forum.
I wrote this[^] quick sample on jsFiddle which does a simple jQuery setup to handle when a checkbox is selected.
http://jsfiddle.net/xehmr/[^]
as if the facebook, twitter and message boards weren't enough - blogged
|
|
|
|
|
Hi, i have a problem.
i want to send a callback function with params.
and every time to send different params.
the problem is that the callback function recive all the time
the same values of the last iteration of the loop-
how can i solve this problem?
thnks!
function B(a,b)
{
alert(a + b);
}
function A()
{
for(var i = 0;i < Z ; i++)
{
for(var j = 0;j < Z ; j++)
{
var temp = function() {return function(){B(i,j)}};;
func(temp);
}
}
}
|
|
|
|
|
So where is func defined? where is Z defined?
What is your code supposed to do exactly?
here's some code. 
function add(a,b)
{
alert(a + b);
}
function mult(a,b)
{
alert(a * b);
}
var o = { func : function(f, x,y) { return f(x,y); }};
function A(Z)
{
for(var i = 0;i < Z ; i++)
{
for(var j = 0;j < Z ; j++)
{
o.func(add, i,j);
}
}
}.
|
|
|
|
|
I would think you could debug and step through and see what is happening.
There are only 10 types of people in the world, those who understand binary and those who don't.
|
|
|
|
|
When I define Z and func, the code runs, but B is never called. You have to provide a complete example.
".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
|
|
|
|
|
hi to all
i written some code for toggle between textbox and textare
but when my textbox convert to multi line(textarea) it cant be convert to input text again how can i do this
my html:
<form id="form1" runat="server">
<asp:TextBox ID="txt" runat="server" Text="11111111111111111111111111111"></asp:TextBox>
<table class="auto-style1">
<tr>
<td>
<asp:TextBox ID="txt0" runat="server" Text="222222222222222222222222"></asp:TextBox>
</td>
</tr>
<tr>
<td><asp:TextBox ID="TextBox1" runat="server" Text="333333333333333333333333333"></asp:TextBox></td>
</tr>
<tr>
<td><asp:TextBox ID="TextBox2" runat="server" Text="44444444444444444444444444444444444"></asp:TextBox></td>
</tr>
<tr>
<td><asp:TextBox ID="TextBox3" runat="server" Text="5555555555555555555555555555555555555555"></asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td><asp:TextBox ID="TextBox4" runat="server" Text="66666666666666666666666666666666666666666666"></asp:TextBox></td>
</tr>
</table>
</form>
$(function () {
$(':input').click(function () {
var newTextArea = document.createElement('TextArea');
this.parentElement.appendChild(newTextArea);
debugger
newTextArea.name = $(this)[0].id;
newTextArea.value = $(this)[0].defaultValue;
newTextArea.onclick = function () {
var newtext = document.createElement('input');
newtext.value = this.innerText;
newtext.name = this.name;
this.parentElement.appendChild(newtext);
$(this).remove();
}
$(this).remove();
})
});
thanks in advance
|
|
|
|
|
I'm still having problems:
0) The code will not get the width of the _image.
1) This in turn causes _scale to be "Infinity" (because _imageWidth is 0 when I try to do the division to determine _scale's value
2) Finally, the _context isn't drawing the _image.
If you want to try the code, I'm using jQuery 2.0 (prior versions back to 1.83 should work fine). Other than that, it's completely self-contained.
<body>
<div id="canvasesDiv" style="position:relative; width:416px; height:512px; border:1px solid black; background-color:silver;"></div>
</body>
function doIt()
{
var _filename = "http://paddedwall.org/2012mustang/images/blacklights_03.jpg";
var _divName = "#canvasesDiv";
var _sceneWidth = $(_divName).width();
var _sceneHeight = $(_divName).height();
var _imageWidth = 0;
var _image = $('<img />').attr({'id': 'backgroundImage', 'src' : _filename})[0];
$(_image).load(function()
{
if (this.complete === true)
{
_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($(_image)[0], 0, 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 sure you are aware that the function you fed to the images load method will be executed when the image loads. This happens asynchronically. The rest of the doIt method may well be executed before the image had a chance to load. Try moving everything after var _scale = _sceneWidth ... into the anonymous method in the image's load method call.
Cheers!
"I had the right to remain silent, but I didn't have the ability!"
Ron White, Comedian
|
|
|
|
|
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
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
