Click here to Skip to main content
15,898,134 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: ActiveX Object in javascript can not create after host it Pin
Dennis E White8-Jun-13 19:53
professionalDennis E White8-Jun-13 19:53 
GeneralRe: ActiveX Object in javascript can not create after host it Pin
kuntala kumari mahanta9-Jun-13 19:40
kuntala kumari mahanta9-Jun-13 19:40 
GeneralRe: ActiveX Object in javascript can not create after host it Pin
dusty_dex9-Jun-13 22:13
dusty_dex9-Jun-13 22:13 
QuestionPassing Element ID to ASP.net Pin
ASPnoob7-Jun-13 16:31
ASPnoob7-Jun-13 16:31 
AnswerRe: Passing Element ID to ASP.net Pin
Dennis E White8-Jun-13 19:52
professionalDennis E White8-Jun-13 19:52 
GeneralRe: Passing Element ID to ASP.net Pin
ASPnoob9-Jun-13 1:55
ASPnoob9-Jun-13 1:55 
GeneralRe: Passing Element ID to ASP.net Pin
Dennis E White9-Jun-13 18:45
professionalDennis E White9-Jun-13 18:45 
QuestionAs Simple As I Can Make It - SOLUTION Pin
#realJSOP7-Jun-13 7:02
professional#realJSOP7-Jun-13 7:02 
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):
XML
<!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>

    <!-- what the image is supposed to look like -->
    <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):
JavaScript
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;

    // create the image
    var _image = $('<img />')
    .attr(
    {
        'id'  : 'backgroundImage', 
        'src' : _filename
    })
    .css(
    {
        '-ms-interpolation-mode' : 'bicubic',
        'image-rendering'        : 'optimizeQuality'
    })[0];

    // load  it so we can get the scale
    $(_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'
            // you have to set width/height as attributes instead of using css or the canvas 
            // won't scale correctly
            ,'width'  : _sceneWidth+"px"
            ,'height' : _sceneHeight+"px"
        });

        $(_divName).append($(_canvas)[0]);

        _context = $(_canvas)[0].getContext('2d');

        // we should only have to set the transform one time
        _context.setTransform(_scaleX, 0, 0, _scaleY, 0, 0);

        // and then we can draw all of our images at the desired location
        _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


AnswerRe: As Simple As I Can Make It - SOLUTION Pin
Dennis E White8-Jun-13 19:42
professionalDennis E White8-Jun-13 19:42 
QuestionCheckbox checked Java script and c# Pin
sujeet3215-Jun-13 22:43
sujeet3215-Jun-13 22:43 
AnswerRe: Checkbox checked Java script and c# Pin
Dennis E White6-Jun-13 12:01
professionalDennis E White6-Jun-13 12:01 
Questionproblem with anonymus func with parameters Pin
imbaro2-Jun-13 21:27
imbaro2-Jun-13 21:27 
AnswerRe: problem with anonymus func with parameters Pin
dusty_dex3-Jun-13 5:42
dusty_dex3-Jun-13 5:42 
QuestionRe: problem with anonymus func with parameters Pin
ZurdoDev3-Jun-13 7:29
professionalZurdoDev3-Jun-13 7:29 
AnswerRe: problem with anonymus func with parameters Pin
#realJSOP6-Jun-13 4:35
professional#realJSOP6-Jun-13 4:35 
Questionhow to toggle between textbox and textarea by jquery Pin
mhd.sbt30-May-13 8:21
mhd.sbt30-May-13 8:21 
QuestionAs simple as I can make it Pin
#realJSOP30-May-13 8:03
professional#realJSOP30-May-13 8:03 
AnswerRe: As simple as I can make it Pin
Manfred Rudolf Bihy30-May-13 8:24
professionalManfred Rudolf Bihy30-May-13 8:24 
GeneralRe: As simple as I can make it Pin
#realJSOP30-May-13 11:53
professional#realJSOP30-May-13 11:53 
AnswerRe: As simple as I can make it Pin
Richard Deeming30-May-13 8:34
mveRichard Deeming30-May-13 8:34 
GeneralRe: As simple as I can make it Pin
Manfred Rudolf Bihy30-May-13 8:42
professionalManfred Rudolf Bihy30-May-13 8:42 
GeneralRe: As simple as I can make it Pin
Richard Deeming30-May-13 8:46
mveRichard Deeming30-May-13 8:46 
GeneralRe: As simple as I can make it Pin
Manfred Rudolf Bihy30-May-13 8:49
professionalManfred Rudolf Bihy30-May-13 8:49 
GeneralRe: As simple as I can make it Pin
Richard Deeming30-May-13 8:51
mveRichard Deeming30-May-13 8:51 
GeneralRe: As simple as I can make it Pin
Manfred Rudolf Bihy30-May-13 8:53
professionalManfred Rudolf Bihy30-May-13 8:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.