入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」 2010年12月09日- dhlavaty/jQuery-SmartColumnScroller - GitHub 他のカラムに合わせて内容をスマートにスクロールさせられるjQueryプラグイン「SmartColumnScroller」。 通常、複数のカラムがあると、どちらかの縦の長さが長いので、下の方にスクロールしていくとどちらかが見えなくなってしまいます。 たとえば、ブログ等だと左カラムの記事部分が長くなりがちです。メインである記事を読み終えた後は、スクロールしたことで右カラムの内容も綺麗になくなっていますね。 左カラムが縦長の場合、右カラムに空白が出来てしまう このプラグインを使えば、右カラムが見えなくならないよう、右カラムがうっとうしくない具合に付いてきてくれま
Fixed Center jQuery plugin David's Web Development Blog 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」。 $(element).fixedCenter(); のようにエレメントを指定するだけで要素をセンタリング出来ます。 難しいことを考えなくてよくて1行で指定できるので覚えておくと便利かも。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル フォームに簡易電卓を組み込める「jQuery Calculator」 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン
便利そうだったのでメモ。GoogleMap をはじめ、様々な地図サービスのような ドラッグで移動したり、拡大縮小な地図 コンテンツを実装するJavaScriptライブラリ Polymapsのご紹介。地図には画像を使 い、マス目上に置いていくみたいです。 これは結構需要あるんじゃないでしょうか。地図系のJSライブラリです。既存サービスを使いたくない方はご検討になってみてはいかがでしょうか。 GoogleMapなどのようにドラッグで移動したり、縮小、拡大が可能です。地図はSVGデータをタイル状に置いて実装している感じ。オリジナリティある地図コンテンツも手軽に実装できそうですね。 地図は普通に画像が使用されています。フルスクリーンにすることも。 文字の中（といっても画像ですが）にMapを入れることも出来るみたいです。 デモも沢山用意されているのでぜひ触ってみてください。 なかなか便利そうですね。
MapBox | creating custom maps in the cloud GoogleMap風でクールな地図UIが作れるライブラリ「MapBox」が公開されています。 施設の案内や、ゲームの攻略サイトなんかでマップとかに適用すると便利に使えるかもしれません。 サイト上にはライブラリを使って実装されたサンプルがいくつか確認できますが、移動、拡大/縮小ボタンのUIがいい感じにデザインされてます。 複雑な処理もライブラリで楽に実現できちゃいますね。 関連エントリ GoogleマップやFacebook風など、自由にカスタマイズできるツールチップ「BeautyTips」 「Google Static Maps API」を使い携帯でGoogleマップを表示 Google Map APIでルート表示のjavascriptコード例
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置（fixed）で表示。 ウインドウがモーダルボックスより小さい場合は固定配置（fixed）が自動的に絶対配置（absolute）に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
YoxView - jQuery image viewer plugin 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」。 現時点で、色々なLightBoxの実装がありますが、これはなかなかカッコいいというものを見つけました。 画像をクリックすると、クリックした画像以外がグレーに暗くなります。 そこからアニメーションしながら拡大。動きは実際に見た方がいいですね。YoxView のデモ 関連エントリ かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 表示法が新しくセクシーなLightBox「SexyLightBox」 カスタマイズできる多機能LightBox「Lightview」
ドットインストール代表のライフハックブログ
広告やプロモーション、スプラッシュコンテンツを掲載したパネルをアニメーションでスライド表示させるスクリプトをJarod Taylorから紹介します。 Meerkat demo 2 パネルはブラウザの上部や下部から表示され、上のキャプチャは下部からアニメーションでスライド表示されたものです。 スプラッシュページのように全面に表示することもできます。 demo 3 スクリプトのオプションでは、ロード時の状態、パネルの表示位置、アニメーション（スライドorフェード）、アニメーションのスピードなどが調整できます。 MeerkatはjQueryのプラグインのため実装にはjquery.jsが必要です。 実装する際のサンプルコードの掲載もあります。 How-To Use Meerkat
Mengapa Warna Penting dalam Paito HK? Penggunaan warna dalam paito HK memudahkan pemain untuk mengidentifikasi pola dengan cepat. Warna-warna yang berbeda digunakan untuk menandai angka-angka tertentu, membuatnya lebih mudah untuk melihat tren yang muncul. Menyederhanakan Analisis Warna membantu menyederhanakan analisis data. Alih-alih harus membaca angka satu per satu, pemain dapat melihat pola w
GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」 2009年12月01日- GoogleMapみたいに画像をズーム＆グリグリ移動できるjQueryプラグイン「Mapbox」。 自分で実装するとなるとかなり骨が折れそうなこの機能もjQueryプラグインで簡単に実装できるみたいです。 マウスホイールでズームし、ドラッグして地図移動が可能 ズームとか移動のコントローラーを付けることも可能で、これなら初心者にも簡単に気付いてもらえますね。 設置はjQueryを使うので、マークアップでズーム用に画像を数枚置いておき、$("#viewport").mapbox({mousewheel: true}); のように初期化するだけでOKです。 オプションも多数あるのでカスタマイズも出来ます。 ズーム前後に実行できるイベントハンドラも設定可能なので、柔軟性が高い
Turning an app idea into a working reality is a more complicated task than most people might believe. However, with the wealth of software resources available on the internet, creating an app out of your idea is manageable. You don't even need to necessarily know how to develop mobile apps to make your application work. You can hire third parties or freelancers as there many places where you can f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
