Recently, a friend was asked this question in an interview:
How would you clone an object in pure JavaScript?
Most people’s knee-jerk reply to this would be something along the lines of using jQuery.__extend(), but since this question asks specifically to use pure JavaScript, we’re going to have to get creative.
I’ve finally done it – I’ve created my first HTML5 game! =D
I’m doing a Web Development course this semester, and our first assignment is to build a space invaders HTML5 game. I had never built a game in HTML5 before, so I thought I’d dig up some tutorials to get my feet wet… and here’s what’s come out of it! Continue reading “My first HTML5 game!”→
One of the things that I find myself going back to lately is centring a div or any DOM object on a page, and having it appear centred no matter what size of screen the user views it on. In short, how to make it responsive.
And it might come as a surprise to many people, but the solution for this is actually quite simple. Use this simple CSS trick and your div will be centred on the page, whether you’re viewing it on a laptop or mobile device. Continue reading “(tutorial) How to center a div on a page”→
Anyone who knows me knows that I love cats. So, when I was thinking about what to do over the winter break to learn how to use an API, Reddit + cats seemed to be a winning combination. So, here’s….. Reddit Cats!
Reddit Cats is an aggregator that collates photos posted to the front page of /r/cats subreddit and presents them on a single page, for your viewing convenience (and creating a massive overload of cuteness). Continue reading “Introducing “Reddit Cats””→
(Remember, the above code goes in your header!). You will have to modify the jqGrid file URLs based on where you saved your html file vs. the jqGrid files.
Then, the html:
<table id="grid"></table>
<div id="pager"></div>
And that’s all you need! IMPORTANT: make sure your “#grid” is a table and not a div. jqGrid will not work if you feed it a div id instead of a table id. The pager can (should) be a div. Now, the last (and most important) step is the script:
var mydata = [
{ id : "one", "name" : "row one" },
{ id : "two", "name" : "row two" },
{ id : "three", "name" : "row three" }
];
$("#grid").jqGrid({ //set your grid id
data: mydata, //insert data from the data object we created above
datatype: 'local',
width: 500, //specify width; optional
colNames:['Id','Name'], //define column names
colModel:[
{name:'id', index:'id', key: true, width:50},
{name:'name', index:'name', width:100}
], //define column models
pager: '#pager', //set your pager div id
sortname: 'id', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” optional
sortorder: "asc", //sort order; optional
caption:"jqGrid Example" //title of grid
});
I’ve been trying to learn jqGrid lately, which is a plugin for jQuery. I came across a “drag and drop” table function in jqGrid, which I thought was really cool. While trying to play around with the “DnD” tables, I found out that it’s based on jQuery’s “draggable” and “droppable” properties. A Google search lead me to this tutorial: (link)
I think it’s a great tutorial to help you get started with DnD in jQuery, and it’s easy enough for a novice like me to follow!
I’ve noticed a severe lack of jqGrid tutorials (especially using json local data and DnD tables), so I’ll be putting up a tutorial of my own shortly.
Life and Code 