Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 27 December 2016

Comments in HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Comments in HTML</title>
</head>

<body>

<section id="comments">
<div class="container">
<!--<p>Demo Comments Here</p>-->
</div>
</section><!-- end comments here -->

</body>
</html>

Box Shadow Css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Box Shadow Css</title>
</head>
<style>
.shadow {margin: 40px;background-color: rgb(68,68,68); -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);box-shadow: 5px 5px 5px rgba(68,68,68,0.6);}
.shadow .content {position: relative; padding: 100px;background-color: #DDD;}
.shadow .content h2{ font-size:36px; text-align:center;}
</style>
<body>
<div class="shadow">
<div class="content">
<h2>Box Shadow Demo</h2>
</div>
</div>
</body>
</html>

Text Blur css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Blur css</title>
</head>
<style>
h1{color:#000000; font-size:50px; font-family:arial; text-shadow:   0 0 3px #000000, 3px 0 3px #000000, 0 3px 3px #000000, -3px 0 3px #000000,0 -3px 3px #000000;}
</style>
<body>
<h1>Demo text blur</h1>
</body>
</html>

Tuesday 20 December 2016

Auto Css Counters

<!DOCTYPE html>
<html>
<head>
<title>Auto Css Counters</title>
<style>
body { counter-reset: section;}
h2::before {  counter-increment: section; content: "Count " counter(section) ": ";}
</style>
</head>
<body>

<h1>Test:</h1>
<h2>Demo</h2>
<h2>Check</h2>
</body>
</html>

Images Double Border In css

<html>
<head>
<title>Images Double Border In css</title>
</head>
<style type="text/css">
img {padding:1px;border:1px solid #021a40; background-color:#ff0;}
</style>
<body>
<img src="demo.jpg" alt="demo"/>
</body>
</html>

Thursday 15 December 2016

Using @font-face Online

<link href="https://db.onlinewebfonts.com/c/6e4a9679e65cc320746c3e5d48e51f28?family=Raleway" rel="stylesheet" type="text/css"/>

OR

<style type="text/css"> @import url(https://db.onlinewebfonts.com/c/6e4a9679e65cc320746c3e5d48e51f28?family=Raleway); @font-face {font-family: "Raleway"; src: url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.eot"); src: url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.woff") format("woff"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/6e4a9679e65cc320746c3e5d48e51f28.svg#Raleway") format("svg");} </style>

Centering a Website

<body>
  <div id="container">
    <!-- please insert your code -->
  </div>
</body>
<style type="text/css">
#container { width: 800px; margin: 0 auto;}
</style>

Change Selection Color

/* For Chrome browsers */
::-webkit-selection {
       background-color: #FFA;
       color: #000;}

/* Works in other */
::selection {
       background-color: #FFA;
       color: #000;}

Tuesday 13 December 2016

CSS Vertical Menu Add Submenu

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS vertical menu add submenu</title>
<style type="text/css">
.navigation { width: 300px; }
.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mainmenu a {
    display: block;
    background-color: #CCC;
    text-decoration: none;
    padding: 10px;
    color: #000;
}
.mainmenu a:hover { background-color: #C5C5C5; }
.mainmenu li:hover .submenu {
    display: block;
    max-height: 500px;
}
.submenu a { background-color: #999; }
.submenu a:hover { background-color: #666; }
.submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}
.mainmenu li:hover .submenu .submenu2 {
    display: block;
    max-height: 500px;
}
.submenu2 a { background-color: #999; }
.submenu2 a:hover { background-color: #666; }
.submenu2 {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}

</style>
</head>
<body>
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a>
          <ul class="submenu2">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>
</body>
</html>

Monday 28 November 2016

How To Create a border with Before & after css

<!DOCTYPE html>
<html>
<style>
.titlehome {font-size:24px;line-height:24px; text-align:center; padding:7px 15px 10px 15px; color:#000; font-weight:bold; margin-bottom:10px;position: relative;z-index: 1;}
.titlehome span { color: #000; text-align: center; background: #fff; padding: 0 50px;}
.titlehome:before {border-top: 2px solid #f67519;content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0;right: 0;bottom: 0; width: 100%; z-index: -1;}

</style>
<body>
  <div class="titlehome"><span>Border  Design Css with Before & After Css</span></div>
</body>

</html>

Footer Always on the bottom in web page

<!DOCTYPE html>
<html>
<style>
footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
</style>
<body>
  <h1>Footer Always on the bottom in web page</h1>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<footer>Footer Always on the bottom in web page, but <strong>not fixed</strong>.</footer>
</body>

</html>

Style a Select Box

<!DOCTYPE html>
<html>
<style>
select {
    border: 1px #ddd solid;
    color: #333;
    background: #f6f6f6;
    font-weight: bold;
    width: 300px;
    -webkit-appearance: none;
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
}
</style>
<body>
<select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</body>

</html>

Odd Even Css

<style type="text/css">
ul li{padding:10px 30px;}
ul li:nth-child(even) {background: #CCC}
ul li:nth-child(odd) {background: #FFF}
</style>

<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

</body>

Saturday 19 November 2016

Css Only for Mozilla Browser

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css Only for Mozilla Browser</title>
<style type="text/css">
h1{ color:#00F3FF;}
@-moz-document url-prefix() {
    h1 { color: red; }
}
</style>
</head>

<body>
<h1>Demo Test Demo Test</h1>
</body>
</html>

Using @import css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
@import url("style.css");
</style>

</head>

<body>
</body>

</html>

Bootstrap Multiselect

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Multiselect</title>
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#multi').multiselect({
includeSelectAllOption: true
});

});
</script>
<select id="multi" multiple="multiple">
  <option value="1">Mango</option>
  <option value="2">Apple</option>
  <option value="3">Banana</option>
  <option value="4">Guava</option>
  <option value="5">Orange</option>
</select>
</body>
</html>

Wednesday 16 November 2016

Quick Responsive Photo Gallery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>Quick photo Gallery</title>
  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="modernizr.js"></script>
</head>
<body>

        
<div class="provider_content shadow margin">
          <div class="m-p-g">
              <h3 class="title">Photos</h3>
              <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
                  <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
                  <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
 <div class="grid"><img src="post.jpg" data-full="post.jpg" alt="1" /></div>
              </div>
              <div class="m-p-g__fullscreen"></div>
          </div>

      </div>
        <script src="jquery.poptrox.min.js"></script>
<script>
var elem = document.querySelector('.m-p-g');
document.addEventListener('DOMContentLoaded', function() {
var gallery = new MaterialPhotoGallery(elem);
});
</script>
</body>
</html>
DONWLOAD

CSS Gradient

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Saturday 12 November 2016

Right arrow with before after css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Right arrow with before after css</title>
</head>
<style>
.left-box { background: #27aae0; color: #fff; padding: 10px 15px; position: relative; margin: 10px 0px;  border-radius: 9px; width: 440px; float: left;}
.left-box h5 { font-size: 20px; margin:0px;}
.left-box p { font-size: 14px;}
.left-box:after {bottom: 100%; left: 28%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;   border-color: rgba(213,222,227,0); border-width: 11px; margin-left: 21em; border-left-color: #27aae0; top: 20px;}
</style>
<body>
<div class="left-box">
<h5>Is your website shunning your customers away?</h5>
<p> Does your customers on an ecommerce website come and abandon from buying in your website. Do they just leave and buy the same product from a competitor website then for sure you need to relook at your website usability design.</p>
</div>
</body>
</html>

Project Counter

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project Counter</title>
</head>
<style>
.count{ display: inline-block; margin:10px 0; width:100%;}
.count .single{width: 20%;float: left;padding: 4% 3% 2% 3%;margin: 2.5%;height: 230px;border: 5px #FFFFFF solid;border-radius: 50%;text-align: center;}
.count .single .counter {font-size: 48px;color: #FFFFFF;display: inline-block;font-weight: bold;text-align: center;}
.count .single span{ font-size:30px; color:#FFFFFF;}
.count .single h3{color:#FFFFFF;line-height: 24px; font-size:18px; font-weight:bold;}
.count .counter > span {margin-bottom: 0;}
.circle {background: #2980b9;width: 200px;line-height: 200px;display: inline-block;color: #fff; border-radius: 100%;}
</style>
<body>
<div class="count">
<div class="single" style="background-color:#833292;"><div class="counter">80</div><span>%</span><h3>Repeat Customers</h3></div>
<div class="single" style="background-color:#f8622f;"><div class="counter">350</div><span>+</span><h3>E-Commerce Portals</h3></div>
<div class="single" style="background-color:#0674a5;"><div class="counter">2000</div><span>+</span><h3>Website Projects</h3></div>
<div class="single" style="background-color:#dc2889;"><div class="counter">13</div><span>+</span><h3>Years of Experience</h3></div>
</div>
</body>
</html>

News Ticker Vertical

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>News Ticker Vertical</title>
</head>
<style>
.newstape {color: #999999; height: 419px; overflow: hidden;}
.newstape .newstape-content {position: relative;}
.newstape .newstape-content .news-block{ margin-bottom:20px;}
.newstape .newstape-content .news-block .test{ color:#999999; font-size:16px; font-family:Calibri; margin:0px;}
.newstape .newstape-content .news-block .name{ color:#f83e4e;  text-align:left; margin:0px;}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">  
    $(function() {
        $('.newstape').newstape();
    });
</script>

<body>
<div class="newstape">
  <div class="newstape-content">
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
  </div>
</div>
</body>
</html>

Thursday 13 October 2016

Full width & height banner in any screen

<style>
#header #parallax_bg{width: 100%;height: 100vh;overflow: hidden;}
#header #parallax_bg img{ max-width:350%; text-align:center;    height: auto;}
#header {padding-top: 0px;padding-bottom: 0px; text-align: center;color: #f8f8f8;}
#header .banner{ width:80%; display:inline-block;position: relative;}
#header .banner .logo{text-align: center;margin: 0px 0 50px; }
#header .banner .top-show{margin-top: -57%; margin-right: auto;margin-left: auto; text-align: center; margin-bottom: 0; top: 20%; position: absolute;left: 0; right: 0;}

</style>

<div id="header">
  <div id="parallax_bg"><img src="images/banner.jpg"></div>
    <div class="banner">
      <div class="top-show">
        <div class="logo"><a href=""><img src="images/logo.png"></a></div>
      </div>
    </div>
</div>

Saturday 8 October 2016

Mobile Frame create in Html with css

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mobile App Demo</title>
</head>
<body>
<div class="third-frame">
<div class="second-frame">
<div class="frame-scroll-correction"></div>
<iframe class="main-frame" src="home.html"></iframe>
</div>
</div>
<style>

*{
margin:0px;
padding:0px;
border:0px;
}
body{
background-color:#ececec;
}
.main-frame{
background-color:#000000;
margin-left:auto;
margin-right:auto;
display:block;
position:relative;
z-index:1;
width: 340px;
height: 550px;
}
.second-frame{
height:100%;
width: 340px;
border:solid 20px #000;
border-radius:40px;
border-bottom:solid 80px #000;
border-top:solid 60px #000;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:2;
}
.third-frame{
height:100%;
background-color:#ccc;
padding:5px;
width: 380px;
border-radius:45px;
margin-left:auto;
margin-right:auto;
margin-top:80px;
}
.frame-scroll-correction{
position:absolute;
height:100%;
width:22px;
background-color:#000;
z-index:99;
right:-20px;
}
.resolution-selecter-deploy em{
float:right;
padding-right:20px;
font-size:19px;
font-style:normal;
}
</style>
</body>
</html>


Check the Example

Thursday 15 September 2016

Mega menu for mobile off-canvas

<link type="text/css" rel="stylesheet" href="menubar/jquery.mmenu.all.css" />
<script type="text/javascript" src="menubar/jquery.mmenu.min.all.js"></script>

<script type="text/javascript">
    var jq = jQuery.noConflict();
    jq(function() {
        jq('#navlinks').mmenu();
    });   
</script>

<style>
.nav { background:#9f0f1a; line-height:40px; -moz-box-sizing: border-box; box-sizing:border-box; width:70%; height:40px; padding:0 0px; display:block; position:fixed; top:0; left:0; z-index:9999999999 !important; border-right:1px #6c040c solid;}
.nav a {background:url(../images/nav-icon.png) no-repeat 10px 10px; display:block; width:auto; height:40px; float:left; padding-left:40px; font-size:13px; font-weight:bold; color:#fff; text-decoration:none; text-transform:uppercase;}

</style>
<div class="nav"><a href="#navlinks" id="menucat">Products Categories</a></div>


<div id="navlinks1">
  <div id='left-categories1'>
    <ul>
      <li> <a href='list/mobilesandtablets'>Mobiles and Tablets</a>
        <div class='megamenu1'>
          <ul>
            <li> <a href='list/mobiles'>Mobiles <span class="ico"></span></a>
              <ul>
                <li><a href="list/smartphones">Smartphones</a></li>
                <li><a href="list/feature-phones">Feature Phones</a></li>
              </ul>
            </li>
            <li> <a href='list/mobile-accessories'>Mobile Accessories <span class="ico"></span></a>
              <ul>
                <li><a href="list/batteries">Batteries</a></li>
                <li><a href="list/cases-covers">Cases & Covers</a></li>
                <li><a href="list/mobile-spare-parts">Mobile Spare Parts</a></li>
                <li><a href="list/screen-guards">Screen Guards</a></li>
              </ul>
            </li>
          </ul>
          <ul>
            <li> <a href='list/bluetooth-devices'>Bluetooth Devices<span class="ico"></span></a>
              <ul>
                <li><a href="list/bluetooth-devices">Bluetooth Speakers</a></li>
                <li><a href="list/bluetoothheadphone">Headphones</a></li>
                <li><a href="list/bluetoothheadsets">Headsets</a></li>
                <li><a href="list/stereo-headsets">Stereo Headsets</a></li>
              </ul>
            </li>
            <li> <a href='list/headphones-headsets-earphones'>Headphones And Headsets And Earphones<span class="ico"></span></a>
              <ul>
                <li><a href="list/carchargers">Earphones</a></li>
                <li><a href="list/earphones">Car Kits</a></li>
                <li><a href="list/headphones">Headphones</a></li>
                <li><a href="list/headsets">Headsets</a></li>
              </ul>
            </li>
            <li><a href='list/memory-cards'>Memory Cards <span class="ico"></span></a></li>
            <li><a href='list/on-the-go-pendrives'>On-the-Go Pendrives <span class="ico"></span></a></li>
            <li><a href='list/tablets'>Tablets <span class="ico"></span></a></li>
          </ul>
          <ul>
            <li> <a href='list/all-other-essentials'>All Other Essentials <span class="ico"></span></a>
              <ul>
                <li><a href="list/chargers">Chargers</a></li>
                <li><a href="list/cleaning-kits">Cleaning Kits</a></li>
                <li><a href="list/docks-stands">Docks And Stands</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>



Jquery Show Less and More Content


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Jquery Show Less and More Content</title>
<meta name="description" content=""/>
<meta name="keywords" content=""/>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(function() {
var showTotalChar = 200, showChar = "Show (+)", hideChar = "Hide (-)";
$('.show').each(function() {
var content = $(this).text();
if (content.length > showTotalChar) {
var con = content.substr(0, showTotalChar);
var hcon = content.substr(showTotalChar, content.length - showTotalChar);
var txt= con +  '<span class="dots">...</span><span class="morectnt"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="showmoretxt">' + showChar + '</a></span>';
$(this).html(txt);
}
});
$(".showmoretxt").click(function() {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showChar);
} else {
$(this).addClass("sample");
$(this).text(hideChar);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>

<style>
.body{padding:0; margin:0;}
.main_ctnt {
    border: 1px solid #000000;
    margin: 100px;
    padding: 15px;
    width: 650px;
}
.show {
    font:normal 15px arial;
    text-align: justify;
    padding: 15px 0 0 0;
}
.morectnt span {
display: none;
}
.showmoretxt {
    font: bold 15px tahoma;
    text-decoration: none;
}
</style>

    </head>
    <body>
    <div class="main_ctnt">
<div class="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec magna tellus, vulputate in feugiat vel, auctor at ipsum. Curabitur imperdiet orci eget congue malesuada. Vestibulum gravida mi sed facilisis elementum. Phasellus sed eros nulla. Proin porta aliquam tristique. Suspendisse tincidunt augue eget nulla luctus porta.</div>
</div>


    </body>
</html>




Radio button css

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>awesome bootstrap checkbox demo</title>

<link rel="stylesheet" href="bootstrap.css"/>

<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>

<style>
.radio label {display: inline-block;position: relative; padding-left: 5px; }
.radio label::before {content: "";position: absolute; width: 17px;height: 17px;left: 0; margin-left: -20px;border: 1px solid #cccccc; border-radius: 50%; background-color: #fff;}
.radio label::after {display: inline-block; position: absolute; content: " "; width: 11px; height: 11px; left: 3px; top: 3px; margin-left: -20px; border-radius: 50%; background-color: #009C71; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); }
.radio input[type="radio"] { opacity: 0;   z-index: 1; }
.radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1);    transform: scale(1, 1); }
.radio.radio-inline { margin-top: 0; }
</style>

</head>

<body>





<div class="radio radio-info radio-inline">

<input type="radio" id="test" value="option1" name="radioInline" checked>

<label for="test"> Checked </label>

</div>

<div class="radio radio-inline">

<input type="radio" id="test2" value="option2" name="radioInline">

<label for="test2"> Test </label>

</div>

</body>

</html>

Clip Image

<style>
.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 300px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}
.siteHeader{
    width:150px;
    height: 150px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -0px;
}
</style>
<div class="container">
  <img src="cooking3.jpg" width="400"/>
</div>
<div class="container">
  <img id="clip" src="cooking3.jpg" width="400"/>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<header class="siteHeader">
    <img src="taskbob/images/1.jpg" class="siteLogo" />
</header>

Friday 5 August 2016

Less & show button in jquery with toggle

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {       
         jQuery('#content').toggle('show');
         var text = jQuery("#hideshow").html();      
         if (String(text) == "Less") {
            jQuery("#hideshow").html("More");
         } else {
            jQuery("#hideshow").html("Less");
         }
    });
});
</script>
<a id='hideshow' class="more">More</a>
<div id='content' style='display:none;'>
Akshay check text
</div>

Saturday 23 July 2016

right side scroller color change

css here......
.mousescroll::-webkit-scrollbar {
    width: 7px;
}
.mousescroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 


    }
 
.mousescroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
div#chatlist {
    width: 50px;
    height: 140px;
}
div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

html demo
<div id="chatlist" class="mousescroll">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

Friday 24 June 2016

Sticky Navigation

<script type="text/javascript">
jQuery(window).scroll(function () {
  if (jQuery(document).scrollTop() == 0) {
    jQuery('.menu').removeClass('sticky');
  } else {
    jQuery('.menu').addClass('sticky');
  }
 
});

</script>


<header id="home" class="menu">
  <div class="container">
    <div class="header">
      <div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div>
      <div class="nav">
        <ul>
          <li class="active"><a href="#home_bg" class="scroll">Home</a></li>
          <li><a href="#about_bg" class="about scroll">About</a></li>
          <li><a href="#product_bg" class="product scroll">Product</a></li>
          <li><a href="#client" class="client scroll">Clients</a></li>
          <li><a href="#career" class="career scroll">Career</a></li>
          <li><a href="#contact_bg" class="contact scroll">Contacts</a></li>
          <div class="clear"> </div>
        </ul>
      </div>
      <div class="clear"> </div>
    </div>
  </div>
</header>

Add Class When Page Scroll Reach At Specific ID

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    $('#home').toggleClass('about',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#about').offset().top
    );
    $('#home').toggleClass('product',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#product').offset().top
    );
    $('#home').toggleClass('contact',
     //add 'ok' class when div position match or exceeds else remove the 'ok' class.
      scroll >= $('#contact').offset().top
    );
});
//trigger the scroll
$(window).scroll();//ensure if you're in current position when page is refreshed

</script>
<style>
body{ margin:0px;}
#home{ height:500px; background:#3f9fc9;}
#about{ height:500px; background:#009294;}
#product{ height:500px; background:#ffde00;}
#contact{ height:500px; background:#b619ff;}
</style>
<body>
<header id="home">
</header>
<section id="about">
</section>
<section id="product">
</section>
<section id="contact">
</section>

</body>
</html>

Tuesday 24 May 2016

On Mousehover Div rotate

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".card").hover(function() {
   $(this).addClass("flipped");
}, function() {
    $(this).removeClass("flipped");
});
});
</script>
<style>
.flip {
    -webkit-perspective: 800;
    perspective: 800;
    width: 99%;
    height: 370px;
    position: relative;
    margin: 0 0 20px auto;
    display: inline-block;
    white-space: normal;
}

.flip .card {
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


.flip .card.flipped {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
}

.flip .card .front {
    position: absolute;
    z-index: 1;
    background: #f9f9f9;
    border: solid 1px #ccc;
    border-radius: 2px;
    color: transparent;
    cursor: pointer;
    padding: 38px 23px;
    display: block;
}
.card img.home_icon {
    max-width: 160px;
    margin: 0 auto 20px;
    width: 100%;
    margin-top: 36px;
    max-height: 200px;
}
.whatwedo_home a {
    color: #333;
}
.flip .card .front h2 {
    padding: 10px;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    text-align: center;
    letter-spacing: 0px;
    text-decoration: none;
}

.flip .card .back {
    -webkit-transform: rotatex(-180deg);
    -ms-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
    background: #29BBEA;
    cursor: pointer;
    padding: 30px 10px;
}
.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    z-index: 2;
}

.flip .card .back h2 {
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0px;
    font-family: 'Open Sans', sans-serif;
}

.flip .card .back ul {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding-left: 0;
    list-style: none;
}
.flip .card .back ul li {
    padding: 6px 0;
    text-align: center;
    margin: 0px;
}
.flip .card .back ul a {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
.flip .card .back ul a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
}

.flip .card .back ul a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
    transform: translateX(-20px);
}
.flip .card .back ul a::after, .flip .card .back ul a::before {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform .3s,opacity .2s;
    -o-transition: -o-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
</style>
</head>
<body>
<div class="flip">
          <div class="card"> <a href="https://akshaysyal.wordpress.com/" class="face front"> <img src="http://logopals.com/img/design1.png" data-lazy-type="image" data-lazy-src="/media/2015/06/atomix_brain.png" alt="" class="lazy img-responsive home_icon" style="">
           
            <h2>WE DESIGN</h2>
            </a>
            <div class="face back">
              <h2>WE DESIGN</h2>
              <ul>
                <li><a href="">Responsive Website </a></li>
                <li><a href="">Website Maintenance</a></li>
                <li><a href="">Small Business Website &nbsp;</a></li>
                <li><a href="">Newsletter Design</a></li>
    <li><a href="">Photographer Website</a></li>
               <li><a href="">Real Estate Website&nbsp;</a></li>
               <li><a href="">Landing Page Design</a></li>
              </ul>
            </div>
          </div>
        </div>

</body>
</html>

Thursday 10 March 2016

A Larger Image OnClick With JavaScript With Thumbnails On Same Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Showing A Larger Image OnClick With JavaScript / DOM Example 1: With Thumbnails On Same Page</title>
<link href="../demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
            function showImage(imgName) {
                var curImage = document.getElementById('currentImg');
                var thePath = 'images/';
                var theSource = thePath + imgName;
               
                curImage.src = theSource;
                curImage.alt = imgName;
                curImage.title = imgName;
            }
        </script>
<style type="text/css">
#mainContainer, #footerArea {
    clear: both;
    width: 700px;
    margin: 10px;
}
#leftNav {
    float: left;
    width: 150px;
    margin-right: 15px;
    border-right: 1px solid #000;
    text-align: center;
}
#rightDisplay {
    float: right;
    width: 530px;
    margin: 0;
    text-align: center;
}
img {
    margin: 10px 0 10px 0;
}
</style>
</head>
<body>
<!--<h1>Showing A Larger Image OnClick With JavaScript / DOM<br/>
  Example 1: With Thumbnails On Same Page </h1>
<p>Click on an image thumbnail at left to see the larger image on the right. </p>-->

  <div id="leftNav"> <img src="images/bridget_moynahan_00_tn.jpg" onclick="showImage('bridget_moynahan_00.jpg');"/> <br/>
    <img src="images/bridget_moynahan_01_tn.jpg"  onclick="showImage('bridget_moynahan_01.jpg');"/> <br/>
    <img src="images/bridget_moynahan_02_tn.jpg"  onclick="showImage('bridget_moynahan_02.jpg');"/> <br/>
    <img src="images/bridget_moynahan_03_tn.jpg" onclick="showImage('bridget_moynahan_03.jpg');"/> <br/>
    <img src="images/bridget_moynahan_04_tn.jpg" onclick="showImage('bridget_moynahan_04.jpg');"/> <br/>
    <img src="images/bridget_moynahan_05_tn.jpg" onclick="showImage('bridget_moynahan_05.jpg');"/> </div>
  <div id="rightDisplay"> <img id="currentImg" src="images/bridget_moynahan_00.jpg"/> </div>

</body>
</html>

Tuesday 8 March 2016

Show Hide

HTML

<a href="#" onclick="showHideDiv('div-1')">Awards</a>
<a href="#" onclick="showHideDiv('div-2')">Awards</a>
<a href="#" onclick="showHideDiv('div-3')">Awards</a>
<a href="#" onclick="showHideDiv('div-4')">Awards</a>
<a href="#" onclick="showHideDiv('div-5')">Awards</a>

<div id="div-1" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>

<div id="div-2" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


<div id="div-3" style="display:none; position:absolute; bottom:25px;">
    <div>Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator.</div>
</div>


JAVA SCRIPT

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
function showHideDiv(id){
 var obj = document.getElementById(id);
if (obj.style.display=="none"){
 obj.style.display='block';
} else if(obj.style.display=="block"){
 obj.style.display='none';
}
}
</script>

Monday 7 March 2016

All media query for all screen version


bootstrap media query use in simple style 
 
    @media (max-width: 1224px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 768px) {} 
    @media (max-width: 640px) {}
    @media (max-width: 420px) {}
    @media (max-width: 320px) {}
    @media (max-width: 220px) {}

Reply Button like facebook

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<script type="text/javascript">
var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";


var allElements = document.body.getElementsByClassName("replybtn");

var addCommentField = function() {
  for (var i = 0; allElements.length > i; i++) {
    if (allElements[i] === this) {
      console.log("this " + i);

      if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {
        document.getElementsByClassName("replyform")[i].innerHTML = varHtml;
      }

    }
  }
};


for (var i = 0; i < allElements.length; i++) {
  allElements[i].addEventListener('click', addCommentField, false);
}
</script>
</body>
</html>

Tuesday 1 March 2016

Scrollbar css add

css here......
.mousescroll::-webkit-scrollbar {
    width: 7px;
}
.mousescroll::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 


    }
 
.mousescroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
div#chatlist {
    width: 50px;
    height: 140px;
}
div.mousescroll {
    overflow: hidden;
}
div.mousescroll:hover {
    overflow-y: scroll;
}

html demo
<div id="chatlist" class="mousescroll">
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>

Thursday 25 February 2016

All Source Disable in Web page

<!--disable right click--->
<script language=JavaScript> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
<!---end here-->

<!--using f12 disable-->
<script>
            document.onkeypress = function (event) {
                event = (event || window.event);
                if (event.keyCode == 123) {
                    return false;
                }
            }
            document.onmousedown = function (event) {
                event = (event || window.event);
                if (event.keyCode == 123) {
                    return false;
                }
            }
            document.onkeydown = function (event) {
                event = (event || window.event);
                if (event.keyCode == 123) {
                    return false;
                }
            }
        </script>
     <!---end here-->
     
<!--for ctrl+U--- disable code here-->

<script>
/*function check(e)
{
alert(e.keyCode);
}*/
document.onkeydown = function(e) {
        if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) {//Alt+c, Alt+v will also be disabledsadly.
            alert('not allowed');
        }
        return false;
};
</script>   
        
 <!--end here ctrl+u--->