仕事で古いコードを見てたらエスケープしないといけない所でjQueryのhtml( )を使ってたりしてたので、text( )との違いなどをまとめておきたいと思います。基本的な使い方からおさらいします。 html( )について html( ) は指定した要素内のHTMLを取得、または要素内に指定したHTMLを挿入（書き換え）します。 取得の場合 ： $('セレクタ').html( ) 取得されるHTMLは要素内の全ての子孫要素までが対象です。 <div class="hoge"> <div class="title"> <h1>HTMLの取得</h1> </div> </div> <script> alert($('.hoge').html()); </script> このHTMLに対して class=hoge 要素内の取得を実行した結果が以下の通りです。 ただし指定した要素は含みません。 ま
「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
要素の中身を他の要素に追加する。 例えば $(A).append(B) とした場合にAにBが追加されるのに対して、$(A).appendTo(B) ではBにAが追加される。 両方のサンプルを見て、違いに注意すること。
要素を指定した他の要素の後に挿入する。 例えば $(A).after(B) とした場合にAの後にBが挿入されるのに対して、$(A).insertAfter(B) ではBの後にAが挿入される。 両方のサンプルを見て、違いに注意すること。
前回の記事「レスポンシブのサイトでスマホの時だけtelリンクを有効にする」の続きです。 前回紹介した記事の記述では、単純に 「ユーザーエージェントが『iPhone』『Android』であるデバイス」のみ、 電話番号にtelリンクを設定しました。 しかし、実はこれだけでは以下のような問題があります。 ユーザーエージェントに「iPhone」を持つデバイスの中には、「iPod」も含まれる。 ユーザーエージェントに「Android」を持つデバイスの中には、「Androidタブレット」も含まれる。 電話をかけることのできないiPodやタブレットで、 電話番号にtelリンクが設定されるのは好ましくありません。 そこで、 「ユーザーエージェントに『iPhone』を持つデバイスのうち、『iPod』も含むものを除外」し、 「ユーザーエージェントに『Android』と『Mobile』を含むもの」にtelリンク
レスポンシブなWebページでは、スマートフォンからの閲覧時には電話番号をタップで発信出来る様にしたいので、jQueryで対応しました。 <a href="tel:00-0000-0000">電話をかける</a> 上記のようなtelリンクを使うとスマホから発信出来るようになるので、ユーザーエージェントを判別して、スマホからのアクセスの時のみhtmlを書き換える処理をします。 電話番号の表示を画像でデザインすることも多いので、画像の場合はaltの内容を番号に指定します。 【JS】 $(function(){ var ua = navigator.userAgent; if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0){ $('.tel-link').each(function(){ if($(this).is('img')) {
「売れている楽天のショップ」 「担当のECCからここを参考にしたら良いと言われたショップ」 「なんかかっこいいなと思ったショップ」 それらのショップにはほとんどの場合「動くバナー」が設置されていたりしませんか？ 「どうやってやるんだろう」「うちの店舗では無理だな」そんな風に思っている担当者の皆様ご安心下さい。ハカセの研究室なら簡単にコピペだけで導入出来ます。しかも無料です。 今まで出来なかった事が出来る。そう、jQueryならね。 いきなりうざい感じで始まりましたが、本日はやってみたいと考えてる方も多いはずの「jQuery（ジェイクエリー）」を使用した動くバナーの導入方法を説明します。 jQueryとは？ オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Tea
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
jQuery Spectragram Instagramから写真を取ってきて表示できるjQueryプラグイン「jQuery Spectragram」。 APIをJS経由で叩いて、タグ、ポピュラー、指定ユーザの写真をフェッチしてページに表示することが出来るようになります。 APIを使うためDevTokenとClientIDが必要になります 自分の撮った写真をサイト上にお手軽に表示したい場合に使えそうです 関連エントリ 画像をアップしてInstagram風エフェクト等様々な編集も可能なBootstrapベースのアプロダ「Filepicker.io」 PHPでInstagram風に画像フィルタをかけられるクラスライブラリ
少し前に小規模のローカル地域での 店舗検索サイトのお手伝いをさせて 頂いたんですが、その時に使った Tipsです。WordPressのカスタム フィールドに住所を入れるだけで、 地図が表示されるようにする。 カスタムフィールドに住所を入力すればGoogleマップが自動で表示されるようにする、っていう方法。 住所入力でGoogleマップを表示する APIを使います。これは少し前にjQueryでやる方法を知人に聞かれたので記事を書きました。 APIと少しのjQueryコードでGoogle Mapの地図の色を変更する なので細かい解説は割愛します。 コード ではコードです。 API <script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」
Coda-Slider 1.1は、先日紹介したCoda-Slider 1.0からバージョンアップをした、タブ型のコンテンツをスムーズに移動させて切り替えるスクリプトです。 Coda-Slider 1.1 Coda-Slider 1.1 デモ Coda-SliderはjQueryのプラグインで、1.1の主な改良点は下記のようになっています。 jQuery 1.2への対応 IE6, 7でタブを早くクリックした場合のバグ スクリプトオフへの対応(<noscript>) YouTubeなどの動画のバグ preloaderの採用 タブと矢印以外にもスライドするリンクを設置可能 参考： スムーズに切り替わるタブ型コンテンツ -Coda-Slider
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く