Category Archives: jQuery & javascript

Working with KineticJS and PreloadJS – preload images and display them on canvas

Posted on by
Reply

KineticJS is a great framework to manipulate canvas but when it comes to preload images for a project there’s no elegant way of doing this but creating your own code or using other libraries (most of them are either incomplete or are not maintained). The one I’ve using for some time is PreloadJS and since I am used to it I wanted to include it in my project to make things easier for me.

index.html

<!DOCTYPE HTML>
<html>
<head>
<style>
#container{
background-color: #222222;
width: 40px;
height: 40px;
}
</style>
<script src="kinetic-v5.0.1.min.js"></script>
</span><script src="preloadjs-0.4.1.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="app.js"></script>
</body>
</html>

app.js file

var layer, stage, assets, manifest, handleAssetsLoad;

//fire this function when preload is finished
handleAssetsLoad = function ( evt ) {

// get the image object from the assets
var imgObj = assets.getResult("image");

// create KineticJS Image
var test = new Kinetic.Image({
x: 0,
y: 0,
width: 40,
height: 40,
image: imgObj,
});

// add the shape to the layer
layer.add(test);

// add the layer to stage
stage.add(layer);
}

// create the kineticjs stage
stage = new Kinetic.Stage({
container: "dungeoneer",
width: 40,
height: 40
});

layer = new Kinetic.Layer();

// which files to load
manifest = [
{id: "image", src: "image.jpg"}
];

//initialize PreloadJS
assets = new createjs.LoadQueue(true, "images/");
assets.on("complete", handleAssetsLoad);
assets.loadManifest(manifest);

jQuery HTML select element with editable input field

Posted on by
Reply

A few days ago I had a small task which invloved building a simple non-scientific calculator, some fields with changeable values. The thing was it had some select tags that the user could edit the value. I’m sure there are plugins out there to do this job but I didnt wanted extra unnecessary code , just something something quick and simple. Here is how I did it, maybe it will help you.

html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>tutorial</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <script src="jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <select>
           <option selected="selected" value="100">100</option>
           <option value="200">200</option>
           <option value="300">300</option>
           <option value="400">400</option>
        </select>
        <input type="text" name="" value="">
        <p>value:</p>
        <script src="jquery.calculator.js"></script>
    </body>
</html>

style.css

select{position:absolute; width:160px; height:23px; left:0; top:0; border:0;}
input{position: absolute; width: 140px;height:17px; left:0; top:0;}
p{position: relative; margin-top:50px;}

jquery.calculator.js

var $input = $('input');
var $select = $('select');

$select.change(function(){
 modify();
})

function modify(){
 $input.val($select.val());
 output();
}

function output(){
 $('p').text('value: ' + $input.val());
}

$input.on('click', function(){
 $(this).select()
}).on('blur', function(){
 output();
})

modify();

This is what you should get: jsfiddle

Try selecting a number from the list or click on the text box to add your own number.
Ofcourse this could be done more elegant but I wanted to show an idea of how could be done.

jQuery doesn’t work in Internet Explorer ?

Posted on by
Reply

Well, I am playing a little with the jQuery library and all my test were done in Chrome and Mozzila Firefox. My surprise came when I’ve tested my application in IE 8 where was nothing being displayed.

Apparently IE executes $(document).ready() in a different way than Firefox and Chrome so moving your javascript  at the bottom of the page will solve this problem.