RxDB - JavaScript Database | RxDB - JavaScript Database
Realtime Queries: From results of queries to single document fields, with RxDB you can observe everything which makes building realtime applications effortless.Realtime Replication: Run a two-way realtime replication with one of the many replication plugins. Also making your custom backend compatible is pretty simple.Offline Support: Store data locally on your clients device to build applications
WebデザイナーのためのJavaScript、jQueryの勉強法 - DESIGNMAP
まったくのプログラミング初心者の方を対象にJavaScriptの独学方法をのべていきたい。今回とりあげるJavaScriptの勉強法はあくまでWebデザイナー向け（もしくはフロントエンドエンジニア向け）なので、Node.jsのようなサーバーサイドJavaScriptはとりあげていない。 JavaScriptとjQueryをどちらから勉強するべきか。今回はあえて邪道とわかっていながらもjQueryにふれるという順番をとった。本来は、JavaScriptの基礎をしっかりおさえてからjQueryにすすむのが正統である。今回はトップダウン方式で実践にふれてから、基礎に戻る学習法を提案したい。 jQueryはJavaScriptを楽に開発するためのライブラリで、jQuery自体はJavaScriptのコードでできている。最初にいきなりjQueryにふれて、HTMLを動的に操作する（これをDOM操作と
Javascript ライブラリー - HTML5.JP
HTML5.JPオリジナルのJavaScriptライブラリを公開していきます。ご自由にライブラリをダウンロードして貴サイトにてご活用ください。 <meter> polyfill (jQuery プラグイン) <meter> polyfill は、HTML5 で新たに導入された meter 要素をサポートしていないブラウザーでも meter 要素がレンダリングされるようにする jQuery プラグインです。Chrome や Opera など、すでに meter 要素をサポートしているブラウザーには何も作用しません。このプラグインは、Internet Explorer 6, 7, 8, 9 でも動作します。 html5detector (Google Chrome Extentions) html5detector は、表示されているページが HTML5 でマークアップされていれば、アドレスバ
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
マンガで分かる JavaScriptプログラミング講座
はじめに 「マンガでわかるJavaScript」は、難しそうに思えるプログラムを、簡単そうに見えるマンガで解説するという初心者向けの入門講座です。 架空の高校生たちに教える形式で、プログラムの基礎から応用を、解説していきます。一通りのマンガを読めば、かなり実践的なところまで、プログラムを書けるようにしていきます。 （マンガは、左上から右下へと読みます） プログラムというと、けっこう大変そうに思えますが、この講座のテーマは「面倒くさいことを楽にする」です。面倒臭がりで、手抜き大好きの女子高生を主人公にして、楽しくプログラムを学んでいくことにします。 主な対象読者は「これからプログラムを学んでみたい人」「Webの世界に関わっていてJavaScriptを学んでみたい人」「昔JavaScriptを触っていたけど最新のトレンドが分からないので改めて学んでみたい人」などです。初心者だけでなく、Webデ
Create YouTube-like adaptable view using CSS and jQuery : Janko Jovanovic
Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed “change view” feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all
Create a Simple Infinite Carousel with jQuery
Introduction Finally, I have times for this carousel script. I always think that it's hard to figure it out, but thanks to a tutorial - Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. So, yes, I modify the code and make it into something I want, and hopefully this is what you want as well :) 1. HTML Alright, We have a main wrapper called car
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
Google Wave風のクールなヒストリースライダー作成サンプル＆チュートリアル:phpspot開発日誌
Google Wave風のクールなヒストリースライダー作成サンプル＆チュートリアルです。 jQueryを使ってGoogle WaveのクールなUIを実現しています。 スライドさせる位置によって表示させるコンテンツ量をスムーズに切り替えることが出来ます。 アニメーションが滑らかな点もGood。 左にスライドでコンテンツ量を抑制。最近のエントリだけを表示、のようなことが可能です。 一昔前では考えられなかったUIですが、こうしたＵＩを使って掲示板なんかを作ったらカッコいいものが出来そうですね。 以下のエントリを参照してください。 Making a Google Wave History Slider ? Tutorialzine
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」:phpspot開発日誌
縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 2009年10月21日- Long Dropdowns 縦に長〜いドロップダウンメニューを使いやすくするjQueryサンプル「Long Dropdowns」 ドロップダウンメニューは限られたスペース内に沢山のナビゲーションを埋め込めるということで便利なのですが、多くなって縦に長くなってしまうと、下のほうのアイテムがクリックしづらくなります。 これを使いやすくしたのが今回のサンプル。 マウスを下に移動すると、少しのマウス移動でメニュー自体が上にニュイーンと上がってきてくれます。 結果的にカーソル移動量が少なくなって使いやすくなります。 最初は驚くかもしれませんが、なれると便利ですし、一番したまでいってもループして戻ってくるという仕様なので、見逃した、という失敗も避けられます。 これは新しい上
大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」:phpspot開発日誌
大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 2009年10月22日- jQuery listmenu plugin - javascript list navigation menu control 大量のアイテムもスッキリとリスト形式のメニューにしてしまえる「jQuery ListMenu Plugin」 次のように大量のアイテムがあったとしても・・・ ↓↓↓↓↓↓↓↓↓↓↓↓↓ jQuery ListMenu Plugin があれば次のように超スッキリさせることが出来ます。 使い方はいたって簡単で、次のようにコードを書けば最低限実装できます。 $('#demo1').listmenu(); $('#demo1').listmenu( { option } ); で各種カスタマイズも可能です。 日本のサイトとしては日本語が
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル:phpspot開発日誌
Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集１００種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル
jQueryのAjax機能を使った投票システムのサンプルプログラム:phpspot開発日誌
AJAX User Poll Using jQuery and PHP jQueryのAjax機能を使った投票システムのサンプルプログラムが公開されています データはＤＢに入れる仕様で、次のような投票が実装できるようです。 シンプルなデザインなのでサイトに違和感なく組み込めるかもしれません。 ソースコードの解説記事に加え、ソースコードのアーカイブが入手できます。 改造することも出来るので参考程度に覚えておいてもよいかもしれませんね。 関連エントリ Ajax+PHP+MySQLな投票ウィジェット reddit風のGoodかBadの投票機能実装サンプル jQueryとPHPでダイナミックな投票スクリプトを作成 結果グラフがアニメーション表示のAjax投票システム
Build a Thermometer Controlled Page with jQuery « Build Internet
Hold on. Before anyone gets too excited, jQuery does not have the ability to actually monitor a room’s temperature. The thermometer we are building is a vertical slider from the jQuery UI library. As the temperature is changed on the thermometer, the page design will update accordingly. The choice to go green in today’s post wasn’t random. Actually, it’s the result of an annual one day movement in
スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」:phpspot開発日誌
jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス
jQueryを使いドロップダウン変更によって文字を大きくするスニペット:phpspot開発日誌
jQueryを使いドロップダウン変更によって文字を大きくするスニペットが公開されています。 1から実装しても全く難しいものではありませんが、それなりに使えそうなのでご紹介です。 ↓ドロップダウン選択で文字が大きくなります↓ 次のように2行で実現しているところがjQueryの素晴らしいところ。 セレクタを変えれば、特定の部分だけを大きくすることが出来ますね。 var size = $(this).val(); $("#main").css('font-size', size+'px'); ペラの１ページだけのサイトなんかに入れておくと文字を大きくできて便利かもしれませんね。 Zooming with jQuery and CSS. クッキーでサイズを保存するような機能は付いていないので、欲しい場合は付ける必要がありますが、jQuery Cookie pluginなんかを使えばこれも簡単ですね
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/07/chart-tool.html
[JS]jQueryのプラグイン33+1選 -2009年10月
IDEA * IDEA