Instantly share code, notes, and snippets.

View svgcode
// Convert All Image to SVG
$('img.svg').each(function() {
var $img = $(this),
imgID = $img.attr('id'),
imgClass = $img.attr('class'),
imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
View hovertab
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Open on mouseover</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
View tab
<div class="tab_area">
<ul class="tabmenu">
<li class="active">
<a href="#creative" data-toggle="tab">menu one</a>
</li>
<li>
<a href="#consultation" data-toggle="tab">menu two</a>
</li>
<li>
<a href="#marketing" data-toggle="tab">menu three</a>
View comment section
<div id="comments" class="comment-area">
<div class="comments-title">
<h2>Comments (03)</h2>
</div>
<ul class="comment-list">
<li class="comment">
<article class="comment-body">
<footer class="comment-meta">
<div class="comment-author"></div>
View inputType
Input Type Description
button Defines a clickable button (mostly used with a JavaScript to activate a script)
checkbox Defines a checkbox
color Defines a color picker
date Defines a date control (year, month and day (no time))
datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone)
email Defines a field for an e-mail address
file Defines a file-select field and a "Browse..." button (for file uploads)
hidden Defines a hidden input field
View accordion code
html code::
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">
<div class="panel-title">
<p></p>
</div>
</a>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
View jquery
//window height
var windowHeight= $(window).height();
var headerHeight= $('.header-area').height()
$(".hero-area").css('height', windowHeight - headerHeight + 'px');
$(".hero-area .item").css('height', windowHeight - headerHeight + 'px');
$(".hero-area .item img").css('height', windowHeight - headerHeight + 'px');
View gist:5bc6426943028564dfe3224a8429375e
google map api key - AIzaSyD7CQl6fRhagGok6CzFGOOPne2X1u1spoA
View google-map
styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"fea