Skip to content

Instantly share code, notes, and snippets.

const isXPath = (selector) => {
return selector.startsWith("/") || selector.startsWith("(");
};
const getElementByXpath = (path) => {
return document.evaluate(
path,
document,
null,
XPathResult.FIRST_ORDERED_NODE_TYPE,
@waylun
waylun / bootstrap model video.html
Last active December 5, 2018 08:04
Simple button that trigger Bootstrap modal to play HTML5 video (Responsive)
<!DOCTYPE html>
<html>
<head>
<title>My video</title>
<!-- bootstrap css-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- jquery -->
<script src="js/jquery-3.1.1.min.js"></script>
<!-- bootstrap js-->
<script src="js/bootstrap.min.js" ></script>
@waylun
waylun / function capitalize.js
Created March 16, 2016 00:42
JavaScript Function Capitalize
var testString = "hello world";
console.log(titleCase(testString));
console.log(titleCase("this is a captialize titile"));
function titleCase(str){
var strArray = str.split(" ");
for(var counter=0; counter<strArray.length; counter++){
strArray[counter] = capitalize(strArray[counter]);
}
@waylun
waylun / getElementsByClassName.js
Last active December 28, 2015 05:59
javascript document.getElementsByClassName compatibility with IE
function getElementsByClassName(className)
{
// get all elements in the document
// For IE
if (document.all)
{
var allElements = document.all;
}
else
{
@waylun
waylun / Bootstrap Accordion Collapsed Effect.html
Last active October 20, 2015 06:50
Remember to install bootstrap library
<html>
<head>
<title>Luno</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="libs/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="libs/js/bootstrap.min.js"></script>
@waylun
waylun / Fluid images.css
Last active October 20, 2015 03:34
For RWD responsive image
img {
vertical-align:middle;
border:0;
}
.img-responsive {
max-width:100%;
-ms-interpolation-mode: bicubic;
image-rendering: optimizeQuality;
}
@waylun
waylun / index.html
Last active October 9, 2015 19:56
JS examples of variables and operators
<html>
<head>
<title>Variables and Operators</title>
</head>
<body>
<h1>var a=2 ; b=5</h1>
<h1>firstname = "Jame" ; lastname="Smith";</h1>
<script>
var a=2;
@waylun
waylun / rotate.css
Last active October 9, 2015 18:51
Rotate image 360deg when mouse hover using CSS 3
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
@waylun
waylun / Use background-size: cover.css
Last active October 9, 2015 18:49
responsive cover image
background-image: url(XXXXX.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;