CSS3 box model

CSS3 introduces a new box-model property – box-sizing. First of all, let’s remember the default CSS box-model.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #94c681;
}

The browsers will expand the box, and the final width will be 140px and the height, 140px.
width/height = 100px [width/height] + (2 x 10px [padding]) + (2 x 10px [border])

However, sometimes we need the box to be 100px regardless of the padding or the borders added. To overcome this problem, when creating a web page layout, we can use the CSS3 box-sizing property to control how the CSS box model should work in the browsers.

The box-sizing property

The box-sizing property has two value options:

  • content-box is the default value, the default box-model
  • border-box, where the box’s size will be calculated by substracting the specified content’s size with the padding and the borders added.
div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #94c681;

  box-sizing: border-box;
  -moz-box-sizing: border-box; /*Firefox 1-3*/
  -webkit-box-sizing: border-box; /* Safari */
}

Now, the width of the box will decrease at 60px. and the total size of the box remains 100px.
width/height = 100px [width/height] – ((2 x 10px [padding]) + (2 x 10px [border]))

Shrink PNG & JPEG files for web

PNG files are frequently used in websites because it’s the only widely supported format that can store partially transparent images. JPEG files have various uses in websites, from full-sized image background, galleries, thumbs for articles, news etc.  The resulting file for both PNG and JPEG can be large and it’s charging the load time, so the users become frustrated.

Here are 2 online tools you can use to reduce the file size:

1. TinyPNG

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colours in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size.

Visit TinyPNG

2. JPEGmini

JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality. The technology works in the domain of baseline JPEG, resulting in files that are fully compatible with any browser, photo software or device that support the standard JPEG format.

Visit JPEGmini

Handsontable – Excel-like table editor

Handsontable is a approach to Excel-like table editor in HTML and jQuery.

Features:

  • autoexpanding: when you type in a cell the grid adds new rows and cols automatically. You can use CTRL+Z and CTRL+Y to undo/redo, and CTRL+C and CTRL+V to copy/paste;
  • legend: this feature makes the first row have a green font;
  • autocomplete: you can define rules for autocompletition. This feature has a dependency on another jQuery plugin: bootstrap-typeahead (that is included in the repo when you download the plugin);
  • drag-down: the selected cell has a little square in the corner; you can drag it down to repeat the values from the cell;
  • context menu: on right click you have some additional options (insert row, insert column, delete row, delete column);
  • validation: use the onBeforeChange callback to validate changes before they are applied to the table;
  • load & save: use the onChange callback to track changes made in the table.

How to use:

The markup

<div id="example1grid" class="dataTable"></div>

The JS for a simple example

 $("#example1grid").handsontable({
   rows: 5,
   cols: 5,
   minSpareCols: 1, //always keep at least 1 spare row at the right
   minSpareRows: 1, //always keep at least 1 spare row at the bottom
   contextMenu: true
});
 var data = [
   ["", "Kia", "Nissan", "Toyota", "Honda"],
   ["2008", 10, 11, 12, 13],
   ["2009", 20, 11, 14, 13],
   ["2010", 30, 15, 12, 13]
];
 $("#example1grid").handsontable("loadData", data);

Demo Download & Documentation

iPicture – create interactive pictures with extra descriptions

iPicture is a jQuery plugin that helps you create interactive pictures with extra descriptions, like tagging a photo. This plugin has a configuration wizard, you can drag and drop the tooltips over the image, for placing and setting up the plugin.

You can easily customize the plugin: you can add extra icons for the tooltip or you can choose to animate it. You can integrate the plugin with slideshows or sliders.

Demo

How to use

1. The HTML & CSS

<ul id="iPicture">
  <li id="picture1" style="background: url('images/image1.jpg')"></li>
  <li id="picture2" style="background: url('images/image2.jpg')"></li>
  <li id="picture3" style="background: url('images/image3.jpg')"></li>
  <li id="picture4" style="background: url('images/image4.jpg')"></li>
</ul>

* the images must be defined as background, with given width, height and position:

#picture1, #picture2, #picture3, #picture4 {
  width: 900px;      //images width
  height: 528px;     //images height
  position: relative;
  margin:0 auto;
}

2. The JS

The minimal configuration includes:

jQuery(document).ready(function(){
    $( "#iPicture" ).iPicture({
      pictures: ["picture1","picture2","picture3", ...all pictures' ID],
      moreInfos:{
        "picture1":[
          {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
          {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"},
          {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
          {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}],
          ... each photo and its tooltips ...}
    });
});

Documentation & Download