Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/u400731755/domains/derrickbasoah.com/public_html/pakajo/index.php on line 29

Deprecated: substr(): Passing null to parameter #1 ($string) of type string is deprecated in /home/u400731755/domains/derrickbasoah.com/public_html/pakajo/index.php on line 29
Pakajo - Shipment System

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit ligula eget est feugiat viverra. Duis a arcu laoreet, rhoncus libero imperdiet, placerat velit.

Dependent pickers

Disabling dates in the past and dependent disabling.

Date:
Range From: Range to:

Dependent pickers

Disabling dates in the past and dependent disabling.

Date:
Range From: Range to:
My Work Time

Entries

11 h 7 m
1 h

EMPTY DIV

Abide Form:

Here's how you use this input field!

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Check these out
Choose Your Favorite - not required, you can leave this one blank.
Choose Your Favorite, and this is required, so you have to pick one.
Pakajo Custom Checkboxes
Pakajo Custom Radio Buttons
Try one of these buttons:
Learn More View All Features So Tiny So Small So Large Such Expand
One Two Three
Primary Secondary Success Alert Warning Disabled
Here’s your basic grid:

This is a twelve cell section in a grid-x. Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.

Six cell

Six cell

Four cell

Four cell

Four cell

Three cell

Three cell

Three cell

Three cell

Two cell

Two cell

Two cell

Two cell

Two cell

Two cell

Pakajo Logo

Pakajo Foundation Site

Abide Form:

Here's how you use this input field!

Enter a password please.

This field is using the `data-equalto="password"` attribute, causing it to match the password field above.

Check these out
Choose Your Favorite - not required, you can leave this one blank.
Choose Your Favorite, and this is required, so you have to pick one.
Pakajo Custom Checkboxes
Pakajo Custom Radio Buttons
My Work Time

Entries

11 h 7 m
1 h

Pegasi B

image of a planet called Pegasi B

Copernican Revolution caused an uproar

Find Earth-like planets life outside the Solar System

Pegasi B

image of a planet called Pegasi B

Copernican Revolution caused an uproar

Find Earth-like planets life outside the Solar System

Pegasi B

image of a planet called Pegasi B

Copernican Revolution caused an uproar

Find Earth-like planets life outside the Solar System

Pegasi B

image of a planet called Pegasi B

Copernican Revolution caused an uproar

Find Earth-like planets life outside the Solar System

Pegasi B

image of a planet called Pegasi B

Copernican Revolution caused an uproar

Find Earth-like planets life outside the Solar System

Orbit - Text Slider

An image and content carousel aka slider with an animation support through Motion UI and has many customizable options. Here is an example with text slider.

  • This is dodgerblue. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is rebeccapurple. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is darkgoldenrod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • This is lightseagreen. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Orbit - Image Slider

And here is an example with Images.

  • Space
    Space, the final frontier.
  • Space
    Lets Rocket!
  • Space
    Encapsulating
  • Space
    Outta This World
Foundation Icons preview:
Foundation Icon Fonts 3

Responsive Tables

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

Small Word Table
Header 1* Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
row 1, cell 1 row 1, cell 2 row 1, cell 3 row 1, cell 4 row 1, cell 5 row 1, cell 6 row 1, cell 7 row 1, cell 8
row 2, cell 1 row 2, cell 2 row 2, cell 3 row 2, cell 4 row 2, cell 5 row 2, cell 6 row 2, cell 7 row 2, cell 8
row 3, cell 1 row 3, cell 2 row 3, cell 3 row 3, cell 4 row 3, cell 5 row 3, cell 6 row 3, cell 7 row 3, cell 8
row 4, cell 1 row 4, cell 2 row 4, cell 3 row 4, cell 4 row 4, cell 5 row 4, cell 6 row 4, cell 7 row 4, cell 8
Larger Content Table
Perk Description ID Skill Req Perk Req
Steel Smithing Can create Steel armor and weapons at forges, and improve them twice as much. 000cb40d
Arcane Blacksmith You can improve magical weapons and armor. 0005218e 60 Smithing Steel Smithing
Dwarven Smithing Can create Dwarven armor and weapons at forges, and improve them twice as much. 000cb40e 30 Smithing Steel Smithing
Orcish Smithing Can create Orcish armor and weapons at forges, and improve them twice as much. 000cb410 50 Smithing Dwarven Smithing
Ebony Smithing Can create Ebony armor and weapons at forges, and improve them twice as much. 000cb412 80 Smithing Orcish Smithing
Daedric Smithing Can create Daedric armor and weapons at forges, and improve them twice as much. 000cb413 90 Smithing Ebony Smithing
Elven Smithing Can create Elven armor and weapons at forges, and improve them twice as much. 000cb40f 30 Smithing Steel Smithing
Advanced Armors Can create Scaled and Plate armor at forges, and improve them twice as much. 000cb414 50 Smithing Elven Smithing
Glass Smithing Can create Glass armor and weapons at forges, and improve them twice as much. 000cb411 70 Smithing Advanced Armors
Dragon Armor Can create Dragon armor at forges, and improve them twice as much. 00052190 100 Smithing Daedric Smithing or Glass Smithing
Very Long 1st Cell Content
Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 1, cell 2 row 1, cell 3 row 1, cell 4 row 1, cell 5 row 1, cell 6 row 1, cell 7 row 1, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 2, cell 2 row 2, cell 3 row 2, cell 4 row 2, cell 5 row 2, cell 6 row 2, cell 7 row 2, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 3, cell 2 row 3, cell 3 row 3, cell 4 row 3, cell 5 row 3, cell 6 row 3, cell 7 row 3, cell 8
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage. row 4, cell 2 row 4, cell 3 row 4, cell 4 row 4, cell 5 row 4, cell 6 row 4, cell 7 row 4, cell 8

Basic Table (jQuery) Demo

Demonstration of different settings for Basic Table using the jQuery version. Click here to see the Vanilla JS demonstration. For full documentation of settings and method visit http://www.jerrylow.com/basictable or https://github.com/jerrylow/basictable.

Basic Implementation

The basic implementation using all default settigs. The table will use responsive mode when the viewport is less or equal to 568px in width.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
30 Male 5'9 Ontario Badminton Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
$('.responsive-table').basictable();

Modifying Breakpoint

Manually set the breakpoint per table. Setting the breakpoint to 768px so responsive styles will be applied on a typically tablet, portrait mode.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
John Stone 30 Male 5'9 Ontario Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
$('.responsive-table-breakpoint').basictable({
    breakpoint: 768,
});

Modifying Container Breakpoint

Set the breakpoint based on the size of its container opposed to the screens width.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
John Stone 30 Male 5'9 Ontario Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
Other stuff is taking up space in this column. Perhaps, this is a page with a sidebar on larger screens.
$('.responsive-table-container-breakpoint').basictable({
    containerBreakpoint: 485,
});

Force Responsive Off

The script will not force the table to be responsive. The table will only go into responsive mode when the table is actually larger than its parent container. In this demo the parent of table is the div with id page.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
John Stone 30 Male 5'9 Ontario Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
$('.responsive-table-force-off').basictable({
    forceResponsive: false,
});

Max Height

Some tables could get very long in responsive. You could set a max-height in mobile where scrolling within the table would happen. Turn on tableWrap to get a container around the table that toggles an active class. You could also just create your own wrapper and match the breakpoint to do this.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
John Stone 30 Male 5'9 Ontario Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
$('.responsive-table-max-height').basictable({
    tableWrap: true
});

CSS Controls

Use Media Query Over JS Resize

If you don't want to use the js bind on resize you can use css to control the breakpoint itself. Using basic table to setup the structure itself and copying basictable.css styles into your own media query.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
John Stone 30 Male 5'9 Ontario Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
@media only screen and (max-width: 568px) {
  #table-no-resize thead {
      display: none;
  }

  #table-no-resize tbody td {
      border: none !important;
      display: block;
      vertical-align: top;
  }

  #table-no-resize tbody td:before {
      content: attr(data-th) ": ";
      display: inline-block;
      font-weight: bold;
      width: 6.5em;
  }

  #table-no-resize tbody td.bt-hide {
      display: none;
  }
} $('.responsive-table-no-resize').basictable({
    noResize: true,
});

Two Axis Styling

Two axis could be styled differently. This does not need to be done through the library itself. The example code will show how to target the first column in desktop and first row in responsive mode.

Name Age Gender Height Province Sport
Jill Smith 25 Female 5'4 British Columbia Volleyball
John Stone 30 Male 5'9 Ontario Badminton
Jane Strip 29 Female 5'6 Manitoba Hockey
Gary Mountain 21 Mail 5'8 Alberta Curling
James Camera 31 Male 6'1 British Columbia Hiking
table.two-axis tr td:first-of-type {
    background: #dff1f7;
}

@media only screen and (max-width: 568px) {
    table.two-axis tr td:first-of-type,
    table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
    table.two-axis tr td:first-of-type:before {
        background: #dff1f7;
        color: #ffffff;
    }

    table.two-axis tr td:first-of-type {
        border-bottom: 1px solid #e4ebeb;
    }
}

Author: Jerry Low (@jerrylowm)  |  Palette Design: Amit Jakhu (@amitjakhu)

© Pakajo