All posts tagged “Table”

A collection of amazing table designs

first image of the post
Many people think table as handy and useful for various purposes such as while studying, having breakfast, dinner or putting stuffs. But do you also know that tables can be beautiful, attractive and innovative as well? You can decorate your living room, study room or kitchen with the below collected amazing table designs that use […]

The post A collection of amazing table designs appeared first on Designer Daily.

Download the free transport icons package now!


Designer Daily

BDDW Ping Pong Table: Designer Tyler Hays expands his Oddities collection with high-end, hardwood fun

BDDW Ping Pong Table

Channeling the ethos of the legendary Dieter Rams, designer Jared Spool said, “Good design, when it’s done well, becomes invisible,” and though he is primarily concerned with the digital aspect as a UX engineer and expert, the maxim can certainly……

Continue Reading…


Cool Hunting

Awesome jQuery Plugins & Tutorials For Sticky Layer Or Table Header

For jQuery lovers, we have compiled this exclusive collection of 30+ jQuery plugins and tutorials that will help you with creating sticky layers or table header. This will help you when you need to fix either the grid or table header with many rows. With this collection, you can learn how to achieve the same sticky header or menu or section or table or grid header etc.

There are times when you need to fix the header of a page or fix the header within particular section in a page; or even when you need to fix the Top Menu or sidebar menu or layer to be scrollable or floating or fixed. We hope that you find this collection useful for you. What you have to say about this collection? Share with us via comment section below.

Sticky Float

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs.

Fixedheadertable

FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.

Facebook Style Scroll Fixed Header In JQuery

While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.

table fixed header

The fixheadertable plugin is a javascript plugin based on the jQuery library and very inspired by jQuery-UI that provides solutions for representing and manipulating tabular data on a web page.

StickyHeader

Makes table headers stick to the top of the viewport when scrolling down HTML data tables.

jQuery-Stickem

Make items sticky as you scroll, to a point.

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

How to create an animated sticky header, with CSS3 and jQuery

In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page.

Sticky Mojo

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.

jQuery Sticky Header

In this tutorial we will create sticky header. The header is initially on its original place above the content, but as soon we start scrolling down the page, it sticks at the top of the page.

Persistent Headers

This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you.

Sticky Section Headers

JQuery sticky section headers takes a nested list and enables section headings as known from iOS table views.

Create a Sticky Navigation Header Using jQuery Waypoints

In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.

How to Code a Fixed Auto-Hiding Nav Bar with JavaScript

hcSticky is a cross-browser jQuery plugin that makes any element on your page float.

HC-Sticky – Jquery Floating Sticky Plugin

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float.

jQuery Sticky Footer plugin

The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent.

Fixed header and column jQuery Datatables

Uses jQuery datatables to make a responsive datatable with a fixed header and a fixed column.

On Scroll Header Effects

Some inspiration for headers that animate when scrolling the page.

Scroll Activated Fixed Header Animations with jQuery & CSS3

It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

On-Scroll Animated Header

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

jQuery Lockfixed

Allow elements to stick within viewport when scrolling. Toggles position: fixed only after scrolling the viewport. Degrades nicely on mobile and tablet browsers.

Fixed Table of Contents Dropdown Menu with jQuery

A fixed table of contents drop-down menu jQuery plugin.Just change the markup to add more depth to the menus.

jQuery Plugin for Fixed Header Tables

jQuery plugin for tables with fixed headers.FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up.

JQuery Scrollable Table Plugin

This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table.

Scrollable Fixed Header Table

This plugin allows html tables to be scrollable horizontally and vertically while headers are still visible and in tack with the columns.

Spotlight: Constrained Stickies with jQuery

Floating content as a user scrolls through the rest of the page is child’s play. No JavaScript is necessary — you can do it with just plain old CSS. Slap a position: fixed declaration on it and boom!, you have a container that is fixed in a specific location in the page — it’s floating in the page to be more colloquial.

JQuery Fixed Table

jQuery.FixedTable is a jQuery plugin to create a fixed header and columns on a HTML table.

How to create sticky table headers using jQuery

Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

Simple smart sticky navigation bar with jQuery

It’s been a while since I posted tutorial article. In this post, I will show you how to create a smart sticky navigation bar easily with just few lines of Javascript codes, powered by the mighty jQuery.


SmashingApps.com

The Ripple Series from Haaand Ceramics: Brighten up the table with naturally shaped, asymmetrical dishes, handmade in NC

The Ripple Series from Haaand Ceramics


If you’re on a search for high-quality wares to set the table with that are minimalist enough to match any mood and decor but are unusual enough to be memorable, look no further than Haaand Ceramics….

Continue Reading…


Cool Hunting

The Indoor and Outdoor FollowMe Lamp from Marset: A modern, lantern-like table lamp designed to let you roam your home

The Indoor and Outdoor FollowMe Lamp from Marset


Barcelona is known for its flair—in natural geography, architecture and style of the city’s inhabitants. With this in mind, it’s no surprise one of the most exciting companies in lighting at the moment hails from the coastal…

Continue Reading…


Cool Hunting

Table Tennis Anytime, Anywhere with Corknet: The elegant portable net works with any table and doubles as a protective mat for pots and pans

Table Tennis Anytime, Anywhere with Corknet


It’s an exciting week for tennis fans as the 2014 US Open kicked off on Monday, but there’s equally good news for table tennis fans as well—thanks to RCA alum and product designer Julian Bond. Not…

Continue Reading…


Cool Hunting

The Web Design Process Periodic Table [Infographic]

How many times have you had to placate your clients because they want to see their website live, and they want it NOW? Unfortunately too many of us have had this experience and frankly it’s usually because clients have no understanding of what happens behind the scenes when we develop websites.

And why should they? They are far too busy running their new company, and dynamic CEOs are used to clicking their fingers and getting a new brochure or billboard design within a week or two, or a brand new marketing campaign launched within a month. So they fail to see why they have to wait so long for their new website.

Luckily help is at hand. The folks at New Design Group produced a web design process infographic that you can share with your client to show them exactly what you need to do to produce a website that meets their needs on every front.

The Web Design Process Periodic Table

Click on the image to view the full-size version.

The Web Design Process Periodic Table Infographic

Using the Infographic

Use the infographic to explain the hoops you need to go through to clarify the project brief and plan the website structure and content navigation – and that’s before a visual mock-up can even be contemplated.

Once the client has agreed on the best mock-up and starts to get tetchy if the live website doesn’t swiftly follow, use the infographic to explain why the subsequent stages all take time:

  • The complexities of the design stage – how the artwork, typography and even the call to action buttons all have to be carefully chosen to fit in with the desired look.
  • The nitty-gritty of the development stage – getting the content right and implementing functionalities requested such as online forms and shopping carts, as well as making the website secure.
  • The importance of the launch stage – testing and quality assurance tasks to avoid the embarrassment of going live with a sub-standard website.

And once the client is delighted with their new website, the work of the infographic is not over – use it to explain the importance of ongoing maintenance to make updates, and to continually optimise the website to result in more conversions and more sales.

A client who fully understands what is going on behind the scenes is indeed a happier client.

If you’re looking for more information check out the behind the scenes of the web design process article which covers the infographic in detail.

The post The Web Design Process Periodic Table [Infographic] appeared first on Speckyboy Design Magazine.


Speckyboy Design Magazine

The Tribeca Table by Soren Rose

Tribeca TableThis minimalistic Tribeca Table was created by Soren Rose and his team who are based in Copenhagen and New York. The Tribeca Table is made using oiled oak and white laminate, the first 'practice' desk was made with recycled gymnasium floorboards and all editions are eco-friendly. The table has plenty of smart storage spaces for a […]
Inspiration Hut – Everything Art and Design

How to Display Data as Table in Browser Console

Console is a browser built-in tool that logs errors that happens on the website. If there are any errors – such as broken links, incomplete JavaScript functions, or unknown CSS properties – the browsers will show error messages within the Console.

On top of that, we can also interact with the Console through the shell and the Console API, which comes in useful when testing certain functions and data output. Here, we will show you one handy tip for Console API use.

Accessing the Browser Console

In Chrome, we can select View > Developer > JavaScript Console menu to bring up the Console. Alternatively, we can also use the shortcut key: Cmd + Option + J on OS X, and Ctrl + Shift + J on Windows.

Shown below is an error-free Chrome Console.

From here, we can start using the command provided in Console API.

Interacting with the Console

We can interact with the browser Console through the Console itself and by adding JavaScript within the document. As an example, here we tell the Console to output “Good Morning!” by typing console.log() command directly in the Console:

As mentioned, we can also apply the console.log() within the document. One practical console.log() use is to test a JavaScript conditional statement. We can see more clearly if the result returns true or false with the help of console.log().

Below is one example:

 var a = 1; if(a == 1) { console.log('true'); } else { console.log('false'); } 

The code above will return true, since the a variable contains the number 1. In the Console you should see the browser output the text true.

Output Data as a Table

Sometimes, we would be dealing with an Array of data or a list of Objects, as shown below:

 var data = [ { name: "Andi", age: "21", city: "Tuban" }, { name: "Ani", age: "25", city: "Trenggalek" }, { name: "Adi", age: "30", city: "Kediri" } ]; console.table(data); 

This data will be hard to read when we use the console.log() method. The console.log() method will show the Array in collapsible tree view, as shown below.

When we are dealing with such an Array, using console.table() is the better way to output it. This method will show data in a table format. Taking the same data as above, it will ouput as:

Conclusion

The browser Console helps web developers handle errors in websites. We can also use it to test data output, like with the console.log() method. When we have an array data console.table()command would come in more useful, as it shows the Array in a table format that is easy to read. Do take note that t the console.log()is only applicable in Webkit-based browsers such as Chrome, Safari, and the latest version of Opera.

Further Reading





hongkiat.com

The Bear table

Bear-Table-Design1-640x428

A cute furniture that is both designy enough to fit in a trendy interior or cute enough to fit in a children room. It was designed by Daniel Lewis Garcia and built in wood.

Bear-Table-Design5-640x422

Bear-Table-Design4-640x421

Bear-Table-Design3-640x420

Bear-Table-Design2-640x424

The post The Bear table appeared first on Design daily news.

Download the free transport icons package now!


Design daily news