画像サイズに依存しない絶対中央配置
http://dskd.jp/archives/29.html<body>
<img src="image.jpg" />
</body>img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}2015年2月28日土曜日
CSS 画像の絶対中央配置
2015年2月23日月曜日
2015年2月21日土曜日
2015年2月19日木曜日
2015年2月18日水曜日
CSSだけでセレクトボックスの装飾
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: 1px solid #ddd;
width:100%;
margin: 0;
padding: 4px;
background: none transparent;
vertical-align: middle;
font-family: inherit;
font-size: inherit;
color: inherit;
/*box-sizing: content-box;*/
box-sizing: fixed;
}
select { /*矢印を消す for Firefox*/
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
select::-ms-expand { /*矢印を消す for IE*/
display: none;
}
2015年2月9日月曜日
JavaScript オブジェクトをダンプ（テキスト表示）する
DOMオブジェクト・jQueryオブジェクト をダンプ（テキスト表示）する。｜プログラムメモ
・jQueryオブジェクトをダンプしたい場合は
が便利です。
・その他のオブジェクト（JSON等）、配列、連想配列などをダンプしたい場合は
JKL.Dumper が便利です↓
使い方（オブジェクト hoge の中身をダンプする）
<script type="text/javascript" src="jkl-dumper.js"></script>
var hoge = [1,2,3,4,5]; alert( new JKL.Dumper().dump(hoge) );
2015年2月8日日曜日
JavaScript - 配列の中の最大値を取得する(NaN, null対応) - Qiita
JavaScript - 配列の中の最大値を取得する(NaN, null対応) - Qiita
JavaScript - 配列の中の最大値を取得する(NaN, null対応) - Qiita
# 普通に扱う場合、もはやイディオムのコレ
```js:
Math.max.apply(null, [-100, 0, 3.14, 0xFF, 1000]); // => 1000
// ※ Mathの関数のコンテキスト(apply...
http://qiita.com/YusukeHirao/items/e848f5de40beaa52e002```js:
Math.max.apply(null, [-100, 0, 3.14, 0xFF, 1000]); // => 1000
// ※ Mathの関数のコンテキスト(apply...
2015年2月7日土曜日
jQuery 一定間隔で処理を実行する
以下は1秒ごとに
$('.hoge:eq('+count+')').addClass('animated fadeIn');
を実行するスクリプト。
var count = 0;
var len = $('.hoge').length;
var Repeat = setInterval(function() {
$('.hoge:eq('+count+')').addClass('animated fadeIn');
count++;
//終了条件
if (count >= len) {
clearInterval(hoge);
console.log("終わり");
}
}, 1000);
$('.hoge:eq('+count+')').addClass('animated fadeIn');
を実行するスクリプト。
var count = 0;
var len = $('.hoge').length;
var Repeat = setInterval(function() {
$('.hoge:eq('+count+')').addClass('animated fadeIn');
count++;
//終了条件
if (count >= len) {
clearInterval(hoge);
console.log("終わり");
}
}, 1000);
2015年2月6日金曜日
CSS3 n番目からn+何番目までの要素を選択するには
5番目から10番目までの子である要素にマッチするセレクタ
:nth-child(n + 5):not(:nth-child(n + 11))
CSS3 - f番目からt番目までの子である要素にマッチするセレクタ - Qiita
:nth-child(n + 5):not(:nth-child(n + 11))
CSS3 - f番目からt番目までの子である要素にマッチするセレクタ - Qiita
2015年2月5日木曜日
tableを細線一本にする
.table {
width: 400px; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線 */
}
.table th, .table td {
border: 1px #1C79C6 solid; /* セルの枠線 */
}
WYSIWYG-HTML Edit
Create.jsFree Web Resources Everyday - WebResourcesDepot
http://www.webresourcesdepot.com/category/goodies/wysiwyg-html-edit/
jQueryで追加したclickイベントがiPhone/iPadのSafariで動かない場合
jQueryで追加したclickイベントがiPhone/iPadのSafariでだけ動かない場合のスマートな対応方法 | roundropブログ implements Programmable
対象のhtml要素のCSSの’cursor’を‘pointer’にするとなぜかclickイベントが効くようになる、という情報を発見。
以下のようにして試してみる。
$('#some_button').click(function(){
//do something
})
.css('cursor','pointer'); //←追加
以下のようにして試してみる。
$('#some_button').click(function(){
//do something
})
.css('cursor','pointer'); //←追加
jQuery live()をon()で書き換えるには
live→on
$('table').live('click', fn);
$(document).on('click', 'table', fn);
- ある意味一番ややこしいですが、 liveがdocumentにイベントをセットしている ということさえ理解していれば、delegateと同じになります。また、イベントセット箇所が明示的になるのでonを使いましょう。
- というか、もう1.9以降、使用不可です。
2015年2月2日月曜日
登録:
投稿 (Atom)