piayo

  • Twitter
  • Google+
ヘタレ雇われweb屋
JS勉強中。html5も勉強中。css3もも勉強中。

Works

[webkit用] input slider css demo

chrome extensionで使ったやつ。 webkit(Safari or Chrome)用slider。 ポイントはcss、inputのwidth箇所。 http://jsrun.it/piayo/24E7 あと、 inputで実装したほうがdivで実装するよりdrag中のCPU負荷が少ない。&私が若干webkit病になりつつある。 ↓使い先はコレ https://chrome.google.com/webstore/detail/ckkcfihdjobckmikhjffmjgolbeajoji?hl=ja *update: 2014.04.10 range.addEventListener('input') for Chrome34

  • 2292
  • 1

jfk-activityIndicator

jfk-activityIndicator Googleのサービスでloadingアイコンの丸いやつ http://jsrun.it/piayo/iWXR

  • 3295
  • 0

colorぴっか

HTML5の<input type=color>をいじる。 Chromeで確認

  • 2167
  • 1

[CSS]iPhoneでもoverflow-y:scrollでスクロールバーを表示する

::-webkit-scrollbar使っただけです。 一応、1世代のiPod TouchのSafariでも表示できた。 でもスクロールはやっぱり2本指なのね;orz [追記:1] iOS5からの新機能で、-webkit-overflow-scrolling: touch;と追加すると、1本指でスクロールできるようです。 俺、iPhone持ってないので確認できない(ToT)

  • 14110
  • 3

URLからドメインだけを取得

正規表現でURL,URIからサブドメイン等を除き、ドメインだけを取得する

  • 5297
  • 0

Loader 02 WIP (CSS)

dribbbleのアニメGIFが気になったのでCSS化してみた。 Loader 02 WIP http://dribbble.com/shots/881970-Loader-02-WIP-Animation

  • 3702
  • 19

「ホーム画面に追加してね」

iOS Safariで見かける「ホーム画面に追加してね」ってやつ。 クリックで閉じる。 ・localStorageをCookieっぽく使ってます。 ・iPadにも対応してみた。 ・※JS: 15,16行目あたりは本番で消す http://jsrun.it/piayo/8U9b

  • 4799
  • 2

rangeを画像無しでバーを表示

rangeを画像無しでバーを表示。 chromeで確認 //UPDATE: 2013.07.27 背景を変えるだけなので、triggerを分け、「valChange」を別に作った。 valueをセットしたい時は、 $("#hoge_range").val(50).trigger("valChange"); ※$("#hoge_range").val(50).trigger("change"); ではない //UPDATE: 2014.04.10 .on("change") → .on("input change") に変更 Chrome34、ドラッグ中はchangeイベントが発火しなくなった。 mouseup後にchangeイベント発火するようになった。 .on("input change")、2つ登録することで、 mouseや、arrowKeyでも連続change発火するようになります。

  • 2892
  • 3

Skills

  • Wordpress
  • Photoshop
  • Dreamweaver
  • Flash
  • Illustrator
  • jQuery
  • HTML5
  • CSS
  • CSS3
  • JavaScript
  • ActionScript
  • Flash lite
  • PHP

Hot tags

Categories

HTML / CSS / JavaScript