画面上の文字や画像を選択できないようにする at softelメモ
問題 文字や画像をダブルクリックされると、選択状態になってしまう。 文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。 ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？ 答え CSS3では以下のように書ける。 user-select: none; ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。 以下のように、各実装にあわせた記述をしておく。 user-select: none; /* CSS3 */ -moz-user-select: none; /* Firefox */ -webkit-user-select:
TogetherJS – 埋め込むだけでサイトにチャットなどの機能を追加する
Hacker Newsを見ていたらMozillaの公開しているプロジェクトが話題になっていました。内容はシンプルかつ強力です。JavaScriptのコードを埋め込むだけでWebサイト上でチャットやカーソル位置の共有、音声チャットといったコラボレーション機能が使えるようになります。 TogetherJSは次のような機能をサポートしています。 ビデオと音声のチャット テキストチャット カーソルとクリックの共有 共同ブラウジング ユーザ情報の共有 リアルタイムコンテンツ同期 埋め込むだけで使えるというのはどういうことかと思いますが、実際にはJSで書かれたサーバサイドモジュールとクライアントサイドのスクリプトで構成されています。サーバーサイドを自分自身で稼働させる事も勿論できますが、サンプルとして貼り付けるコードについてはMozillaがホスティングしているhubというサービスをサーバーサイドとし
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
Home | tmlib.js
tmlib.js って何？ ゲームやツールを簡単に作る事ができる JavaScript ライブラリだよ♪ PC とスマートフォンどちらでも動くんだ 『プログラミングって気軽にできるもんなんだ』 『ゲームってこんなに簡単に作れるんだ』 って感じてもらえると嬉しいな かんたんに使えるよ♪ tmlib.js は初心者から上級者まで 幅広く使えるライブラリだよ Usage を見ればすぐに tmlib.js を 使ってプログラミングを始められるよ
リアルタイムWebを構築しやすくする「Socket.IO」とは
本連載では、このTech-Sketchから「コレは！」というテーマをピックアップし、加筆修正して皆様にお届けいたします。 リアルタイムWebとSocket.IO 栄えある連載第1回は、リアルタイムWebとSocket.IOについてお届けいたします。Tech-Sketchに掲載した元ネタはこちらです。 JavaScriptとDynamic HTMLによる「動的に表示内容が更新されるWebサイト」は、JavaScript内から非同期にサーバへ接続しデータを取得する技術、いわゆるAjaxが利用できるようになったことを皮切りに、爆発的に広がりました。Google Mapsなどがその代表例です。 このGoogle Mapsは、表示する場所や縮尺を変更するといった「利用者の操作」を契機として新しいデータをサーバへ取りに行く仕組みになっています。そのためサーバ側でデータが変更されたとしても、次にデータを
Wookmark
高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。 同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。 デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方 実装はいたってシンプルです。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ！動作確認したんですか！」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ高速化のため .htaccess でキャッシュ設定を絶対やっておこう！
AI | PICTRIX BetaBox
私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由
http://phi1618.github.io/tmlib.js/
第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS