Skip to content

Instantly share code, notes, and snippets.

@wenjul
wenjul / imgscale.js
Created January 17, 2013 10:32
根据父元素尺寸等比缩放图片
/*
* imgscale, Automatically scales images to fit or fill their parent container.
* Note: The defined parent container of the image must have a defined height and width in CSS.
* By: Kelly Meath
* Website : http://imgscale.kjmeath.com
* Version: 1.0.0
* Updated: March 22nd, 2011
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@wenjul
wenjul / client.js
Created February 15, 2013 05:19
检测客户端渲染引擎、浏览器版本、操作系统和识别移动设备
var client = function(){
//rendering engines
var engine = {
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
@wenjul
wenjul / ie10hack.css
Created February 27, 2013 03:19 — forked from atk/ie10hack.css
/*
#ie10 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#ie10 { color: red; }
}
@wenjul
wenjul / rAF.js
Created March 6, 2013 07:55 — forked from paulirish/rAF.js
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS responsive images</title>
<style>
/* Doesn't stop original source image being
downloaded too */
@media (min-device-width:600px) {
(function() {
var divs = $('.page'),
$next = $('.next'),
$prev = $('.prev'),
that = this,
loc, page;
for (var i = divs.length - 1; i >= 0; i--) {
var z = i + 1;
divs[i].style.left = i * 100 + '%';
divs[i].id = 'page-' + (i + 1);
@wenjul
wenjul / placeholder.css
Created June 19, 2013 11:10
兼容不支持placeholder的浏览器
.placeholder{color:#A2A2A2;}
::-webkit-input-placeholder { /* WebKit browsers */
color:#A2A2A2;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#A2A2A2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#A2A2A2;
}
@wenjul
wenjul / rem.js
Created December 21, 2015 11:27 — forked from fwon/rem.js
/*
* rem.js
* v0.1.1
* fixed 2015-3-12
*/
(function (win){
var doc = win.document,
html = doc.documentElement,
option = html.getAttribute('data-use-rem');
@wenjul
wenjul / styles.css
Created December 22, 2015 06:43 — forked from pburtchaell/styles.css
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
/**
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
*
* To overcome this, create media queries that target the width, height, and orientation of iOS devices.
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
* the height of element `.foo` —which is a full width and height cover image.
*
* iOS Resolution Quick Reference: http://www.iosres.com/
*/
@wenjul
wenjul / 0_reuse_code.js
Created October 21, 2013 13:42
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console