JQueryを使ってコンテンツの表示順を入れかえたい こんにちは、サポート部の市川です。毎日暑い日が続いていますが、体調などは崩されていませんでしょうか。 さて、Web制作をしていると、ページのテキストや画像といったコンテンツの順番を入れかえたいという状況がでてくるかと思います。 多くの場合、HTMLを単に書き換えるだけでよいのですが、例えばCMSでの会員登録画面の「名前」や「会社名」、「住所」といった項目の表示順を入れかえたいといった場合にシステムの都合上、設定で簡単に入れ替えることができない場合もあると思います。 今回はそのような時に、Jqueryを使って簡単にコンテンツの表示順の入れかえするための方法を紹介します。 【Jquery】beforeメソッドとafterメソッドを使ってdivコンテンツを入れ替える 次のURLで表示されるページのdivでくくられた5つのコンテンツ「A・B・C
window.addEventListener("resize", function() { alert("ウインドウがリサイズしました。"); }) Mobile Safari (iPhone 6s、iOS 9.1.2)で最初のスクロールをしてみると、縦持ち・横持ちを切り替えていないのにリサイズした旨のアラートが表示されます。 何故こんなことが起こるのか? iOS 8からスクロール時にアドレスバーが自動で小さくなる仕様となりました。これにより、アドレスバーが小さくなった分だけウインドウサイズが大きくなったと見なされ、リサイズイベントが発生するようになったのです。ウインドウサイズのことを考えれば当然の挙動なのですが、「スクロールしただけでリサイズイベントが発生する」というのはデスクトップでのブラウザに慣れている人であれば違和感を感じるのではないでしょうか。 意図したとおりにリサイズイベント
ウインドウのリサイズイベントでページの再読み込みをしたくて以下のコードを書いた。 $.fn.reload = function(){ $(window).resize(function(){ location.reload(); }) } 試しにウインドウサイズを変更したけどなぜか無反応。 でもこっちは動く。 $.fn.reload = function(){ $(window).resize(function(){ location.href = location.href; }) } ちなみにbindも同じ。 $.fn.reload = function(){ $(window).bind('resize',function(){ location.href = location.href; //location.reload();うごかない }) } これと同じだと思う。 それぞれの
入力フォームの数値に3桁ごとにカンマを付けるプラグイン「maskMoney」を紹介します。 jQueryプラグイン「maskMoney」このプラグインを使えば、伝票の金額入力でよくあるように数値を3桁ごとのカンマで区切ることができます。 123,456,789 こんな感じです。 また、オプションでは「prefix」「suffix」や区切る記号などを指定することができるので、以下のような表示も可能です。 ¥ 123,456,789 それではデモページの入力フォームをご覧ください。 「maskMoney」のデモ デモのソース(HTML + jQuery)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="maskMoney のデモでーす。"> <title>maskMone
デモを見る下記メリットがあり設置も簡単。 YouTubeのページURLをリンクに指定するだけ埋め込み用 iframe をHTMLに書いておく必要がないモーダルウィンドウを表示すると同時に動画を再生CDNが用意されている 検証済みブラウザとOSIE 9~FirefoxGoogle ChromeSafariWindows 7OS X El CapitaniOS 9Android 5 / 6 要点とコードCDNからjQueryを読み込み、専用CSSも読み込んで、専用メソッドを指定するだけ。 <link rel="stylesheet" href="css/magnific-popup.css"> <body> <a class="popup-iframe" href="//www.youtube.com/watch?v=OMyAZh_BT4s"> KISS ME </a> <a class="p
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
jQueryのnot()メソッドで複数の要素を指定しフィルタする方法 更新日: 2019/10/18 公開日: 2014/06/04カテゴリー: JavaScript not()メソッドでフィルタする今まで以下のようにnot()メソッドを何回も繋げて複数の要素をフィルタしていました。 $('a[href^=#]').not('#second a').not('#third a').not('#fourth a').not('#fifth a').click(function() { //処理 });これでも複数の要素をフィルタできますが、しかし冗長的に見えて嫌だったんですね。 それで、今回は以下のような書き方でも可能なことを知りました。 // 除外するセレクタをカンマ区切りの文字列で用意 var notList = '#second a, #third a, #fourth a, #fif
jquery-scrollstopはスクロールの開始・終了時のイベントを設定することができるjQueryプラグインです。スクロール中に実行したいもの、またはスクロールされていない時に実行したいものを自由にセッティングできるのがいいですね。 以下はjquery-scrollstopの実際のデモになります。 デモ デモではスクロールがスタートされ(スクロール中)るとテキストカラーが変更される他、画面上部に「SCROLLING PAGE」という文字が固定表示されます。 そしてスクロールをストップするとテキストカラーが変更され、「SCROLLING PAGE」という文字は非表示になります。 使い方はこんな感じでスクロール開始時と終了時に実行したい動作を設定してあげます。 $(window) .on("scrollstart", function() { $(document.body).css({
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
wordpressでサイトを構築中、jQueryを使ったコードを書き込むことがよくあるかと思います。 でも、動かない・・・。 ネットで「このコードをコピペしたら動くよ」っていうのを参考にきちんとやっているはずなのに。 でも、動かない・・・。 そんな時に役立つ「Google Chrome」を利用した原因の特定方法と、一般的な「$の別名定義」エラーに起因するトラブルの解決方法を紹介します。 1.エラー原因の特定 何はともあれコードが実行されない原因の特定を行います。Javascriptのエラーは「Google Chrome」のデベロッパーツール Developer Toolsを利用すると簡単に調べることができます。 以下の手順でエラーをチェックしてみてください。 (1) Developer Toolsを表示する jQueryのコードが実行されないページを表示した状態で、「F12」キーを押します
とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。 jQuery UIのタブ内からの別タブへのリンクしてタブを切り替えることのメモ書き。ツレの案件で少し手間取ったので、その覚え書き。 jQuery UIのタブが次のように書く。適当なJQueryとjQuery UIのCSSとJavaScriptを設定できていることが前提。この辺りは、jQueryUIのサイトに書いてある。 <link href="css/import.css" rel="stylesheet" type="text/css" /> <link href="css/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="http://codeorigin.jquery
昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。 未だ公式サイトでもアナウンスが無く、廃止になったのか否かもわからない状況です。 弊社のクライアント様でも『外部サイトのRSSフィードを読込→表示』しているサイトがいくつかありますが、もともと Google Feed API は使用せず、すべてPHPベースでプログラムを組んでいるので被害は皆無。 しかし困っている方々が大勢いらっしゃるようなので、ここで Google Feed API の代替となるテクニックを紹介していきます。 解決策はいたってシンプル。単にjQueryを利用してRSSの情報を取得して、任意のテンプレートに整形して出力させるだけ。 つまり基本的には Google Feed API のと
Result jQuery//チェックが入ってるのは背景色追加 $(":checked").parent().css("background","#f3f365"); //クリックイベント発火 $("input").click(function(e) { var t = e.target.type; var chk = $(this).prop('checked'); var name = $(this).attr('name'); チェックが入ったか入ってないかで条件分岐 if(t == 'checkbox') { if(chk == true){ $(this).parent().css('background', '#f3f365'); } else { $(this).parent().css('background-color', ''); } return true; //ラジ
はじめに jQueryに不慣れな方向けにアンチパターンを紹介する記事です。 親の要素を取得するparentはメソッドチェーンが可能で親の親の要素を取得できます。 その感覚で親の親の親の親の…とやってしまいがちですが、今すぐやめましょう。 アンチパターン <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div data='div1' class='div1'> div1 <div data='div2' class='div2'> div2 <div data='d
TOPjQuery 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 【FadeThis】スクロールしたタイミングでフェードイン・アウトを繰り返す方法 公開日:2015.11.20 更新日:2023.03.19 jQuery, アニメーション スクロールしたタイミングで、要素をスライドさせながらフェードイン・フェードアウトが出来るFadeThisというjQueryプラグインを使ってみました。 WOW.jsでも可愛いアニメーション付きで実装出来ますが、こちらは一度実行されると、再度スクロールした場合はアニメーションが実行されないため、スクロールした時の動きをいつも同じにしたい!という場合にお勧めです。 しかも、jQuery 1.x を使えばIE6+から対応しているのがとっても助かります。 ライセンスはMIT。 FadeThis-配布サイト ※2015年11月2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く