はじめに jQuery で複数行対応の自動省略３点リーダーを付与します。わざわざプラグイン使うまでもないので、書いておきます。CSS でも可能ですが、:before や :after を使って右端に余白を設けて固定で「...」を書くなど、ちょっと見た目がださかったのでやめました。参考リンクを貼っておきますが、参考リンクの内容はウィンドウサイズを縮めたときにしか使えないですし、拡大したときに文章が枠内に収まったとしても「...」が残るなど、いろいろ未完成だったので修正しました。 参考 文字列を省略して「...」を付与する方法 意外と需要がある（泣）文字数を省略して「...」にしたい。複数行のとき！ 準備 jQuery を入れてください。 コード <script type="text/javascript"> $(function () { $(document).ready(function

親ページ内からiframe内を操作したり、逆にiframe内から親ページを操作する方法をメモ。 要素の操作をする 必要箇所だけ抜粋していますので、詳細はデモページでご確認ください。 HTML(親ページ) <div id="oya"> <input type="text" /><button>実行</button> <div id="oya-result">結果がここに反映されます。</div> </div> <iframe id="child-frame" src="child.html"></iframe> HTML(子ページ) <div id="ko"> <p>子</p> <input type="text" id="" /><button>実行</button> <div id="ko-result">結果がここに反映されます。</div> </div> JavaScript(親ペー

以前からjQueryを使ってのシンプルなスライドショーをいくつか紹介していますが やはり今後はサイト上に設置するスライドショー関連も レスポンシブに対応している必要が出てくることは必至なので 試しに作ってみたのを紹介してみます。 今回のレスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので まずは別枠表示で動作サンプルから。。 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法」サンプルを別枠で表示 サンプルでは6枚の画像を自動でクロスフェードで切り替え、 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り替えることができる形になっています。 （左右のNEXT／BACK透過ボタンで画像を切り替えることも可。） サンプルでは最大幅を「800px」最小幅を「320px」として ブラウザ幅によってスライドショー部分が拡大縮小します。

<div class="tab_wrap"> <input id="tab1" type="radio" name="tab_btn" checked> <input id="tab2" type="radio" name="tab_btn"> <input id="tab3" type="radio" name="tab_btn"> <div class="tab_area"> <label class="tab1_label" for="tab1">tab1</label> <label class="tab2_label" for="tab2">tab2</label> <label class="tab3_label" for="tab3">tab3</label> </div> <div class="panel_area"> <div id="panel1" class="ta

jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。 jQueryを使っていると、頻繁に要素のサイズや位置を取得する機会があります。 サイズや座標を取得する関数は複数あって「どれがどこのサイズ、座標を取得するの？」ってごっちゃになりがちなので、今回はサイズ、位置関係のそれぞれのjQuery関数の違いなどをまとめて紹介したいと思います。 目次 サイズ取得関係の関数 サイズ取得の基本 ページ全体のサイズやブラウザサイズを取得したい 要素の座標の取得方法 座標取得の基本 番外編：offsetParentってoffsetと関係あるの？ スクロールした距離を取得する方法

岡部です。 あると便利な憎いやつ、「トップへ戻るボタン」。 とりあえずcssで見た目を作るところから、スムーズにスクロール、少しスクロールすると表示、フッター手前で止まる、などの処理をひとつずつ解説していきます。 参考にさせて頂いたサイトはこちら！ありがとうございます。 jQueryで作るスクロールしたら出現してスクロールに追随し、フッターの位置で止まるスムーススクロール Animated Scroll to Top htmlとCSSでデザインを作る まずはボタンがないと話が始まりません。 右下に固定で表示されているボタンを、htmlとcssでデザインします。 ポイントは、position:fixed;で位置を固定する、辺りでしょうか。 下記サンプルだとcssのみで丸や三角を表現していますが、画像を使っても良いでしょうね。 スムーズにスクロールさせる このままでも機能としては十分役割を果た

queue()を使って遅延 遅延実行でdelayを使いたいけどaddClass()などだと遅延してくれない。 そんなときに下記のように設定するとちゃんと動いてくれる。 //一秒遅らせて実行 $('.js-text').delay(1000).queue(function(){ $(this).text("へんか！"); }); setTimeout()でも同じような事が出来る。 こちらの方が普通なかんじかも。 //一秒後に実行 setTimeout(function(){ $('.js-setTimeout').text("へんか！"); },1000); 実際の動き(queue setTimeout) /* クリックしたら1秒後に変化します ----------------------------------------------- */ $(".js-text").on('click

jQuery（JavaScript）が実行されるタイミングには以下の3種類があります。 パターン1.$(window).load(function() { }); パターン2.$(document).ready(function() { }); パターン3.インライン サンプルHTML 各パターンのタイミングを確認するために、以下のサンプルHTMLを作成しましたのでブラウザで実行して確認してみます。 アラートが表示される順番が実行タイミングとなりますので、パターン3-1 → パターン3-2 → パターン2 → パターン1 となっている事がよくわかるかと思います。 インラインのイベント HTMLは一番上から読み込まれてDOMが構築されていきますので、インラインで直接記述している箇所はその順番で実行されていきます。 パターン3-1に関してはブラウザの表示が「実行されていません。」のままになって

jQueryでスマートフォンやタブレットを、縦で持っているか、横で持っているか判定する 2015年03月02日 スライダー作っているときこれが必要だったのですが、忘れがちなので覚え書きです。 縦で持っているか横で持っているかページ読み込み時に調べる $(function () { var orientation = window.orientation; if(orientation == 0){ //縦持ちの処理 }else{ //横持ちの処理 } }); orientationは横持ちだと1以上の数値を返してくれるので、これで判定可能です。ただ、これはあくまでページを読み込んだ時に判定するだけなので、縦横グリグリされても反応しません。 回転時にどちら向きかを調べる $(window).on('orientationchange',function(){ var orientation

レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 #NGパターン まずはやっ

開閉するアコーディオンメニューなどに＋(プラス)のアイコンをつけて、 クリックしたら－(マイナス)や×(バツ)のアイコンに変えたい！ なんてことありませんか？ 今回は、＋と－(プラスとマイナス)、＋と×(プラスとバツ)のアイコンをクリックで切り替えるアニメーションをご紹介します。 jqueryで開閉とクラスの追加削除を行い、CSSでアニメーションを行っています。 アニメーションのデモページはこちら 上が＋と－(プラスとマイナス)、下が＋と×(プラスとバツ)のアイコンをクリックで切り替えるアニメーションです。 デモページはこちら $(function(){ $(".accordionbox dt").on("click", function() { $(this).next().slideToggle(); // activeが存在する場合 if ($(this).children(".ac

レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す

こんにちは（・∀・） jQuery入門です。前回の【jQuery】入門10. if文による条件分岐に続いて今回はswitch文による条件分岐についてです。 以前ご紹介しましたif文による条件分岐は、二つの条件を分岐処理していく方法でしたが、switch文による条件分岐は多数の条件を分岐処理していく方法になります。 if文による条件分岐でたいがいは事足りてしまいますのでswitch文を使った条件分岐を使う機会は少ないと思います。ですが、まったく使わないということもありませんし、どなたかが書いたコードを見て「何これー」とならないよう一応ご紹介しておきます。 基本構文 var num = "hoge"; switch (num) { case "hoge": alert("hogeです。"); break; case "hogehoge": alert("hogehogeです。"); break

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・