ドロップインで動くLightbox
リンクが張られた画像をLightbox形式で表示するようなJavaScriptを書いていた。vwとvh単位でa要素を引き伸ばして適当に前面に表示し、img要素をなんとなく拡大してから天地左右中央配置する。予めクラス指定が必要だったり、スタイルの追加が必要だったりしない、ドロップインで動作するものだ。 Demo: Lightbox with Clean Markup デモでそれぞれの画像をクリック(タッチ)すると、描画領域全体に画像が表示される。a要素をオーバーレイの背景に変え、img要素をうまく収まるように調整することになる。 if (this.href !== image.src) { image._src = image.src; image.src = this.href; } リンク先と画像のURLが違う場合は、画像がサムネイルでリンク先がフルサイズの画像とみなし、一時的に画像のリ
:visitedセレクタを使わない閲覧履歴の抽出方 - karasuyamatenguの日記
このタイトル見ると抽象的でピンとこないがこれを見てほしい： これ見たときはビビった。全部的中。 これはたった30行のJavaScriptで実装されている。 http://oxplot.github.com/visipisi/visipisi.html このリンク先のページの下の「Do the magic」というボタンを押すと自分の履歴が見れる。 各サイトの画像がブラウザにキャッシュされているかどうかをロード所要時間から推測している。 :visitedセレクタによる訪問履歴漏れはブラウザベンダーが対応しているようだけど、画像のロードスピードはユーザの体感スピードを損わずに隠すことはできないような気がする。画面には素早く見せて、JavaScriptのAPIにはゆっくり見せるなんてことしたら、何が壊れるかわからないし。 もしかしてブラウザの訪問履歴漏れの阻止ってのは不可能なのかもしれない。
「※この発言は個人の見解であり、所属する組織の公式見解ではありません」をリリースしました - 昼メシ物語
http://この発言は個人の見解であり.所属する組織の公式見解ではありません.tsuyabu.in/ 「※この発言は個人の見解であり、所属する組織の公式見解ではありません」は、発言専用のTwitterクライアントです。これを使って発言すると、その発言があくまで個人の見解であることを主張することができます。 使い方は簡単で、発言を140文字以内で入力し、「Tweet」をクリックするだけです。すると、以下のように、その発言が個人の見解に過ぎないことが明示されます。 技術的な説明 ただ Twitter Anywhere を html に貼りつけただけです。 まず、Anywhere アプリケーションをこちらから登録します。 https://dev.twitter.com/anywhere/apps/new この時に指定するアプリケーション名を「※この発言は〜」にしたというだけの話です。このアプリ
[js] webページ中のリンクをクリックするUIを改善する実験 - 生活。
次のような例を考えてみる。 webページを見ていて、ページ内のリンクを辿って他のページへ遷移する マウスの場合 マウスをリンクの上に持って行く マウスカーソルの形が変わることを確認する（変わらないかも知れないが） クリックする タッチパネルのインターフェースがあれば次のようになる タッチパネルの場合 目的のリンクの上をタッチする マウス、タッチパネルのいずれにおいても、目的のリンクの上をクリック（タッチ）する必要がある。僕はよくわからないが、老眼が進行すると小さいリンク要素を俺様がなんで頑張ってクリックせねばならないのだ!!!となる可能性がありそうなので怖い。また、今もiphoneのsafariでPC用のwebページを見る時に、よくクリック（タッチ）に失敗することがあり、なんとかしたい。 ただ、どうすればいいのかわからないので、とりあえずGreasemonkeyで実験してみた。 http:
![[js] webページ中のリンクをクリックするUIを改善する実験 - 生活。](https://cdn-ak-scissors.b.st-hatena.com/image/square/606ff252ee15e872474ed7a97fa3d663c6ad21f8/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729896483%2F12704591929883951163%2F1338491075)
近くのリンクをクリックするnewmouse.user.js - hitode909の日記
ブラウザで，リンクとかボタンとかをクリックするときに，マウスカーソルをリンクの上まで持っていくのがめんどうで，困ってた． なにもないところでクリックしたときは，勝手に近くのクリックできそうな要素をクリックしてくれればよいと思ったので，Greasemonkeyを書いた． newmouse.user.js — Gist 動画 newmouse.user.js - YouTube 使い方 Greasemonkeyをインストールすると，旧来のマウスカーソル(旧マウスカーソル)と別に，マウスカーソルがもう一個表示されるようになる(新マウスカーソル)． 新マウスカーソルはせわしなく旧マウスカーソルの周りを動きまわって，リンクを見つけると，新マウスカーソルがリンクに張り付いて，クリックできますよ，という感じになる． 旧マウスカーソルが，なにもないところで(具体的には，aや，buttonなど以外の上で)ク
CSSにデータを埋め込む方法を考えてみた(CSS2KB) - latest log
ここ最近 DOM + CSS + JavaScript な Widget を作ってます。タブとかスライダーとかです。 Wiget の見栄えを切り替える方法(テーマ)も実装してますが、CSS とテーマ情報を格納するファイルが、別々のファイル(CSS + js)に分かれてしまうので、どうにかしてこれらを一元管理できないもんかと考えてました。 今日は、list-style-image: や background-image: の URL(QueryString) に定数を埋め込む方法を思いついたので、その説明です。 list-style-image: url(1dot.gif?key=val) の key=val が取り出せるか試してみる <!doctype html><html><head><title></title> <style> .widget { list-style-image:
くるくる回して入力するUIを作ってみた - 今日のごはんは素麺です
とある範囲の値を入力してもらいたいけど, テキストボックスじゃ自由度高すぎるし, 範囲が微妙に広いからコンボボックスじゃ選ぶのめんどいなー*1. そんなコトを考えているときに「こんなのどうよ?」と思って作ってみた. とりあえずこんな風になった このページを開いて, 青いボックスの上でマウスのボタンを押しっぱなしにすると, ちっこい矢印がでてくる. その状態で, その矢印を中心に: 時計回りにドラッグするとカウントアップ 半時計回りにドラッグするとカウントダウン します. 欠点 入力の仕方がわかりにくい*2 入力範囲が広すぎると何回もくるくるしなくちゃいけないのでめんどくさい とりあえず意外におもしろい動きなんじゃないかと思います. iPodのUI? 知らないお( ^ω^)*3 あ, もし使いたい方はこちらからJavaScriptのソースを取得してもらえればいいかと思います. ちなみにjQu
Yaneu Labs --- はてふ --- はてな付箋リリースしました
*[hatefu:labs.yaneu.com/20090309/] はてふ --- はてな付箋リリースしました Webで技術的な調べ物をしていると、記事の間違いを目にすることが良くある。例えば、次の記事だ。 # 記事の誤り [img:bad1.png] 第10回 CSSで画面を構成する際の最重要タグ「div」の使い方を知る http://itpro.nikkeibp.co.jp/article/COLUMN/20080311/295932/?ST=swd-design&P=5 この赤の下線部は私が引いた。言うまでもなくここは、誤りである。positionは指定しなければstatic扱いで、staticだと親要素になれないだけのことである。だからabsoluteでもrelativeでもfixedでも指定すれば親要素になれ、position:absoluteはその親要素相対になる。 最重要タ
CSSセレクタで属性だけじゃなく、スタイルもクエリーできちゃうとすごく便利(かも) - latest log
「CSSセレクタって、CSSのルールで絞り込みはできても、CSS(スタイル)で絞り込みができないんだ…」って思ったことはありませんか? 実験的なテーマになりますが、styleプロパティの値を、CSSセレクタでクエリーできるように構文を拡張してみました。 # 構文や機能に対する改善案をお待ちしています。 スタイルで絞込みを行う場合の基本的な構文は、E { prop operator value } 以下のバリエーションを用意しました。 prop の値は、計算済みの値(currentStyle または getComputedStyle())の値と比較します。 IEで、currentStyle(element).width === "auto" なケースがありますが、そのような場合でも "auto" を px単位の値に自動的に変換したうえで比較します(つまり div{width="auto"}
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
HisasAnn.com is for sale | HugeDomains
TOKI WOKI. Scroll Clock
Parsing URLs with the DOM! - JavaScript - Snipplr Social Snippet Repository