HTML Page with grid and column help results on page are jumbled

To say I am a novice at this is best so the simpler the better. I am trying to create an html page with some javascript for a project type of tracking page. I found a site that gives me exactly what I need and I am trying to duplicate it on my local machine. Locally on my machine I setup some folders and sub folders that you will see that references the js for now. The problem I am having is everything on my page is jumbled as you can see from my attachment. The page I am looking to duplicate is at:

Can someone please tell me what I could be missing. I also provided my code in my attachment.
Who is Participating?
Radek BaranowskiConnect With a Mentor Full-stack Java DeveloperCommented:
are you sure you import:

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>


  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>

tmaususerAuthor Commented:
Will Double check and update asap.
tmaususerAuthor Commented:
It looks like I did not have the slick.grid.css and examples.css. I now have the slick grid css but cannot find the examples css. I am close. My screen now looks like the following (see new attachment)
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

tmaususerAuthor Commented:
Also one other question about the data populating the page. Where is this coming from and how do I modify?
Radek BaranowskiFull-stack Java DeveloperCommented:
everything is int ht github source, including examples.css
Radek BaranowskiFull-stack Java DeveloperCommented:
data is generated here, but it's just for testing purposes:

 $(function () {
    var MS_PER_DAY = 24 * 60 * 60 * 1000;
    var data = [];
    for (var i = 0; i < 500; i++) {
      var startDate = new Date(new Date("1/1/1980").getTime() + Math.round(Math.random() * 365 * 25) * MS_PER_DAY);
      var endDate = new Date(startDate.getTime() + Math.round(Math.random() * 365) * MS_PER_DAY);
      data[i] = {
        title: "Task " + i,
        duration: Math.round(Math.random() * 30) + 2,
        percentComplete: Math.round(Math.random() * 100),
        start: startDate,
        finish: endDate,
        effortDriven: (i % 5 == 0)

Open in new window

tmaususerAuthor Commented:
I saw that but did not respond. So what do I get rid of without removing the grid and how do I put in my own data?
Radek BaranowskiFull-stack Java DeveloperCommented:
the above function produces 500 rows of some random data, organizing it into desired structure, records (rows) of 6 items (columns)

just put in place any other data import or data generator, up to your preference. you probably need to create a function to load data from db/other page/api service
tmaususerAuthor Commented:
I would have no idea being a novice how to acomplish this.
Radek BaranowskiFull-stack Java DeveloperCommented:
I mean, if you are doing such page, you surely have *some* data you want to show, right ? so you need to figure out how to put your data into javascript objects. there are a plenty of tutorials and how-to's around. if you make some attempts, certainly me or other experts will eagerly help you. But well, you need to know something at least. Good Luck!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.