PacktPub’s Buy One Get One Free Until March 26th!

PacktPub's Buy One Get One Free Offer

PacktPub Publishes 2000 Titles!

PacktPub was published 2000 titles since 2004. With this accomplishment they have created a Buy One, Get One Free offer on their entire library of eBooks. This offer is only valid until March 26th though, so act quick. The offer is automatically applied during checkout.

Learning Dart

Learning Dart is Packt Publishing’s 2000th published title. I had seen some articles on Dart in the past but never really looked into it. After a little research it sounds pretty impressive. Dart is free, open source, and another amazing product of Google’s developers. I can’t comment on the book yet but I’ll definitely get it shortly.

Looking for More Deals?

Subscribe to Packt Publishing’s newsletter. There are a variety of newsletters you can subscribe to. Check out the link at the bottom of this post for more info.

Need Help Deciding on a Book?

Earlier this year I mentioned another sale PacktPub had, and I cleaned up. I haven’t had time to go through all the books I had purchased but I’ve been working my way through a few. Top of my list, Mastering Web Application Development with AngularJS. This is the first book listed when sorted by popularity and I know why. Its good. Like really good. I haven’t gotten through the entire book yet due to my thesis becoming a bottomless pit, but as soon as I’m done writing my thesis I’ll be back on top of it.

What Makes Mastering Web Application Development with Angular JS So Good?

The way it’s written, the examples, the content included, the list goes on. I’ve seen many tutorial videos on how to use features of Angular JS, but not many explain why. This book gives plenty of examples of Angular JS features with real world reason why you would use Angular JS to accomplish it. Interested in Angular JS? Get it.

Packt Publishing Buy One, Get One Free

Learning Dart

Mastering Web Application Development with Angular JS

Packt Publishing Newsletter

Tagged with: , , , ,
Posted in Book Review, News, Tips, Web Development

Book Review: Instant IntroJs

Instant Intro.Js Book Cover

Instant IntroJs is Short and Sweet

Being an “Instant” book from Packt Publishing this book is fairly short. But that’s the point. This book quickly dives into how to setup IntroJs and a more efficient way to include it in your project. Instant IntroJs also shows you how to include it in frameworks such as Rails and PHP’s Yii framework as well as give you the code to do so. I wasn’t even aware IntroJs had method chaining capabilities until I read this book. The multipage example was nice and simple and should be very useful for people looking to use IntroJs. Instant IntroJs also shows you how to compile the library if you needed to make your own modifications.

Multipage Example

The multipage example in Instant IntroJs was a bit different than I had planned out what it would be in my head, and better. It’s really easy to implement and should be useful for showing off new features.

Options, Actions and more…

There are sections in the book that display and provide detail of actions and options used in IntroJs. This is really handy for those who aren’t aware of IntroJs’s capabilities.

Know What You’re Buying

The book is only 48 pages. I’m not going to rant on how people rate things but this is a quick guide to IntroJs and I feel it does a pretty good job on showing you how to use it. If you’re not familiar with the library and not the best at Javascript or HTML programming this will help you implement IntroJs.

Conclusion

The book was pretty good. It quickly gives you the necessities for implementing Introjs into your project. Have a look at the table of contents provided by Packt Publishing for a precise look at the book’s contents. Follow the link below to find the book.

Instant IntroJs: bit.ly/1arLwif

If you just want to see a basic implementation, check out my post:
Enhancing User Experience with IntroJs

Tagged with: , , , , , ,
Posted in Book Review, HTML/CSS, Javascript, Web Design, Web Development

Upcoming Book Review: Instant IntroJs

Instant Intro.Js Book Cover

Over the next few days, I will be reviewing a book!

Remember my post on IntroJs? That was just a simple demo of it working. I’ve decided to have a bit of a deeper look so I picked up a book called Instant IntroJs and I’m going to see what else I can learn about it.

Multi-Page Intros with IntroJs

The overview for Instant Intro.Js says it goes over multi-page intros. I didn’t even know you could do that with Intro.Js. This will be a big hit though for helping some less tech savvy users.

Learn to Customize the IntroJs Library

In my opinion this is something that is very important in most libraries. It must be relatively easy to customize the library. I’m hoping Instant IntroJs will show me how to navigate around the library easily.

I’m not going to list all of the contents of Instant IntroJs, but for a detailed list and more information, follow the link below.

Instant IntroJS

BONUS:

If you haven’t already seen this posted in a few spots, Packt Publishing is having a sale on all their ebooks. 5$ each! I’m at least getting a few for sure. So you can expect more reviews.

https://www.packtpub.com/ebookbonanza

One last thing…

If there is anything specific you would like me to review about the book please let me know. And I’m always open to constructive criticism so if you think my review lacks something, tell me.

Tagged with: , , , , ,
Posted in HTML/CSS, Javascript, Web Design, Web Development

Programming Tips for the Inexperienced Programmer

Picture of PHP source

Explanation…

I’d just like to say I don’t consider myself perfect, I’m just offering tips to those who are starting programming. I’m going to use some (sort of) real examples I’ve come across while going through previous developers source, so if anyone gets offended, sorry, and I hope you’ve improved.

Tips for Comments

Not many programmers do enough commenting, it kind of sucks, I know. I’m even guilty occasionally when I need to complete something quickly. So here’s a programming tip for comments.

When you do comment, make sure it’s worth the time. Don’t explain what the following line of code is doing unless it’s incredibly cryptic. Instead, explain why you have the following line/block of code in there.

Example:

//if urgency is urgent
if($urgency == 'urgent')
{
  ...
}

Real example… Even if I hadn’t had years of programming experience I would still know what that if statement was there for. Something better…

//change the text color if the post was urgent
if($urgency == 'urgent')
{
  ...
}

Maybe not the best example but you get the point. In most cases the person reading the source later in an applications life will have some programming experience. This means they know what simple statements are doing, don’t waste your time on them.

Variable Name Tips

Programming tip for variable names – use human readable variable names. If you start abbreviating variable names you’ll run out pretty quickly. That and it’s impossible to know what it’s supposed to be. Don’t be lazy, you’ve probably got crazy fast typing skills, whats a few more characters?

Example:

$result = mysql_query($q);
$cda = mysql_fetch_row($result);

$ar = $cda[0];
$t = $cda[1];
$l = $cda[2];
$a = $cda[3];
$tn = $cda[4]; 

Take a guess what’s in the query, result, array, etc… Can’t even guess without seeing the query really.

A table of CDs was queried returning the artist, title, length, album, and track number respectively. It’s pretty obvious what you can rename those variables to, which leads into my next tip.

Database Queries and their Results

Here’s a programming tip that will make your code much more readable. When doing database queries, describe the results in the variable name instead of using $result, which is used for a lot of database connectivity examples. $result is used to describe what is being stored in the variable, in a database connection example it fits perfectly, in production code, not so much. A fellow programmer will know the query command will return a result into the specified variable.

Building off the example above…

Example:

$queryAllCDs = "SELECT * FROM CD";
$cdCollection = mysql_query($queryAllCDs);
$CD = mysql_fetch_row($cdCollection);

$artist = $CD[0];
$title = $CD[1];
$length = $CD[2];
$album = $CD[3];
$trackNumber = $CD[4]; 

But wait, we can make it even better.

$CD = mysql_fetch_assoc($cdCollection);

$artist = $CD['artist'];
$title = $CD['title'];
$length = $CD['length'];
$album = $CD['album'];
$trackNumber = $CD['trackNumber']; 

Now the above code is a little unnecessary and it’s a bit obvious, right? Good. Typically you would not create a new variable just to change it’s name but the example is supposed to show you how much more readable you can make your code with a few minor tweaks. Like the following two for loops.

while($newRow = mysql_fetch_row($result))
{
  echo $newRow[1].'<br>';
}

And now for the better one..

while($CD = mysql_fetch_assoc($cdCollection))
{
  echo $CD['title'].'<br>';
}

Redundant Code

If you doing the same thing in multiple places, create a function. Typically if you’ve done something twice already, there’s a good chance you’ll have to do it again. And what happens when you need to modify it? For instance, pretend mysql_escape_string() and similar functions don’t exist and you want to escape single quotes for your MySQL database. Then you’re company switches to MSSQL!

Example:

$artist = str_replace("'", "''", $_POST['artist']);
$title = str_replace("'", "''", $_POST['title']);

To:

function escapeSingleQuotes($value)
{
  return str_replace("'", "''", $value);
}

$artist = escapeSingleQuotes($_POST['artist']);
$title = escapeSingleQuotes($_POST['title']);

So now when the variables need single quotes escaped differently due to a new database, we just change the function.

I guess that’s enough for now, I’ll probably have more programming tips again soon. Happy coding everyone!

And if you’d like to contribute leave a comment.

Tagged with: , , , ,
Posted in PHP, Tips, Web Development

Twitter Bootstrap Infinite Menu – Associative Array Edition

Twitter Bootstrap Infinite Menu - Associative Array Edition

Finally, An Infinite Bootstrap Menu for Associative Arrays

Sorry it took so long, I’ve been busy as usual. This is the same infinite menu I posted before but now using an associative array instead of an array of objects. I’ve gotten a few requests for it so I’ve modified the previous script to make it easier for those who aren’t using frameworks to do database queries.

What’s different from the last Twitter Bootstrap Infinite Menu?

Not much, if you compare the scripts I’ve changed the array of menu items to just an associative array to create the infinite menu compatible with bootstrap and all variables are accessed as associative arrays instead of objects.

Still having issues?

Download the following zip of a working example of this menu for a MySQL database. Input your database credentials in the top of the source of index.php and providing you’ve got the correct info in your database it will work fine. If you need help debugging it let me know.

Working MySQL Bootstrap Infinite Menu

Note: the command is deprecated in PHP 5.5, please use the alternative for whatever database connection approach you’ve chosen.

Anything else?

I’m hoping this will help users get their twitter bootstrap infinite menus working correctly. If you’re having trouble send me a comment and I’ll get back to you.

Link to the Object Array Twitter Bootstrap Infinite Menu

This Menu In Action

Zipped Infinite Menu Source Files

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <!-- Twitter Bootstrap CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <!-- Start Dynamic Nav -->
	  <div class="navbar navbar-inverse">
      <div class="navbar-inner navbar-inverse">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Title</a>
          <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav">

			<?php
              $menu_items = array(
                array('id'=>'1', 'name'=>'Home', 'parent_menu_id'=>'0'),
                array('id'=>'2', 'name'=>'Products', 'parent_menu_id'=>'0'),
                array('id'=>'3', 'name'=>'About', 'parent_menu_id'=>'0'),
                array('id'=>'4', 'name'=>'Contact', 'parent_menu_id'=>'0'),
                array('id'=>'5', 'name'=>'Apparel', 'parent_menu_id'=>'2'),
                array('id'=>'6', 'name'=>'Shirts', 'parent_menu_id'=>'2'),
                array('id'=>'7', 'name'=>'Pants', 'parent_menu_id'=>'2'),
                array('id'=>'8', 'name'=>'Hats', 'parent_menu_id'=>'5'),
                array('id'=>'9', 'name'=>'Gloves', 'parent_menu_id'=>'5'),
                array('id'=>'10', 'name'=>'Ballcaps', 'parent_menu_id'=>'8'),
                array('id'=>'11', 'name'=>'Beanies', 'parent_menu_id'=>'8'),
                array('id'=>'12', 'name'=>'Wool', 'parent_menu_id'=>'11'),
                array('id'=>'13', 'name'=>'Polyester', 'parent_menu_id'=>'11'),
                array('id'=>'14', 'name'=>'Jimsider.com', 'parent_menu_id'=>'4'),
              );

                global $menuItems;
                global $parentMenuIds;
                //create an array of parent_menu_ids to search through and find out if the current items have an children
                foreach($menu_items as $parentId)
                {
                  $parentMenuIds[] = $parentId['parent_menu_id'];
                }
                //assign the menu items to the global array to use in the function
                $menuItems = $menu_items;

                //recursive function that prints categories as a nested html unorderd list
                function generate_menu($parent)
                {
                        $has_childs = false;

                        //this prevents printing 'ul' if we don't have subcategories for this category
                        global $menuItems;
                        global $parentMenuIds;
                        //use global array variable instead of a local variable to lower stack memory requierment
                        foreach($menuItems as $menuItem)
                        {
                            if ($menuItem['parent_menu_id'] == $parent)
                            {
                                //if this is the first child print '<ul>'
                                if ($has_childs === false)
                                {
                                  //don't print '<ul>' multiple times
                                  $has_childs = true;
                                  if($parent != 0)
                                  {
                                    echo '<ul class="dropdown-menu">';
                                  }
                                }

                                if($menuItem['parent_menu_id'] == 0 && in_array($menuItem['id'], $parentMenuIds))
                                {
                                  echo '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' . $menuItem['name'] . '<b class="caret"></b></a>';
                                }
                                else if($menuItem['parent_menu_id'] != 0 && in_array($menuItem['id'], $parentMenuIds))
                                {
                                  echo '<li class="dropdown-submenu"><a href="#">' . $menuItem['name'] . '</a>';
                                }
                                else
                                {
                                  echo '<li><a href="#">' . $menuItem['name'] . '</a>';
                                }
                                generate_menu($menuItem['id']);

                                //call function again to generate nested list for subcategories belonging to this category
                                echo '</li>';
                            }
                        }
                        if ($has_childs === true) echo '</ul>';
                }
                generate_menu(0);
              ?>
    <!-- End Dynamic Nav -->
         </li>
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </div><!-- /navbar-inner -->
    </div>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
Tagged with: , , , ,
Posted in HTML/CSS, PHP, Twitter Bootstrap, Web Development

Filtering HTML Data With Angular JS

Filtering HTML Data with Angular JS

I was trying to figure out why i would use something like Angular JS because I never really saw the need for manipulating page data that often…

So I Decided to Learn Angular JS

I looked through the examples on the Angular JS homepage but they weren’t that interesting.

So what you can change text in a text box and the line beneath it. I could easily do that in plain javascript without including a framework to do so.

So I decided I better learn Angular JS before I dismissed it.

It’s Actually Really Awesome!

Mainly for it’s ability when templating and manipulating data in a JSON or object format, from what I’ve learned so far anyway.

Do you remember ng-grid I blogged about a while back? That was created with the help of Angular JS.

Have You Ever Had Tables You Wanted To Make Searchable?

If you’ve worked with enough data it needs a page sized table, I bet.

You’re in luck with Angular JS. Below is demo of a table I created that is easily searchable through a textbox.

Try out my Angular JS searchable table demo.

Below is the source from the example. notice how easy it is to add a filter to the table.

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Angular JS Searchable Table Demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <style type="text/css">
            table
            {
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <div>Search: <input type="text" ng-model="search">
        <div ng-controller="tableData">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Student Number</th>
                    <th>Specialization</th>
                </tr>
                <tr ng-repeat="student in class | filter:search">
                    <td>{{student.fname}}</td>
                    <td>{{student.lname}}</td>
                    <td>{{student.studentNumber}}</td>
                    <td>{{student.specialization}}</td>
                </tr>
            </table>
        </div>
        
        <script>
            var tableData = function($scope)
            {
                $scope.class = [
                    {fname: "Kyle", lname: "Hayhurst", studentNumber: "2094378591", specialization: "Web Development"},
                    {fname: "Sandy", lname: "Beach", studentNumber: "2094378545", specialization: "Game Design"},
                    {fname: "Bill", lname: "Ding", studentNumber: "2094378534", specialization: "Business"},
                    {fname: "John", lname: "Doe", studentNumber: "2094378595", specialization: "Software Development"},
                    {fname: "Jimmy", lname: "Hampton", studentNumber: "2094378234", specialization: "Web Design"}
                ]
            }
        </script>
    </body>
</html>

It is important to note that I only used a table as an example but it can be used with any repeated element.

No download for this demo, everything is there in the source!

I will continue to move forward with Angular JS, it seems really cool.

Stay tuned for updates and if you’ve created anything cool with it send me a link I want to check it out!

Tagged with: , , ,
Posted in HTML/CSS, Javascript, Tips, Web Development

Wicked CSS Transitions – ‘Magic’al Even…

Cool CSS Transitions with Magic

CSS3 Transitions Are Very Cool

CSS3 transitions can produce some really cool effects. Rotating, fading, resizing, you name and CSS3 has got it. Even some perspective effects can be created.

…But They’re a Pain to Deal With

The problem is the varying browser support mixed with poor examples and ending up with something that just doesn’t look that good. What if there were a library containing a bunch of pre-compiled transitions?

You’re in Luck! Introducing Magic

Magic is a library full of CSS3 transitions giving you the ability to easily add some cool interaction to your projects.

How does it work?

It’s just a bunch of CSS3 transitions, you simply add the class to the element you wish to manipulate and watch it go!

It is important to note that you cannot just add the class to the element ahead of time and expect to see the transition. The class can easily be added using jQuery of straight up javascript.

See the example on github for the jQuery version.

jQuery is not needed for this library however. This is a pure CSS3 transition library and if you want to see it in action with plain javascript check out my magic demo.

Can I use it in my next project?

Looks like it, at the moment there is no license associated with Magic CSS.

Below is the source for the example. Keep in mind since there is a 3 second timeout before the class is removed from the div you may find the transitions won’t appear correctly if clicked multiple times within that 3 seconds.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="magic.min.css">
        <style type="text/css">
            #container
            {
                width:200px; 
                margin:200px auto;
            }
            
            #targetElement
            {
                color:green;
            }
        </style>
        <script type="text/javascript">
            var transitions = new Array('magic','twisterInDown','twisterInUp','swap','puffIn','puffOut','swashOut','swashIn','foolishOut','foolishIn','holeOut');
            
            function addTransition()
            {
                //generate a number from 0 to 10
                var randomNumber = Math.floor(Math.random()*11);
                
                //find the element we want to manipulate
                var theElement = document.getElementById("targetElement");
                
                //set the class attribute to "magictime {randomTransition}"
                theElement.className = 'magictime ' + transitions[randomNumber];
                
                //after 3 seconds remove the classes, some transitions make the div too small to see
                setTimeout(function(){
                    theElement.className = '';
                    }, 3000);
            }
        </script>
    </head>
    <body>
        <div id="container">
            <div id="targetElement" onclick="addTransition();"><strong>HEY THERE!</strong></div>
        </div>
    </body>
</html>

For a complete list and demo of transitions check out magic’s authors’ page.

Here is the zip containing magic.min.css and the above source.

Tagged with: , , , , , ,
Posted in HTML/CSS, Javascript, Tips, Web Design, Web Development

Internet Around the World – Project Loon

Project Loon - Internet for Everybody

Everybody Should Have Access to the Internet

That’s my belief anyway… I’m not saying the internet should be free for everyone because that’s just not realistic at this point.

There are too many money hungry corporations to let that happen. But, everyone should have the ability to access the internet.

The Information Superhighway

Not a bad name for it I guess. Over the years I’ve learned much of what I know today from the internet. Of course some of the information you must take with a grain of salt.

For the most part there is some good information out there. Just don’t take 95% of social media comments into consideration.

If it were not for the internet I’m not sure where I would be today. Most of my jobs I have worked my way into because I’ve gotten much experience due to learning from the internet.

Online education is becoming very popular and for good reason. There is a lot of great content and some even open source for corrections and clarity.

Just over a year ago I heard about Udacity. I was in the first batch of virtual students to take the Intro to Computer Science class.

Now I had already completed my 3-year diploma as a Computer Programmer Analyst and was/am currently attending university for a Bachelor of Computer Science but it was using Python so I decided to give it a whirl.

It was fantastic. It was a series of videos teaching you the fundamentals with tutorials and multiple choice questions at the end of each section. I will head back at some point for more.

Anywho, I’m getting a bit off topic, but this is why I think everyone should have access to the internet, knowledge.

Knowledge is Power

And with Project Loon, Google is spreading this power throughout the world. Project Loon is starting this month in New Zealand.

What is Project Loon?

Project Loon is Google’s attempt to allow everyone to connect to the internet through a series of weather balloons.

How Does Project Loon Work?

Project Loon is a series of solar powered weather balloons that work as access points as they fly over. The balloons move around by allowing the wind to push them and rising or failing to help change direction. The balloons then transmit your requests to the local ISP.

Will Project Loon Affect Airplanes?

No, planes typically fly below the 10km high mark. These weather balloons float around 20km in the stratosphere. Project Loon employees are also working with airspace officials during launch.

Thumbs up Google, great idea. I’ll definitely be following the progress of this project.

For more information check out the website: Project Loon

Tagged with: , , , ,
Posted in News

Is the Government Spying on You? NSA and PRISM Tells Us Yes…

Large Man Looking At Co-Worker With A Magnifying Glass --- Image by © Images.com/Corbis

The US Government Can Access Your Personal Information

If you’re an average person with nothing to hide, maybe this doesn’t concern you. But putting it another way, do you post your daily phone and internet conversations to the public? Probably not, why? Because it’s none of their damn business.

So if you heard that Verizon has handed over “all call logs “between the United States and abroad” or “wholly within the United States, including local telephone calls.”” [1] to the National Security Agency (NSA).

What Do They Have to Say For Themselves?

… representatives of both Verizon and AT&T declined to comment …” [1]

So is it Just Verizon?

Nope…past reporting indicates the NSA has collected information from all major cell-phone networks” [2].

Are You Really Surprised?

Technology can be a double edged sword when it comes to privacy. Throw something in a cloud storage such as Dropbox or Google Drive, is it really secure? Sure your friends can’t access it, doesn’t mean the government can’t.

Is it Just Phone Calls?

Absolutely not.. The following link provides a summary of internet giants and their inclusion in PRISM. Read carefully to see whether your information is really safe.

Prism and the US internet giants: The relationship, the numbers and the language

What is PRISM

PRISM is “a covert collaboration between the NSA, FBI, and nearly every tech company you rely on daily. PRISM has allowed the government unprecedented access to your personal information for at least the last six years.” [3]

But They’re Using Our Information to Fight Terrorism

HAH! Please don’t tell me you believe that.

Define a Terrorist

A person, group, or organization that uses violent action, or the threat of violent action, to further political goals; frequently in an attempt to coerce either a more powerful opponent, (such as a citizen or group targeting a government), or conversely, a weaker opponent, (such as a government, or even an internal citizen or group, being targeted by a larger government). [4]

Sounds the US Government towards the American people to me…

Sources

[1] – U.S. Is Secretly Collecting Records of Verizon Calls
[2] – Verizon Customer? NSA Was Secretly Recording Your Phone Calls
[3] – What Is PRISM?
[4] – Wiktionary ‘Terrorist’ Definition

Ask a hacker: Top four anti-surveillance apps

Tagged with: , , , , ,
Posted in Political, Technology

Amazing HTML Tables with Angular JS and ng-grid

Awesome sortable, groupable, searchable table data!

Awesome sortable, groupable, searchable table data!

If you have data to display, do it well with Angular JS’s ng-grid

I’ve used tables quite a bit in the past. Whether it be CMS’s or other data that needs to be presented the table is usually one of the most common ways to do so.

Manipulating the data once it’s displayed can be tough

Thankfully there are some libraries out there that have built in functionality for sorting, searching, grouping data, etc. Ng-grid is one of them. Ng-grid is built as a module for Angular JS which I will get into in another post.

Ng-grid’s only other dependency besides Angular JS is jQuery. So there are a few includes in this example but I think the results are worth it.

I don’t put the example in this post itself but have a link to my ng-grid table example here.

Try dragging a table header into the row above it and see what happens…

My head nearly exploded.. I felt like Dale and Brennan on Stepbrothers when they made their beds into bunk beds. So much room for activities!

Anywho, take a look at that table, it looks so good, don’t mind the buttons. Try clicking the column headers to sort the table data.

This is not a clone of the given homepage examples

It’s similar but I tried to be a bit more helpful by turning it into a likely case with buttons that use the tables hidden ‘id’ variable.

If you look in the main.js file you can see the table data contains an ‘id’ field but is not show in the table. Instead, the id is used for functionality purposes which is most likely the case for ‘id’ columns in tables.

So check out the demo for the ng-grid table I’ve done and download the source for the ng-grid table if you like what you see.

Any questions, please ask away.

 

Ng-grid Homepage

Tagged with: , , , , ,
Posted in HTML/CSS, Javascript, Tips, Web Development
%d bloggers like this: