(tutorial) How to center a div on a page

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.

(tutorial) jqGrid cell edit example

Since I seem to be getting regular visitors to my first jqGrid tutorial, I thought I’d make more.

In this tutorial, we’ll see how to make a table editable using the “celledit” property of the grid.

How to find the length of an array in C

I think this is one of the most common questions that I see when I look through stackoverflow’s C section (and one that I myself struggled with after I first started learning C). C is not like Java. There are no dedicated functions to calculate the length of an array. You can’t even declare an array without first specifying the length (so C can allocate the appropriate amount of memory on the stack).

Anyway, but back to the question at hand: How do you find the length of an array in C?

(tutorial) Getting started with shell scripting!

So, I’m back to school this semester (part time for now) and one of the first things we’re doing in our class is Shell Scripting. As a girl who got into this whole “computer science thing” after playing around with several Linux distros and loving the terminal, this is very fun for me! The course’s focus is mainly UNIX and C, but this is how we’re getting introduced to the terminal and I have no qualms. Shell scripting is almost like a game, and fairly is easy to pick up, even for someone who has little to no knowledge of the shell/terminal. So here’s a little script to get you started!

(tutorial) A Simple jqGrid

The resulting two-column grid, in all its shining silver glory 😉

I promised in my last post to do a jqGrid tutorial, and here it is!

So, in this tutorial, we’re going to build a basic jqGrid with local data. No need to know PHP or have a localhost installed. Just type and go.

First, you need to download jqGrid from here: http://www.trirand.com/blog/?page_id=6

Import it into your page as such:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

(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
});

More options for the jqGrid function can be found here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Now, just put it all together in one document and voila! You’ve got yourself a grid 😉

jQuery Drag & Drop

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.

Enjoy!

-A