html5のwebStorage(localStorage)でデータを保存する - Web.fla
webStorageとは 主に二つの種類があるみたいですね～。ひとつはlocalStorageともうひとつはsessionStorageです。 sessionStorage : セッションで管理してるのでブラウザを閉じるとデータが消える。 localStorage : ブラウザで永久的に保存できるのでブラウザを閉じても保存されている。 ふたつの違いの細かい話については「ブラウザでストレージ？ Web Storageを使いこなそう」に詳しく書いてあります。 さて、この機能なんですが先ほども説明したようにユーザーが使っているブラウザにデータの保存や追加・削除といったことがJavaScriptで可能となりました。 若干、クッキーにも似ていますが保存できるデータ量も違いますし、localStorageもsessionStorageも基本的には、キー（key）と値（value）をセットとして扱うため
javascriptでボタンを押すたびに複数行の追加されていく処理について - <tableid="table01"><tr><td... - Yahoo!知恵袋
こんな感じでしょうかねぇ。 まず複製する部分をtbodyでまとめてから、cloneNodeでコピーする。 name属性の後ろの数字はtbodyの数をカウントして得る。 （複製するたびに増えるのでグローバル変数を使わなくて済む） 最後にtableにappendChildする。 ボタンはtheadに置くことで対処しました。 <script type="text/javascript"> function cloneFunc(){ var table01 = document.getElementById("table01"); var tbody = table01.getElementsByTagName("TBODY"); var cnt = tbody.length; var copy = tbody[0].cloneNode( true ); var inp = copy.getEle
JavaScriptでボタンをクリックする度に、テーブルの行、列が1行ずつ追加されていくようにするにはどうしたらいいでしょうか？…
JavaScriptでボタンをクリックする度に、テーブルの行、列が1行ずつ追加されていくようにするにはどうしたらいいでしょうか？ちなみにこのような事が書いてあるJavaScriptの本もお薦め頂けたら嬉しいです。しかし本は必須ではありません。
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML <form> <table border="0" cellspacing="0" cellpad
JavaScriptでフォームテーブルを動的に拡張する方法 - abe-tatsuya.com
ユーザー入力を受けるフォームにおいて、動的に行を追加する方法を紹介します。JavaScriptでinsertRowとinsertCellを使い、テーブルの行を自由に増やせるようにするための実践的なコード例を解説します。 ユーザー側から任意の複数行のデータをフォームから受け取る場合に、入力フォームのテーブルの行を、ボタンクリックで動的に追加していく処理というのは、結構使えるんじゃないかなと思います。 例えば、以下のようなテーブルがある場合。 <table border="1" cellspacing="0" cellpadding="4" id="table1"> <tr> <th>名前</th> <th>住所</th> <th>TEL</th> </tr><tr> <td class="name"><input type="text" name="name" value="" size="
HTML要素を動的に追加・削除する
要素を追加する 基本的なながれとしては以下のようになります。 1) 要素を追加したいオブジェクト（親オブジェクト）への参照を取得。 ID名で取得（確実） 親オブジェクト = document.getElementByID("ID名"); タグ名（TABLEとかTDとか）で取得。numは０から始まる順番 document.getElementsByTagName("タグ名").item(num); 2) 追加したい要素を生成。 オブジェクト名 = document.createElement("タグ名"); 3)生成した要素の属性をセット オブジェクト名.setAtrribute("属性","値"); 4)生成した要素を親オブジェクトへ追加 親オブジェクト.appendChild(オブジェクト名); ボタンをクリックした際にJavaScriptを実行するような属性を付けたい場合がありますが、
JavaScript サンプル
JavaScript を使って動的に入力フォームの個数を変化させるサンプル。 JavaScript を有効にしてください...
クリックでHTMLを操作してフォームを追加したい
えーと、ループ番号ってのがどういうものかわかりませんが 思いっきり手をぬいてグローバルにカウンタをもたせてみました 本来なら最後の番号を見ながらそれにインクリメントするのが 正しい気はします。 （例によって挿入の都合上div_submitをクラスからidに変更しています） <script> var num=1; function addrow(obj){ var n=obj.parentNode.parentNode.firstChild; var flg=true; while(n){ if(n.nodeName=="DIV"){flg=false; break;} n=n.nextSibling; } if(flg) return false; var row=n.cloneNode(true); var n=row.firstChild; var flg=false; while(n
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
JavaScript/リンク/セレクトボックスでリンクする（選択のみ） - TAG index
フォームのセレクトボックスでリンクするスクリプトです。（選択のみでジャンプするタイプ） フレームにも対応しています。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- // 設定開始 // （フレームの場合は、表示先のフレーム名を設定してください） // （top を指定すると、フレームの分割を廃止して画面全体で表示します） // （blank を指定すると、新規ウィンドウで表示します） var target = ""; // 設定終了 function jump(){ var url = document.form1.select.options[document.form1.select.selectedIndex].value; if(url != "" ){ if(t
レスポンシブウェブデザインの画像問題を解決する「Response JS」
配布元:Response JS: mobile-first progressive enhancement in HTML5. ライセンス:MITライセンス 「Response JS」はレスポンシブウェブデザインの画像問題を解決するためのJavaScriptライブラリです。 レスポンシブウェブデザインではPCだけでなくiPhoneやAndroid、iPadなど複数の解像度、画面サイズ向けのデザインを1つのHTMLで提供します。そのため、スマートフォン向けのデザインなのにPC向けの画像が読み込まれてしまうことがあります。 「Response JS」を利用すると画面サイズごとに読み込む画像を選択できる為、無駄な画像リクエストの発生を抑えることが可能です。 Response JSの利用方法 まずはjQuery本体とダウンロードしたResponse JSのスクリプトファイルをhead要素内などで読
ウィンドウサイズに合わせて自在にJavaScriptを実行する·Response MOONGIFT
ResponseはレスポンシブWebデザインを実現するのに必要な情報を取得できるJavaScriptライブラリです。 レスポンシブデザインを実現する際にスタイルシートだけで全てをこなすのは難しいかも知れません。ウィンドウの幅に応じて最適な見せ方を実現するためにJavaScriptの力が必要ならばResponseを使ってみましょう。 テストの画面です。ウィンドウや画面のサイズが出ています。 ウィンドウサイズを縮めると値がリアルタイムに変化します。 縦のスクロール値も出ます。 各種判定値が用意されています。 ウィンドウサイズによる簡易的な判定も可能です。 もちろんこのページ自体がレスポンシブです。 Responseを使えば現状のウィンドウサイズやスクロール位置などレスポンシブWebデザインを実現するのに必要な情報が一気に取得できます。さらにリサイズなどのコールバックにも対応しているので、表示し
Lazy Load Enabled With Huge Amount of Images
Heads up!This example uses the new 2.x version of the Lazy Load plugin. For 1.x version of the plugin see the old version demo. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is enabled with only few images or where loading is triggered by a time
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
お天気アイコンサービス:ご利用方法 自由に貼り付け（パソコンサイト用標準サービス）/HTMLへの記述
HTMLへの記述(各予報表示共通) ホームページ内に天気予報を表示するためには、HTMLファイル内に、 天気予報データ取得のためのJavaScript文 天気予報表示のためのJavaScript文 を記述する必要があります。 天気予報読み込みのためのJavaScript文内にはユーザーIDや天気予報種類、予報地域を示す番号を記入します。 天気予報データ取得のためのJavaScript文 次の青色と赤色のJavaScript文をHTMLファイル内に記述してください。 ブラウザがこの部分を読み込むと、お天気アイコンサーバーから天気予報データを取得します。 <script type="text/javascript"> Wid="XXXXXXX"; Wtype="TTTTTT"; Wplc="PPPP"; </script> <script type="text/javascript" SRC=
天気情報の表示
RC-NET WEB SERVICES のダウンロードから各地のお天気情報(XML)を取得表示するモジュールを入手できる。 これは，ブログ用なので通常のページにはそのままの状態では利用不可。 そこで，通常ページにも表示できるように考えてみた。 モジュールをダウンロード（livedoor天気情報！）し解凍。解凍して出来たimgフォルダー内のindex.htmlを削除。 weather というフォルダーを作成し，上記imgフォルダーと ソース(weather_icon_replace.phpに書き換える) をweather内入れる。 次に MagpieRSS をインストールする必要がある。 magpierss-0.72.tar.gzをダウンロードし解凍して，incファイル（4つ）すべてとextlibフォルダをHTMLファイルと同じディレクトリにUPする。 しかし，日本語は文字化けをするようなの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Lecture: コンテンツ内を開閉してくれるアコーディオンメニュー ［JS］