blog.mattiasnorell.com » dynamic http://blog.mattiasnorell.com Otukt i otakt Tue, 07 Feb 2012 22:58:13 +0000 en hourly 1 http://wordpress.org/?v=3.3 Dynamic inputfields using jQuery http://blog.mattiasnorell.com/2010/11/24/dynamic-inputfields-using-jquery/ http://blog.mattiasnorell.com/2010/11/24/dynamic-inputfields-using-jquery/#comments Wed, 24 Nov 2010 15:36:51 +0000 Mattias http://blog.mattiasnorell.com/?p=1784 Läs mer →]]> When I began to write this function I thought to myself ”this is easy, shouldn´t take more than half an hour or so”. It took way more. Everything worked accept that I couldn’t remove the elements I created at runtime. I could however remove the hardcoded stuff so for a while I hated jQuery. The thing I forgot was to use the .live()-method since the code is inside the $(document).ready-function and that function is only executed once, when the DOM is ready. So with a little help from my friends I got this little thing working.

Might help someone loose a little less hair then I did.

Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery - Add remove inputfields</title>

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {
 $("#newLink").click(function() {
 var newDiv = $(document.createElement('div'));

 var newInput = $(document.createElement('input'));
 newInput.attr("type","text");

 var newButton = $(document.createElement('a'));
 newButton.attr("href","#");
 newButton.text("X");

 newInput.appendTo(newDiv);
 newButton.appendTo(newDiv);
 newDiv.appendTo('#inputHolder');

 return false;
 });

 $('#inputHolder input').live('blur',function() {
 parseLinks();
 });

 $('#inputHolder a').live('click',function() {
 $(this).parent().fadeOut('fast', function() {
 $(this).remove();
 parseLinks();
 });
 });
 });

 // Parse all inputfields into one hidden masterfield
 function parseLinks(){
 var partString = "";
 $.each($('#inputHolder input'),function(){
 partString += $(this).attr('value') + ";";
 });
 $("#output").attr('value',partString);
 }
 </script>
 </head>

 <body>

 <h3>Output</h3>
 <input type="text" id="output" size="30">

 <h3>Input</h3>
 <div id="inputHolder">
 <div>
 <input type="text"><a href="#">X</a>
 </div>
 </div>

 <p><a href="#" id="newLink">Add input</a></p>

</body>
</html>
]]> http://blog.mattiasnorell.com/2010/11/24/dynamic-inputfields-using-jquery/feed/ 0 Dynamic mask using ActionScript http://blog.mattiasnorell.com/2010/01/15/dynamic-mask-using-actionscript/ http://blog.mattiasnorell.com/2010/01/15/dynamic-mask-using-actionscript/#comments Thu, 14 Jan 2010 23:18:29 +0000 Mattias http://blog.mattiasnorell.com/?p=399 Läs mer →]]> I was asked if is possible to use my inverted mask-class with a dynamic mask. The answer right now is ”not yet”. But it got me thinking and if you ask me again in a few days the answer might be ”of course, it always has”. So I Googled some stuff about dynamic masks and found that almost none suited what I wanted. I wanted the user to be able to double click somewhere inside the swf, add as many anchorpoints they want, be able to move them around and if they so choose, delete them.

Not as much Frankencode as I was affraid it would be but someone might find it useful so I thought I´d share it. The code is commented if you are new to AS3 and want to know what is going on.

And here is a demo of the little thing. Doubleclick inside the swf to add anchorpoints and doubleclick the handles to remove them.

package{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class Main extends Sprite{

//Setup a some stuff
public var maskBG:Sprite = new Sprite();
public var cord:Array = [];

public function Main():void{

// The image that will appear thru the mask
var lemmyImage:Sprite = new Sprite();
lemmyImage.addChild(new Lemmy());
addChild(lemmyImage);

// An invisible sprite that tracks where the user click
var clickMe:Sprite = new Sprite();
clickMe.graphics.beginFill(0xFF0000,0);
clickMe.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
clickMe.graphics.endFill();
addChild(clickMe);

// Some eventhandlers to see where the user click and to update the mask
clickMe.doubleClickEnabled = true;
clickMe.addEventListener(MouseEvent.DOUBLE_CLICK,addCord);
stage.addEventListener(Event.ENTER_FRAME,updateMask);

addChild(maskBG);

// Set the mask layer to cover the image
lemmyImage.mask = maskBG;

}

private function moveStart(e:MouseEvent):void{
e.currentTarget.startDrag();
e.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, moveUpdate);
}

private function moveStop(e:MouseEvent):void{
e.currentTarget.stopDrag();
e.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, moveUpdate);
}

private function moveUpdate(e:MouseEvent):void{
// Get the location in the array for the handler
var id:int = getHandleId(e.currentTarget.name);

// Update the array with the new values
cord[id] = {id:e.currentTarget.name,x:e.currentTarget.parent.mouseX,y:e.currentTarget.parent.mouseY};
}

private function removeHandle(e:MouseEvent):void{
// Get the location in the array for the handler
var id:int = getHandleId(e.currentTarget.name);

// Remove the part of the array by splicing it.
// Save the splica in a temporaryarray so that it is possible
// to merge the stuff after out deletedpart with the array again.
var a:Array = cord.splice(id,cord.length);
for(var i:int = 1;i<a.length;++i){
cord.push(a[i]);
}

e.currentTarget.parent.removeChild(e.currentTarget);
}

private function updateMask(e:Event):void{
// Clear the masklayer
maskBG.graphics.clear();
maskBG.graphics.lineStyle(2,0xffffff);
maskBG.graphics.beginFill(0xFF0000,1);

// If the value of i is 0 then we want to move to the locatino.
// If we use lineTo it will draw a line from the top left corner.
for(var i:int=0;i<cord.length;++i){
if(i==0){
maskBG.graphics.moveTo(cord[i].x,cord[i].y);
}else{
maskBG.graphics.lineTo(cord[i].x,cord[i].y);
}
}

maskBG.graphics.endFill();
}

private function getHandleId(val:String):int{
// Hack to find the location of the coordinate in the array
for(var i:int=0;i<cord.length;++i){
if(cord[i].id == val){
var id:int = i;
}
}

return id;
}

private function addCord(e:MouseEvent):void{

//Add handle
var handle:Sprite = new Sprite();
handle.graphics.beginFill(0xff0000,1);
handle.graphics.drawRect(0,0,10,10);
handle.graphics.endFill();
handle.x = e.currentTarget.mouseX-5;
handle.y = e.currentTarget.mouseY-5;

// I use the datemethod just cause it easy to get a uniquevalue.
// It's not close to perfect so you should rewrite this part.
// It was late when I did this, sorry  I guess =)
var now:Date = new Date();
handle.name = String(now.getUTCMinutes()+now.getMilliseconds()*Math.random());

// Set up the listeners for the handler
handle.doubleClickEnabled = true;
handle.addEventListener(MouseEvent.MOUSE_DOWN, moveStart);
handle.addEventListener(MouseEvent.MOUSE_DOWN, updateMask);
handle.addEventListener(MouseEvent.MOUSE_UP, moveStop);
handle.addEventListener(MouseEvent.DOUBLE_CLICK, removeHandle);
handle.addEventListener(Event.ADDED_TO_STAGE,updateMask);
addChild(handle);

// Push the coordinate into the array
cord.push({id:handle.name,x:e.currentTarget.mouseX,y:e.currentTarget.mouseY});
}
}
}
]]> http://blog.mattiasnorell.com/2010/01/15/dynamic-mask-using-actionscript/feed/ 2