Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」 2010年01月08日- jQuery 'Notify bar' Twitterのようにスマートな通知バーを一瞬で実装できるjQueryプラグイン「jQuery Notify bar」。 ページの上部にアニメーションされながら表示されるあの通知バーです。 時間がたつとアニメーションしながらスマートに消えてくれます。ページデザインがどんなものであろうと影響を受けません。 色を変えて、エラーモードにしてみたり、成功モードにしてみたり自由にできます。 実装は超簡単で、次のように初期化するだけです。 $(function () { $.notifyBar({ html: "メッセージ", delay: 2000, // 表示するミリ秒数 animationSpeed: "norm
Chromeのcopyは, たしか, 隠しinput[type=text]作ってcopyさせたいものをvalueにいれて, selectionStart/Endをいじって, focusあてて, document.execCommand('copy')すればJSだけでできる. http://twitter.com/Constellation/status/7188365498 これを参考にcopy関数を作ってみた。Internet Explorer、Safari、Google Chromeで動く。FirefoxとOperaで上手くいく方法は発見できず。 おまけでFirebugの入ってるFirefoxでも動くようにしてみた。 function copy(text) { var input, success; if ("console" in window && "notifyFirebug"
それなりブログ 20台後半からWebエンジニアに転生した人が書く、プログラム・無駄口とかのそれなりのブログ 管理人: kjirou 座右の銘: 「三度の飯より、四度の飯」 GoogleMapsAPIとFlashの連携をやりたいということで、 ActionScript3でFlashとJavaScriptの連携について調べました。 サンプルの実行 [ソース] (※Flashの埋め込みはSWFObjectを使っています。) 参考:マニュアル - Class ExternalInterface Flash-JS間のデータの受け渡しですが・・・ [引用] ActionScript から、HTML ページに対して次のことを実行できます。 * 任意の JavaScript 関数を呼び出す * 引数の数を名前と共に渡す * ブール (Boolean)、数値 (Number)、ストリング (S
CSS を利用したアニメーションでは、必ず現在時刻を取得するコードが入ります。 var now = +new Date; ECMAScript-262 5th では Date.now() が新しく追加されました。 Date.now() は +new Date と同じ機能(現在時刻を数値で返す)を持ちながら、new の必要がないため速そうです。 ベンチ <!doctype html><html><head><title></title> </head><body> <script> window.onload = function() { Date.now || (Date.now = function() { // Date.now が実装されていないブラウザ用の実装 return +new Date; }); job1(); job2(); } function job1() { var
var ary1 = [1, 2]; var ary2 = [1, 2]; プリミティブな値(文字列とか数値)だけが格納されている2つの配列(ary1 と ary2)の内容が、同じかどうかを確認したい場合に… function like(ary1, ary2) { if (ary1.length !== ary2.length) { return false; } var v, i = 0, iz = ary1.length; for (; i < iz; ++i) { if (ary1[i] !== ary2[i]) { return false; } } return true; } alert(like(ary1, ary2)); // true とか書いてませんか? もっと短く… alert(ary1.join(",") === ary2.join(",")); // true も
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam in leo. Nam tellus. Sed tincidunt. Nunc molestie diam sit amet orci. Ut semper. Curabitur cursus euismod turpis. Aenean quis elit ut nulla accumsan nonummy. Phasellus tristique purus quis nibh. Donec adipiscing laoreet nibh. In hac habitasse platea dictumst. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient
jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基本/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック < リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは? 今回紹介するjQuery UIは、JavaScript(Ajax)フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ&ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット(アコーディオン、日付入力、ダイアログ、スライダー、タブなど) 今回は、jQuery UIのドラッグ&ドロップ機能
Setup Make sure that you have the jQuery and hoverFlow JavaScript files included in your document like so: <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.hoverflow.js"></script> Also make sure that the jQuery-method is called when the DOM is ready, either by putting your scripts at the bottom of the document or by using the document.ready(
※このドキュメントは長くは残りませんので、必要であればハードディスクに保存してください。 オブジェクト まず、JavaScriptの根幹である「オブジェクト」について、少し触れておきます。JavaScriptは「オブジェクト指向型言語」ですから、仕組みから学ぶ時はオブジェクトの理解が必須なのです。 この言語は、ほとんどのものがオブジェクトです。なにがなんでもオブジェクトです。windowとかdocumentなどおなじみのやつを始めとして、変数も配列もオブジェクトですし、メソッドや自作の関数もオブジェクトなら、HTMLまでもオブジェクト(ドキュメントオブジェクトモデル=DOM)となります。 オブジェクトは基本的に「操作されるもの」で、ただ存在するだけです。ただし、例外として、メソッドと関数は「操作するもの」です。(機能を持ったオブジェクト、ということです) オブジェクトは、メソッドや関数、プ
TOP > WebDesign > フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」 ユーザーとサイト運営者を結びコンタクトフォーム。個人、商用拘わらず、様々なWEBページで目にします。今日紹介するのは、フォームをもっと便利にしてくれる、フォームのための実用的なjQuery集「10 Useful jQuery Form Validation Techniques and Tutorials」を紹介したいと思います。 Form Validation with jQuery from Scratch フォーム自体を配布していたり、未記入の項目を分かりやすく教えてくれたりと様々なフォーム関係のTipsが公開されています。今日はその中からいくつか紹介したいと思います。 詳しくは以下
OpenSocialアプリで外部サーバーとデータをやり取りする場合、なりすましによる不正アクセスを防ぐためにサーバー側でリクエストの認証を行う必要がある。 で、これには「署名付きリクエスト」をOpenSocialコンテナ側で送れるようになっていて、gadgets.io.makeRequest送信時に、パラメータでgadgets.io.RequestParameters.AUTHORIZATIONの値をgadgets.io.AuthorizationType.SIGNEDに指定すると署名付きリクエストとしてサーバー側に送信できるらしい。 var url = "..."; var callback = function(res) { ... }; var params = {}; params[gadgets.io.RequestParameters.AUTHORIZATION] = gadg
IE ではたぶん動きません。 友達一覧取得 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="simple mixi Appli"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <![CDATA[ <script type="text/javacript"> var req = opensocial.newDataRequest(); req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: 'OWNER', groupId: 'FRIENDS' }), { max: 1000 }), 'friends'); req.send(fu
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル(Carousel:回転木馬)は、メリーゴーラウンド(merry-go-round)のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML/XHTML(以下、HTML)は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く