HTML5 – Nikolay Nikolov blog

SVG on Safari

There is a bug with displaying SVG on Safari.

The fix is to wrap SVG in object.

CSS

object {
    width: 100%;
    display: block;
    height: auto;
    position: relative;
    padding-top: 100%;
}

svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

PNG to SVG

Open Inkscape and load the PNG image.

Paths > Trace bitmap

Choose -Colored , remove SMOOTH and click OK.

Drag down the image, and delete the second image below the first one.

Object > Ungroup

File > Save as

Choose OPTIMIZED SVG

After that you can continue with creating SVG image map.

Sticky Header and Left column on a Table

This example is perfect for schedules and ect… This example is downloaded from http://tympanus.net/Tutorials/StickyTableHeaders/index3.html

StickyTableHeaders

Bootstrap startup template

Hello, I will provide you with basic bootstrap template with great reservation popup.
This template contains:

navigation bar with dropdown menu and popup box
carousel slider
several styles for content
fixed footer

Bootstrap is a really fast way to build responsive designs. Once you learn to use it, you will be impressed how good framework Bootstrap is.
Here is the link to -> documentation

HTML5 and all browsers compatibility

Shims, Shivs and Polyfills

Shims and shivs are small libraries that fill gaps in a platform

Mainly used when API changes and cause compatibility issues
The older API can still be supported by a thin compatibility layer on top of the newer code

Polyfills are similar concept to shims/shivs

They provide fallback functionality for features still not implemented natively in the browser
When the user update their browser they will have the same experience, but use native implementation

Continue reading “HTML5 and all browsers compatibility”

Show google maps from address

If you have for a task to show google maps location using just the address the following script should help you.
Here is the HTML code



	Boulevard Mansions, Borough Road, SE1, United Kingdom

For Google Maps visualization we will use -> Google Maps Javascript API v3:

We will use the predefined address from the div with id=”mapsaddress” and will get the coordinates needed for Google Maps API. Don’t forget to use your own google map key!

You can also check the working DEMO.