-
I posted to delicious.com
Rendering Server Pages using #JQuery and #CFML
http://alan.blog-city.com/cfml_and_jquery.htm
- Tags:
- jquery
- ColdFusion
April 5 2010, 6:31am | Comments »
-
I posted to i-create.org
CodeBreaker a Game of Deduction
http://i-create.org/2010/04/04/codebreaker-a-game-of-deduction/
Let me first start of by simply telling you I have been reading MasterMind board game. I decided to port over this game to JavaScript and have done this you can find the example by clicking book like I have. A little background about the game if it says you have a correct spot and the correct color. If it says you have the correct color you have the correct color but it is in the incorrect spot.
// constants const numPegs = 5; const numColors = 5; const maxTries = 10; const horizOffset = 30; const vertOffset = 60; const pegSpacing = 30; const rowSpacing = 30; // game play variables var solution = new Array(); var solutionButtonArray; var turnNum; // references to display objects var buttonImages = new Array("img/cbBlack.png","img/cbGreen.png","img/cbYellow.png","img/cbPurple.png","img/cbRed.png", "img/cbBlue.png" ); var currentRow = new Array(); var currentText; var currentButton; var mainIds = 0; var myButton; function startGame() { for(var i =0;i<numPegs;i++) { // random, from 0 to 4 var r = Math.floor(Math.random()*numColors) + 1; solution.push(r); } turnNum = 0; createPegRow(); } function createPegRow(start) { solutionButtonArray = new Array(); if(start == undefined){ $('#cbMainGame').html(""); } var cbButton1 = '<div class="divCButton" id="div'; var cbButton2 = '" onclick="clickButton(this)"><img id="img'; var cbButton3 = '" alt="0" src="img/cbBlack.png" /></div>'; var mainWrapper1 = '<div class="mainWrapper">'; var mainWrapper2 = '</div>'; $('#cbMainGame').append(mainWrapper1); var btnFinished = '<div class="imgButton" id="divButtonFinished'; var btnFinished2= '"><center><div class="mainButton" id="divButtonDone'; var btnFinished3= '" onclick="executeGameQuery(this)"><span id="spnMainButton">Done</span></div></center></div>'; currentRow = new Array(); for(i=0;i<numPegs;i++) { $('#cbMainGame').append(cbButton1+mainIds+cbButton2+mainIds+cbButton3); solutionButtonArray.push("img"+mainIds); mainIds++; } $('#cbMainGame').append(btnFinished+mainIds+btnFinished2+mainIds+btnFinished3+mainWrapper2); } function clickButton(clicked){ var myButton = clicked; var img = $(clicked).find('img'); var imageToChange = img[0].alt.toString(); if(imageToChange == 6){ imageToChange = 0;
} //console.log(imageToChange); $("#"+img[0].id).attr("src",buttonImages[parseInt(imageToChange) + 1]); $("#"+img[0].id).attr("alt", parseInt(imageToChange) + 1); } function executeGameQuery(mainButton){ var buttonClicked = mainButton; var changeThis = buttonClicked.id; var currentColorList = new Array(); var colorList = new Array(0,0,0,0,0); var soltionList = new Array(0,0,0,0,0); changeThis = $("#"+changeThis).parent().parent(); //console.log(changeThis); var numberCorrect = 0; var numberColorsCorrect = 0; turnNum++; for(i=0; i<numPegs; i++){ currentColorList.push($("#"+solutionButtonArray[i]).attr("alt")); $("#"+solutionButtonArray[i]).parent().removeAttr("onclick"); } for(i=0; i<numPegs; i++){ if(currentColorList[i] == solution[i] ){ numberCorrect++; }else{ soltionList[solution[i]]++; colorList[parseInt(currentColorList[i])]++; } } for(i=0; i<numColors; i++){ var test = Math.min(soltionList[i],colorList[i]); numberColorsCorrect = numberColorsCorrect + Math.min(soltionList[i],colorList[i]); } $("#"+buttonClicked.id).remove(); if(numberCorrect == numPegs){ $(changeThis).html('You Got It!<br/><div class="imgButton"><center><div onclick="startGame()" id="divButtonDone5" class="mainButton"><span id="spnMainButton">Play Again</span></div></center></div>'); }else if(turnNum == maxTries){ $(changeThis).html('I regret to infrom you just lost next time do it quicker! <br/><div class="imgButton"><center><div onclick="startGame()" id="divButtonDone5" class="mainButton"><span id="spnMainButton">Play Again</span></div></center></div>'); } else{ $(changeThis).html("Correct Spot: "+numberCorrect+", Correct Color: "+numberColorsCorrect); var start = true; createPegRow(start); } } $(document).ready(function() { $('#cbMainGame').append(startGameHTML);
});RayCasters the old style 3d of Games like Wolfenstien and Doom. In short most of the raycasters out their follow this SDL lib an old library that was used to create most video games years ago. I searched to see if someone was doing something similar and sure enough someone is haXe has an SDL wrapper. This might also be useful to study RayFaster2 this is a RayCaster built with haXe that is super fast. Their are numerous examples of RayCasters written in ActionScript but I am looking for speed. I might think about also just writing one from scratch and implementing a JavaScript version of it as well. I could have spent this weekend working on my new portfolio but unfortunately I didn’t do that:( I will have to extend it deadline beyond the 4 days time limit once again:(
April 4 2010, 1:01pm | Comments »
-
I posted to delicious.com
5 Steps Toward #jQuery Mastery
http://encosia.com/2010/03/30/5-steps-toward-jquery-mastery/
- Tags:
- javascript
- jquery
April 1 2010, 9:30pm | Comments »
-
I posted to delicious.com
Six Things Every jQuery Developer Must Know :: Sessions :: Microsoft MIX10
http://live.visitmix.com/MIX10/Sessions/EX22
- Tags:
- video
- javascript
- jquery
April 1 2010, 9:29pm | Comments »
-
I posted to delicious.com
Loading #WordPress posts with Ajax and #jQuery
http://www.emanueleferonato.com/2010/04/01/loading-wordpress-posts-with-ajax-and-jquery/
April 1 2010, 9:23pm | Comments »
-
I posted to delicious.com
Using #jQuery To Pass Arrays To Remote #ColdFusion Components
http://www.bennadel.com/blog/1887-Using-jQuery-To-Pass-Arrays-To-Remote-ColdFusion-Components.htm
- Tags:
- jquery
- ColdFusion
March 30 2010, 4:21pm | Comments »
-
I posted to delicious.com
jQuery Driven Tokenizing Additions
- Tags:
- jquery
March 29 2010, 9:14pm | Comments »
-
I posted to delicious.com
How Much Should #jQuery Event Bindings Handle?
http://www.bennadel.com/blog/1885-How-Much-Should-jQuery-Event-Bindings-Handle-.htm
- Tags:
- jquery
March 29 2010, 4:11pm | Comments »
-
I posted to i-create.org
Next Chapter
http://i-create.org/2010/03/28/next-chapter/
Well the good news is I am officially a Rich Internet Application Developer! So I will mainly be focusing on creating reusable controls with JavaScript and ActionScript for the retail store Hayneedle! I will miss working with all the wonderful developers at infoGroup. I was fortunate enough to start their as a Graphical User Interface Developer and end as a Software Engineer. I have learned a tremendous amount from working at infoGroup and will miss all of them. I will also never forget all the knowledge they shared with me. C# is an awesome language and so is Ruby on Rails! I will continue to use both in the future! While working at infoGroup I worked on numerous projects 2 newer versions of Salesgenie.com and one entirely new product SalesDesk a real-time CRM. I utilized jQuery, CSS, ASP.NET 2.0, ASP.NET 3.5 (MVC), and Ruby on Rails. I will continue to learn and use new languages at my new post at Hayneedle I will be using ColdFusion, JavaScript, and ActionScript. I think it will be fun to have a change of pace and I am really excited to be a part of their development / user experience group! I believe this job will enable me to use my creative side a little more; so I think that will be enjoyable and I think I will learn a tremendous amount by working with the new team they are an extremely innovative group. It is always good to challenge yourself and change things, and have new experiences, I will miss infoGroup. This month I have been extremely busy I am currently working with two clients in the Omaha Metro area and I will be teaming up with MinorWhiteStudios on future projects so I am excited to be working with them. I believe they are the best photographers / designers in town. I hadn’t talked to Scott in years and it was nice of him to call me. His whole team is extremely creative and I belive I will also learn a great deal working with them! I have really been sitting around and reading a great deal at home. I don’t get out much anymore. I find myself playing with new technologies on my off time. I have also been working on a game for a client of mine and hopefully I can have a demo of that soon! Lately I have been playing around with ProcessingJS and here is a new experiment. This example uses a font from DaFont. This example also borrows from this
var jData; var objClik = new Array(); var colorPool = new Array("#075997","#079714","#970744","#079792","#970769","#078497", "#970718", "#075197", "#079733","#079707"); function loadFeed(){ jQuery.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=2432dea4d4d6afa353c425dc5e542fb4&_render=json&_callback=?", function(json) { jData = json; jQuery('#YahooPipe').width(jQuery(window).width()); jQuery('#YahooPipe').height(jQuery(window).height()); loadProcessing(); }); } jQuery(document).ready(function() { try{ if(!jQuery.browser.msie){ loadFeed(); }else{ jQuery('#result').text("Sorry you are using Internet Explorer an inferior browser please utilize a next generation browser like FireFox, Chrome, or Safari!"); } }catch(err){ jQuery('#result').text("Sorry Pipe Failed to Load Please refresh and try again:)"); } }); function loadProcessing(){ var script = document.getElementById( 'linkScript' ).text; var canvas = document.getElementById( 'YahooPipe' ); Processing(canvas, script); } void setup() { strokeWeight(0); noStroke(); size(jQuery(window).width(),jQuery(window).height()); background(255); smooth(); } PFont font = loadFont("Champagne_Limousines.svg"); void draw() { for(i = 0; i < jData.value.items.length; i++){ int pointX = random(0,jQuery(window).width()); int pointY = random(0,jQuery(window).height()); int fSize = random(30,65); objClik.push(new alinked(pointX,pointY,fSize,jData.value.items[i].link, jData.value.items[i].title, colorPool[Math.floor(Math.random() * colorPool.length)],colorPool[Math.floor(Math.random() * colorPool.length)])); } forLinks('render'); exit(); } void forLinks(mode){ for(int i=0;i < objClik.length; i++){ t=objClik[i]; switch(mode){ case 'render':objClik[i].render();break; case 'detect': mouseX > objClik[i].x &&
mouseY > objClik[i].y && mouseY < objClik[i].y+t.size && mouseX < objClik[i].x+t.anchorWidth? objClik[i].rollOver(): objClik[i].rollOut(); break; case 'clicks':objClik[i].mouseOver?objClik[i].clicked():0; } } } void mouseMoved(){forLinks('detect');} void mouseClicked(){forLinks('clicks');} class alinked{ boolean mouseOver; color current_col; float anchorWidth; alinked(float x, float y, float size, String href,String anchor, Color text_col, Color hover_col) { href=href;
anchor=anchor;
this.size=size; this.x=x,this.y=y; text_col=text_col; hover_col=hover_col; current_col=text_col; mouseOver=false;
} void render(){ anchorWidth=font.width(anchor)*size;
clear(x,y,anchorWidth,size+4); textFont(font,size); fill(current_col); mouseOver?rect(x,y+size+2,anchorWidth,1):0; text(anchor,x,y);
} void rollOver(){ if(!mouseOver){
mouseOver=true; cursor('pointer'); current_col=hover_col; render(); } } void rollOut(){ if(mouseOver){ mouseOver=false; cursor('auto'); current_col=text_col; render(); } } void clicked(){ link(href, "_blank"); } }Download Example This experiment simply grabs a yahoo pipe parses the JSON and then adds the links to the Canvas tag. It is really amazing to see all the progress of HTML5 and all the cool new JavaScript libraries. Please note internet explorer users will not be able to view this example because IE does not support the Canvas tag:(. Sometimes I have also noticed it fails to capture the JSON but I have a try catch so it should tell you to try again. I am not going to add a JAVA version of this project simply because I don’t have time too right now. I noticed ProcessingJS is now supporting some of the 3D functions of Processing (JAVA) I haven’t had time to play with them lately but I will make a data mashup with it as soon as I can find the time. I am also still working on my new Portfolio the never ending project maybe within the next two weeks I will actually post it! I am looking forward to CS5 and purchasing Flash Builder 4! I have also noticed that with libraries like Scripty2 it might be a fun to port over some Flash Games (AS2) utilize JavaScript so they can be enjoyed with out a plugin! Corona SDK Scripty2 Ajax RayCaster Example
March 28 2010, 8:54pm | Comments »
-
I posted to delicious.com
Nivo Slider - The Most Awesome #jQuery Image Slider
- Tags:
- jquery
March 25 2010, 4:08am | Comments »
-
I posted to i-create.org
jQuery CenterIT
http://i-create.org/2010/02/07/jquery-centerit/
Have you ever had to deal with the hassle of centering modal windows? I made this function to automagically center windows I call this function after I load a modal and it centers the object perfectly for every browser. It takes the hassle of wondering if something is perfectly center in every browser. The only thing I do to use it is send it the main containing div that the object should be centered in and the div that I want to be centered. It grabs the offset does a little basic math and that’s it. No more hassle with centering now it will be perfectly centered.
function CenterIT(mainModal, mainContainer) { var modalW = $(mainModal).width() / 2; var windowW = $(mainContainer).width() / 2; var modalH = $(mainModal).height() / 2; var windowH = $(mainContainer).height() / 2; var centerPointW = windowW - modalW; var centerPointH = windowH - modalH; var myPoint = $(mainContainer).offset(); centerPointW = myPoint.left + centerPointW; centerPointH = myPoint.top + centerPointH; $(mainModal).css('left', centerPointW); $(mainModal).css('top', centerPointH);
}Some Useful/Interesting Flash Links: Prefab – Highly useful tool when it comes to 3D in flash with Away3D Burst Engine for SVG in JavaScript Parallax in CSS WebGL Example
February 7 2010, 4:37pm | Comments »
-
I posted to delicious.com
FreakZion: JQUERY: Get pics from PANORAMIO
http://www.freakzion.com/2009/12/jquery-get-pics-from-panoramio.html
December 28 2009, 9:19pm | Comments »
-
I posted to delicious.com
40 Ultimate Useful JavaScript Tutorials for Web Professionals | Dzinepress
http://www.dzinepress.com/2009/12/40-ultimate-useful-javascript-tutorials-for-web-professionals/
December 28 2009, 9:18pm | Comments »
-
I posted to delicious.com
Using jQuery to rewrite date/times in your local timezone - InsideRIA
http://www.insideria.com/2009/12/using-jquery-to-rewrite-dateti.html
- Tags:
- javascript
- jquery
December 18 2009, 1:39pm | Comments »
-
I posted to delicious.com
Sharing Event Handlers Across jQuery Event Bindings To A Single Element
http://www.bennadel.com/index.cfm?dax=blog:1788.view
- Tags:
- jquery
December 18 2009, 1:37pm | Comments »
-
I posted to delicious.com
jQuery Flash Plugin
http://jquery.lukelutman.com/plugins/flash/#features
December 12 2009, 9:19am | Comments »
-
I posted to delicious.com
Ajaxian » New jQuery Podcasts
- Tags:
- javascript
- jquery
- podcast
December 11 2009, 11:49am | Comments »
-
I posted to delicious.com
24 ways: Have a Field Day with HTML5 Forms
http://24ways.org/2009/have-a-field-day-with-html5-forms
- Tags:
- design
- javascript
- jquery
- css
- html5
December 10 2009, 6:34am | Comments »
-
I posted to delicious.com
jQuery Google Feed Plugin
http://www.malsup.com/jquery/gfeed/
- Tags:
- rss
- javascript
- jquery
- plugin
December 2 2009, 6:46am | Comments »
-
I posted to delicious.com
jQuery x y document coordinates of DOM object - Stack Overflow
http://stackoverflow.com/questions/1002934/jquery-x-y-document-coordinates-of-dom-object
var x = $("#wrapper2").offset().left; var y = $("#wrapper2").offset().top;
- Tags:
- jquery
December 1 2009, 3:02pm | Comments »
