Help us understand the problem. What is going on with this article?

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

TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.

こんな要件 ページによってサイドバーの長さが異なっても大丈夫。 メインのコンテンツより、サイドバーが短い場合に、サイドバーが最後まで行ったらそこで固定される。 加えて、ウィンドウよりもサイドバーが短い場合は、下じゃなくて上に固定される。 設置方法 ソースをダウンロードして、ゴニョゴニョしてください・・・ こんなのが必要なのは恐らく玄人さんだと思うので・・・ 詳細は解説コメントを入れた「side-fixed-comment.js」をご確認ください。 ソースダウンロード　※2014.02.03　jsファイル一部修正しました。 一応ソースコード html <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="side-fixed.js"></script>

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

こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

TOPjQuery ColorboxでjQueryのモーダルウィンドウを実装する方法 ColorboxでjQueryのモーダルウィンドウを実装する方法 公開日：2015.11.20 更新日：2023.03.19 jQuery, モーダルウィンドウ Colorboxというレスポンシブにも対応したモーダルウィンドウプラグインの使い方をまとめました。 IE Testerで確認したところ、IE7でもいけました！素晴らしいです！ デモページ Colorbox配布先 ライセンス-MIT 以前ご紹介したMagnific Popupというプラグインでも似た結果が得られますが、iframeで表示した際、ウィンドウが一定の幅以下になると別ページに遷移するという点が案件に合わなかったので（これがいい場合もあるのですが）こちらを使ってみました。 用意されたCSSや画像を組み込むだけできれいに表示されますが、今回は

jQueryを使用して、一定以上の長さの文章を省略するサンプルを作成しました。 文章の省略はcss3のtext-overflowプロパティでも実装できますが、複数行には対応していません。 そのため今回は、指定した文字数以降を省略するようにします。 jQueryのバージョンは1.9を使用しています。 ■HTML class名に"text_overflow"が付いているものを省略の対象にします。 <ul> <li class="text_overflow">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</li> <li class="text_overflow">かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ</li> </ul> ■JavaScript jQuery本体を読み込み、下記を記述します。 $(function(

スマーフォトフォンをコーディングしているとiPhoneとAndroidのブラウザで若干見た目が違っている場合があります。 特にAndroidブラウザだけ意図した見え方になっていない場合が多々あります。 その場合は、Androidブラウザの場合だけHTMLタグにclass名「android」を付与してあげると簡単に対応が可能です。 ソース $(function () { if(navigator.userAgent.indexOf('Android') > 0){ $("html").addClass("android"); } }); html.android .hogehoge{ margin-top: 10px; }

<link rel="stylesheet" href="jquery.mmenu.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="jquery.mmenu.min.js"></script> htmlの記述 メニューとして表示させたい部分を任意のidを付与して囲います。ここでは　id=”menu”　の部分です。 htmlの記述のポイントは、メニューを表示させるためのボタンと、メニューが同じ親要素（ここでは#wrap）で囲われているかです。 また、その親要素の外に要素があると、メニューを表示した時に下の方に見切れたりする場合があるので、フッターなども含めて囲う要素がありそうです。 <div id="wrap"> <hea

便利なプラグインを発見しましたー^^ 異なるサイズでも指定したサイズにフィットしてくれるjQueryプラグインの紹介です。 この手のプラグインは以前から探していまして、 先日はMyThumbnailを使って美容院のスタイルカタログのページを作りました。 他にはNailThumbなんかもありますが、 今回のはなかなか使い勝手がよさそうなので、練習がてらにメモしておきます。 ■サンプル 本家デモページ ■必要ファイル jQuery jquery.imagefit.js – GitHub ■まずはサンプルを作ってみました！ サイズの違う画像ですが、ちゃんとcssで指定したサイズに変更されてますね～^^ このサイト重いですから…ちゃんと表示されてないかも…^^; ■設置方法 jQueryとjquery.imagefit.jsを読み込みます。 html <script src='http://cod

jQueryでサムネイル画像にマウスを置いた場合、メイン画像と差し替えて表示したい場合があります。 ショップシステムなどの商品画像の表示で見かけることが多いです。 また、写真などのギャラリーページなどでも同じような表示の仕方をしていることがあります。 jQueryを使用すれば簡単にサムネイル画像とメイン画像を入れ替えることが可能です。 下記にjQueryの「hover」を利用してサムネイル画像をマウスオーバーした際に、メイン画像と差し替えて表示する方法を記述します。 ■ マウスオーバーした画像をメインの画像に反映 【HTML】 メイン画像とサムネイル画像を表示します。 「mainImage」の箇所に最初に表示する画像を設定します。 <div id="mainImage"> <img src="sample1.jpg" /> </div> <div id="imageList"> <ul>

今日紹介するのは jQuery プラグインの［FlexSlider］です。 これ、かなり便利です。 レスポンシヴ対応、タッチコントロールのフリックスライドにも反応、カルーセルもＯＫ、画像にリンクを貼ることはもちろん、キャプションも表示可能、動画もスライドできる、コントロールボタンやナヴィゲーションも細かく設定できる…。まさに“超万能”のスライダー。 とにかく「なんでもできる」印象で、スマートフォン対応サイトなどでは特に真価を発揮するのではないでしょうか。 まずはサンプルをご覧ください。 【FlexSlider】→サンプルデモ 高機能ですが、その導入方法は比較的簡単です。 ［FlexSlider］の導入方法 まずは以下のサイトから［FlexSlider］のプラグイン本体をダウンロードします。 http://flexslider.woothemes.com 続いて <head>〜</head>

Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ

Modified 2015-10-17 更新情報 メニュースライドイン時スクロールできるサンプルを追記しました。コメント欄での返答で誤りがあった箇所を削除しました。 コンテンツ 部分をクリックしても閉じることができるようにするコードを追記しました。 スマートフォンやレスポンシブサイトなどでよく見かける、メニューボタンをクリックするとコンテンツを押し出してメニューがスライドインしてくる動きを jQuery と CSS で作る方法です。やってみると意外と簡単なコードで作ることができます。 サンプルデモとダウンロード ◆ 横からスライドインするメニュー demo｜memocarilog このサンプルコードは以下よりダウンロードできます。 ◆ SaoriMiyazaki/SlideIn_Menu HTMLコード スライドインしてくるメニューとメニューボタンの記述をします。 <!-- スライドメニュ

jScrollPaneの使用方法をご紹介しています。 jScrollPaneはCSSでデザイン可能なオリジナルスクロールバーのjQueryライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 デモ ダウンロードと設置 JavaScriptの読み込み 適用方法 スクロールバーのスタイル オプション デモ 次のデモは、CSSでbackground-colorとpadding、borderを指定しています。 スクロールはデフォルトのものです。 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text te