どーもです。WEB屋の岸本です。 最近、もっぱら業務アプリを作っています。 PHP+jQueryで作っているわけなんですが、 ブラウザはIEではなくGoogleChromeを使ってもらってます。 両者はJavaScriptまわりの挙動がだいぶ違うんですね。 「inputにfocusを当てると文字を全選択」ってのをググったら、 意外とないので記事にしときます。すごく簡単です。 jQueryコード $(function(){ $('input[type=text]').live('click',function(){ $(this).select(); }); }) 【解説】 focusじゃないんですねー。clickイベントを拾うんですね。 実装例 <input type="text" value="生ビール飲みたい！"/> <script src="jquery.min.js"><
HTMLのselect要素であるコンボボックスをjQueryで扱いたくて色々調べました。 一覧で見られると便利なので、まとめてみました。 <select id="target"></select> ■要素の追加 jQuery('#target').append(jQuery('<option value="1">test1</option>')); ■要素の選択 value=1を選択 jQuery('#target').val('1'); ■要素の変更のイベントハンドラー jQuery('#target').bind('change', function() { }); ■選択された要素の取得 属性valueの値 jQuery('#target option:selected').val(); テキストの内容 jQuery('#target option:selected').text()
例えばtwitterアプリのような文字数制限のあるtextareaでは、よく「あと○○文字」とか文字数を数えて表示したりすることがある。先日仕事で、iPhone用のサイトで同じように文字数を数えて表示することが あったんだけど、ちょっと変わったやり方をしたので紹介してみる。仕様としては、文字を入力する毎に文字数を数えて、「あと○○文字」と表示するというもの。最初はkeyupを使ってPCのブラウザで確認してたんだけど、実機で試してみるとどうにも上手く動いてくれない。で、調べてみたところ、keyupのイベントはtextareaの内容が更新される前に呼びだされているらしい。 参考：Ajaxian » Safari on the iPhone update fixes and breaks eventsなるほどと思い、さっそくsetTimeoutを設定して試してみるものの、英語キーボードの時は問題
twitterではそれぞれのtweetが何分前や何時間前などを表示します。 それと同じようなことがJavaScriptのjQueryプラグイン「timeago: a jQuery plugin」で実現可能です。 sponsors 使用方法 timeago: a jQuery pluginからjquery.timeago.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.timeago.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('abbr.timeago')
Posted: 2011.02.25 / Category: javascript / Tag: jQuery, Twitter Twitterのトップページは人気のツイートが次々とスライドして表示されてますね。 この記事ではjQueryを使用して見た目のスライドするだけの部分を再現してみたいと思います。 ベースとなるhtml+css Twitterの場合は裏でajax的なことを色々やっているのだと思いますが、見た目しか再現しないのでプレーンなhtmlを使用します。 html <div id="slide"> <ul> <li> <strong>2011.02.01</strong> 最初です。最初だけどむしろ最後です。 </li> <li> <strong>2011.02.12</strong> Twitterのトップページのようにコンテンツを一定の時間でスライドさせてみます。<br /
Webサイトのユーザビリティーについての注意点として 「無闇に新規ウィンドウでページを開かない」 ということがありますが、Yahooにカテゴリ登録してもらうためには 「外部ドメインへのリンク」 は 「新規ウィンドウで開く」 必要があります。このYahooの基準は、気づかないうちに異なるドメインのサイトに誘導されることでのセキュリティー上の懸念から設定されていると考えられるのですが、サイト内の大量のリンクにすべてtarget=_blankを設定するのは手間がかかります。 そこで、「JQueryで外部へのリンクにtarget=_blankを指定」を作成したのですが、このままではWordpressに組み込むのが大変です。そこで、Wordpressのプラグインとしてまとめました。古い記事に掲載しているソースコードも動作しますが、はてなブックマークなどで指摘していただいた改善点などを反映しております
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能） ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです） 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
<script> $(function(){ $("#ajax-post").load("news.php", {"http":"200","keyword":"<h3>こんばんは</h3>"}, function(text, status) { $(this).css("background-color", "#aaaaff").css("border","1px solid #000000").css("padding","2em"); }); }); </script> </head> <body> <div id="ajax-post"></div> コールバック関数が使えれば、keyword と http という POST変数を送信して、応答してきたテキスト等に、関数を使って処理を行うことができる。上のコードは、思ったとおりに動作した。 ところで、jQuery 開発者向けメモ -
Functionとかユーザー定義関数とかサブルーチンとかいろいろな言い方がありますが、あるまとまったルーチンを整理して書いておいて使うときにその都度呼び出すことができるのは大変有意義なことです。というのも無駄な処理や繰り返し処理などをできるだけ避けるという意味では、プログラムにはもう欠かすことのできない機構なのです。 jQueryではJavascriptと同様の定義方法でFunctionが利用できます。というか全く同じです。 Functionで引数を使う 引数がない場合 特に引数が必要ない場合は以下のように書けます。 FunctionのDemo 1 jQueryのコード <script type="text/javascript"> $(function(){ changetext(); //Functionを呼び出す }) func
最近 EC サイトの制作をしておりまして、商品の追加の際にページ全部を読み込み直すのはサーバーにも負荷がかかるし、利用者もストレスがかかると思ったので、部分的に Ajax で読み込んでしまおうと思って、prototype.js でやろうと思ったんですが、jQuery でもひょっとしてできるのかな？と思って調べてみたらできるようです。 Javascript を前々からやってる人は以下の記事を読むと、jQuery がどれだけ凄いか分かります。 jQueryの魔法 – ［JavaScript］All About jQuery のわくわく感を伝えてくれる記事はこれです。 ニュータイプなJSライブラリjQueryを使ってみよう！ 今回使ったコードはこれだけです。
jQueryでよくつかう”this”の親要素や子要素を指定する記述をすぐに忘れてしまうので、メモ。 /* 110131 */ 子要素指定方法についての記述で、間違いをご指摘いただいたので、訂正しました。 親要素 thisの親要素を取得する。 [javascript toolbar="true"]$(this).parent().css[/javascript] 参：jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く parentのカッコを忘れてて、子一時間悩むとかもう止めたい… 子要素 thisの子要素（ここでは<ul>）を取得する。 [javascript]$(this).children(“ul”)[/javascript] $(“ul”,this).css →これ、間違い（補足は後述） $(this).find(“ul”) →これも、間違い（補足は後述
更新履歴 2010-01-21 本エントリの内容も含めた最新の情報は下記エントリをご参照ください。 jQuery の位置・サイズ関連メソッドまとめ - Cyokodog::Diary 前回、前々回のエントリではボックス要素を例にサイズや位置、スクロール量などの求め方について書きましたが、実際のプラグインの実装においてこれらの情報が必要になるのは、ブラウザの表示領域に対してということが多いかと思います。 具体的にはツールチップなどの機能で、画面の端の要素を hover した時、ポップアップがブラウザの表示領域内に収まるように表示位置を調整するような場合に、ブラウザの表示領域のサイズやスクロール量などが必要になります。 jQuery でブラウザの表示領域をつかむ方法 ブラウザの表示領域を jQuery でつかむには、以下のような記述でできそうです。 $('html') $(window) $(
iPhoneでフリックギャラリーを実装できるjQueryプラグイン「flickGal」を作りました。ぜひ使ってみてください！ 公開にあたって意見をくれたid:hokut_o氏、ありがとうございました。 デモページ がありますので、見てみてください。 http://stakam.net/jquery/flickgal/demo ※iPhoneかiPad向けです。友達がAndroid でも動くと言っていました。PCでもそこそこ見れます。androidで最初うごかないことがあるみたいです。yuuriさんありがとうございます。android でorientation change しても動くv1.2 をリリースしました。 実装のしかた 説明ページを見てみてください。 http://stakam.net/jquery/flickgal/ 基本的にはこんな風に実装する方式です。 いくつかのルールにそっ
セレクタが便利そうなので、jqueryを使ってみました。 elementを選択するには、 id : $("#idname") class : $(".classname") tag : $("tagname") なんてのが使える 他にも便利なセレクタがありますが、名前でも選択が可能です。 以下のように書けばいいです。 $("*[name=target]") これって・・・「name」属性が"target"のものを取得するということになります。 てことは、別に、nameじゃなくても、idでも、classでも、hrefでもlangとかでも出来るらしい。 って、ただ単に、cssの セレクタ の記述方法だけど(笑) 正規表現でマッチとかもそのうちできたらいいのになぁ～ ...cssが対応すれば出来るかも?? 先は長そうな気がする(笑)
XMLHttpRequest (XHR) は、JavaScriptなどのウェブブラウザ搭載のスクリプト言語でサーバとのHTTP通信を行うための、組み込みオブジェクト（API）である。 すでに読み込んだページからさらにHTTPリクエストを発することができ、ページ遷移することなしにデータを送受信できるAjaxの基幹技術である。 XMLHttpRequestを利用したWebアプリケーションは非常に多く存在し、例として、Google マップ、Facebookなどが挙げられる。 XMLHttpRequestは、マイクロソフトがOutlook Web Access 2000のダイナミックHTMLによるウェブインターフェースに活用するため、1999年公開のInternet Explorer 5においてActiveXオブジェクトとして実装したのが始まりである[1]。その後、2001年にMozillaプロジ
私は jQuery で Ajax を使ってデータを POST で送信する際に以下のようにコードを書いていて躓きました。 var hoge = 'str&ing'; var fuga = 'string'; var data = 'hoge=' + hoge + '&fuga=' + fuga; $.ajax({ type: "POST", url: "/ajax/add", data: data, success: function() { alert('success'); } });
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
