How to add Click to call button in website or in App

Must Read : How to add Click to call button in website or in App

Click to call is a great option for mobile devices to add  Click to call button. Once Added a user can tap the phone and make a call directly from your website.

Most modern browsers support this function.Follow instructions below to add it.

Here is syntax:

Tap on Phone Number to Call
<a href="tel:+91-801-456-4253"> +91 (801) 456-4253</a>

Bootstrap modal – disable closing with ESC key or mouse

Must Read : Bootstrap modal – disable closing with ESC key or mouse

With Twitter Bootstrap modals in either version 2 or 3, you can easily prevent the modal window from being closed with the escape key or by clicking on the black backdrop outside the window.

This is useful for keeping people inside of a wizard or other multi-step process inside of a modal box.

Disable the keyboard (ESC key) and mouse clicks outside window

Adding the attributes of data-keyboard="false" and data-backdrop="static" to your modal div will keep the escape key from closing the window.

Add to HTML element

OR control with JavaScript

HTML / CSS Only Off-canvas Slide and Push Navigation

Must Read : HTML / CSS Only Off-canvas Slide and Push Navigation

A modern, mobile-friendly navigation solution to create an off-canvas slide or push menu using pure CSS / CSS3 and plain html. It currently provides 4 CSS files to define the look of the off-canvas menu:

  • slide.css: left slide menu
  • right-slide.css: right slide menu
  • left-push.css: left push menu
  • right-push.css: right push menu

Basic usage:

Load the slide.css to create a left slide menu on your web page.

Load the Font Awesome 4 for menu toggle icons.

Create a menu toggle control using CSS checkbox hacks.

The html structure for the slide menu.

Create a menu toggle button inside the main content.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/acasaprogramming/pure-css-offcanvas-menu/archive/master.zip” linkrel=””]

Google Inbox style design using Bootstrap

Must Read : Google Inbox style design using Bootstrap

Here i’m going to make google inbox style design using bootstrap with font-awesome icons. i hope everybody knew about google inbox that is similar like gmail. In that, there is an design for compose mail as i’m showing in the below image. like that only we are going do here. lets see the code.
So, we are going to do that in bootstrap. so we need add all bootstrap css and js files will jquery plugin and also we have add font awesome css file.
BOOTSTRAP FILES

HTML CODE

CSS CODE

SCRIPT FOR TOOLTIP AND HOVER EFFECT

That’s it. I hope this is really cool one. Thanks for visiting,. Keep in touch with us for more tutorial.

Add youtube video to your website

Must Read : Add youtube video to your website

This article will explain you how to insert Youtube Video to your website with some simple step

First Visit Youtube.com and open any video you want to share

For example I choose this video

then click on share button and Click on Embed

youtuber

Once you click on Embed you will see code on its below box

Copy that Code

Code will be like this “<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/w-k7-jYs7Tg” frameborder=”0″ allowfullscreen></iframe>”

 

Example of Output.

 

Now change the height width you want for your video on your site.

And then just copy paste this in your html or Source of editor and you are done 🙂