同じドメイン内であればjqueryのloadやajaxでいけますが、他サイト（別ドメイン）になるとできません。 そこでjqueryのjquery.xdomainajax.jsを使って外部URLのhtmlを取得する方法のTIPSです。 ファイル全部を読むこともできるし、idやclass名で一部分や特定の箇所だけ切り取って表示することも可能。 ※一部のhttpsサイトでは取得できませんでした。（原因不明） jquery.xdomainajax.jsをダウンロード 以下よりjquery.xdomainajax.jsをダウンロードします。 jquery.fn/cross-domain-ajax at master ? padolsey/jquery.fn ? GitHub ダウンロードするのはjquery.xdomainajax.jsだけでOKです。 このファイルがないと別ドメインでのファイルを取
外部ページでもスムーススクロールするプラグイン 2015.03.26 jQuery プラグイン はじめに 2015.5.10 サンプルページに外部サイトへのリンクを追加しました。 2015.5.6 スクリプトを一部修正しました。 前回の記事でつくったスムーススクロールのスクリプトをマイナーチェンジし、外部ページでもスムーススクロールするようにしてみました。 外部ページでもスクロール…、とはつまり、アンカーリンク付きの別ページを開いた時、遷移先のページでもスムーススクロールする、ということです。 サンプル 今回は、プラグイン化もしてみました。 まだ、改良の余地はたくさんあると思いますが、もし良かったら使ってください。 smoothScrollEx.js（右クリック→リンク先を保存） INDEX 使い方 仕組み jQuery Easing Pluginを使う 使い方 jQueryを読み込み、そ
ある案件でjQueryのgetJSONメソッドを使っていてgetJSONメソッドでは使いづらい部分があった。 この問題をなんとか解決できないかと調べてみたらJSDeferred（cho45.stfuawsc.com）という面白いJavaScriptのライブラリを見つけた。 jQueryのgetJSONメソッドの使いづらい点 エラーハンドリングができない $.ajaxメソッドを使えばエラーハンドリングは可能であるが、読み込むデータがJSONの場合はgetJSONメソッドの方が簡潔にコードを記述できるのでgetJSONメソッドでエラーハンドリングができるようにしたい。 複数のJSONデータが必要な場合に非同期で処理をおこなうにはgetJSONメソッドをネストさせる必要がある。 例えば以下のようなコードになる。 $.getJSON("foo.json").next(function (foo_d
Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル（ベーシック）な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe
例えば「1」〜「10」までの要素の中から３つだけランダムに抽出して表示させたい場合があります。 この際、抽出した要素が重複することなく、さらに順番も含めてランダムに表示させるにはどうしたらいいでしょうか？ 今日は、そんなときに重宝する便利な jQuery のテクニックを紹介します。 リストはもちろん、画像やブロック要素など、ほぼどんな形式にも対応できるので様々な場面で活用できると思います。 まずは jquery.randomdisplay.js と名付けた、以下の内容の javascript ファイルを用意します。 jQuery(function($) { $.fn.extend({ randomdisplay : function(num) { return this.each(function() { var chn = $(this).children().hide().length
turn.js 以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。 HTML５とCSS３で作られているようで、IE８以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。 その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。 サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。 → ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」サンプル jQueryプラグイン「turn.js」の使い方は続きをどうぞ。 まずは、こちらからzipファイルを一
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 どうもこんばんは。今回のtipsは【jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応】についてです。自動読み込みと書きましたが、クリック等の手動も可能です。結構見かける手法ですのでメモしておきます。 自動読み込み用プラグイン【infinitescroll 】 インフィニティスクロール、このプラグインを使えば簡単に自動読み込みを実現してくれます。設置方法も簡単で非常に優秀なプラグインです。 スクロールで自動読み込み <div id="blogBody"> <div class="post">….</div> <div class="post">….</div> <div class="post">….</div> </d
画像の細部まで拡大させることにより、商品などを魅力的に見せることが可能です。 今回はJaavScriptライブラリのjQueryプラグイン「JQuery.iviewer」を利用して実現します。 sponsors 使用方法 JQuery.iviewerにある、jquery.iviewer.jsとjquery.iviewer.cssをダウンロードします。 またMouse Wheel Extensionからjquery.mousewheel.jsを、もちろんjQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" href="jquery.iviewer.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascrip
jQueryで画像の特定部分を拡大させるプラグインは多々ありますが、今回紹介するax-zoomerはシンプルかつマウスホイール対応となかなか便利なものです。 sponsors 使用方法 ax-zoomerからaxzoomer.jsをMouse Wheel Extensionからjquery.mousewheel.js、そしてjQueryからjquery.jsもダウンロードしましょう。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script src="jquery.mousewheel.js" type="text/javascript"></script> <script src="axzoomer.js" type="text/javascript"></script> <script type
4月16 javascriptでsetIntervalの最初の1回はまたずにすぐに実行したい時 カテゴリ:javascriptjQuery Tweet 繰り返し処理をする時にsetInterval使うよね。 setInterval(function(){ hogehoge(); },5000) var hogehoge = function(){ なんかの処理 } ↑5秒ごとに hogehogeを実行 みたいな感じで。 スライドショーなんかを自作するときにも使う。 このsetIntervalというのは、第２引数である実行時間（上の例で言うと5000の部分）を待ってから、処理を実行するので、最初の一回の処理も5秒後に行われる。 でもたまに、最初の処理はすぐに行って欲しい、という時がある。 繰り返しの実行は5秒ごとにしたいけど、最初の1回目だけはすぐにスタートして欲しい！5秒も待ってられない！
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
新しいプロジェクトをはじめる時などに活躍するのがカウントダウンタイマーです。後何日、後何時間といった具合に刻々と減っていくタイマーを目にするとわくわくさせられるのではないでしょうか。 カウントダウンの方法は幾つかあると思いますが、今回はCSS3 Countdownを紹介します。CSS3とJavaScriptを組み合わせて格好いいタイマーを表示します。 CSS3 Countdownの使い方 CSS3 Countdownのデモです。フリップスタイルの表示になっています。 秒単位でタイマーが徐々に減っていきます。年数ではなく日数になっていて、例えばこのデモでは2080日を越えて設定されています（2020年指定です）。オリンピックに合わせたりするのは面白そうです。 使い方はこんな感じです。 <div id="CDT"></div> <script> // Set countdown limit v
「Magnific Popup」は、可変ウィンドウに対応した高機能なモーダルを実装できるjQueryプラグインです。 画像をLight box風に表示するだけでなく、ギャラリーや動画のモーダル表示にも対応しており、さまざまなエフェクトも用意されています。 また、スマートフォンで厄介なモーダル上のformの動作も問題なく動作しますので（Android 2.3／4.0／4.1／4.2で検証）、レスポンシブWebデザインで役立ってくれそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Magnific Popupを配布ページからダウンロードしましょう。Magnific Popupはgithubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 最低限必要なファイルはdistフォルダの「jquery
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
jqueryを使ってスライドショー等を作成する時、 またユーザー側で操作する際などに、 スライドが変数で操作出来ると便利。 以下のようなHTMLがあったとする。 <!-- メインのスライド --> <ul> <li class="slide0"><img src="img/dummy0.jpg" alt="ダミーです" width="900" height="400" /></li> <li class="slide1"><img src="img/dummy1.jpg" alt="ダミーです" width="900" height="400" /></li> <li class="slide2"><img src="img/dummy2.jpg" alt="ダミーです" width="900" height="400" /></li> <li class="slide3"><img sr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く