【jQuery】iframeの高さを取得し自動調整するスクリプト（Microsoft Edgeにも対応）
Webページの制作でiframeで他のページの情報を埋め込んだり、ウィジェットを埋め込んだりすることってありますよね。 このiframeは高さが決まった高さなら、CSSで高さ（height）を事前に決めてあげればよいのですが、昨今のレスポンシブWebデザインでは、iframeの高さがPCとスマホ・タブレットで結構変わってしまうことも多くて、事前に高さを決め打ちで指定できないことも多くあります。 そこで、JavaScript（jQuery）を使って、iframeの高さを自動的に設定してくれるスクリプトを紹介します。 ●HTMLで準備すること 高さを自動調整したいiframeのclassに「autoHeight」を付けてください。 例： <iframe src="http://www.example.com/" class="autoHeight"></iframe> ●iframeの高さを自
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） デモページ ダウンロード↓ こんばんは、デザイナーのOです。 まずはデモをどうぞლ(╹◡╹ლ)。 先日、「ページ背景に画像をフルスクリーンで表示させてスライドショーを流す」という案件がありました。 これの実装ですが、まっさきに考えたのはやはりjQueryプラグインでした。 この手のプラグインなら探せばそこら中にごろごろ転がってるし、あまり新鮮味が感じられないというか・・ ところが、いつものようにプラグインあさりしてたら、こんな面白い記事が目に留まった！ Fullscreen background image slideshow with CSS3 これ、CSS3のみでフルスクリーンのスライドショーを作るという試みですな！僕的には結構面白くて、特に三番目のデモ、背景
プラグイン不要！ jQueryで複数のセレクトボックスの選択肢を連動させる
プルダウンに親子関係 select要素にjQueryを使って親子関係を持たせる方法をご紹介します。 まずは実際に下記にサンプルを用意しました。 実際のソース HTML 都道府県のoption要素にdata-valがあることに注目してください。 同じ地方に属する都道府県は同じ値になっています。 <select class="parent" name="foo"> <option value="" selected="selected">地方を選択</option> <option value="北海道・東北">北海道・東北</option> <option value="関東">関東</option> <option value="甲信越・北陸">甲信越・北陸</option> <option value="東海">東海</option> <option value="関西">関西</opt
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
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.
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
AmazonアフィリエイトのクリックをGoogleアナリティクスで計測する方法
Googleアナリティクスでは、標準ではクリックは検知できません。しかし、アフィリエイトなど、外部への誘導が重要なホームページでは、その成否は把握したいものです。 本記事では、Googleアナリティクスで外部へのリンクをクリック検知する方法をご紹介します。 アフィリエイトで重要なクリック検知 自社ホームページから外部へ誘導するアフィリエイトでは、その成果は通常そのまままではわかりません。しかし、以下の図のように成否を把握できたほうが、成果に対する分析もできるようになり、好ましいといえます。 ただ、アクセス解析ツールとして普及していますGoogleアナリティクスでも、標準では離脱までは追えないです。 これでは、どのページがアフィリエイトに貢献したのかわからず試行錯誤もしにくいと言えます。 誘導先のホームページで買ったかどうかなど、本当の成果はさすがにわかりませんが、そのきっかけとなったクリッ
日付入力に便利な「Datepicker for Bootstrap」
<2014-06-16> Bootstrap3版にサンプルを変更 <2013-03-03> オリジナルのものがforkされて、より機能が追加されているようです。IE8対応化 & 日付選択用の表示カレンダーを日本語に変換できるようになっています。 スクリプト <link href="css/datepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-datepicker.js" type="text/javascript"> <!-- 日本語対応用スクリプト --> <script src="js/locales/bootstrap-datepicker.ja.js" type="text/java
レスポンシブ＆タッチ対応！スライダーjQueryプラグイン「SlidesJS」 | スターフィールド株式会社
レスポンシブサイトが増えてきて、レスポンシブとタッチの両方に対応していて、安定して動作するようなスライダーの必要性も高くなっています。 またそれに加えて、お客様からの難題に答えられるような柔軟性のあるスライダーとなると、なかなかjQueryプラグインで見つけるのは大変です。 今回そんな中探していて、シンプルですがとても使いやすいスライダーの、「SlidesJS」というjQueryプラグインを見つけましたので、ご紹介いたします。 ↓「SlidesJS」のサイト SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 コチラの特長としては、 エフェクトは普通のスライドとフェイドのみと少ないものの、 レスポンシブに強いということが挙げられると思います。 画面の幅に
jQueryを使って簡単なアニメーションを作ろう ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
こんにちは。バランスボールの上の人、稲垣です。 先日ナカムラさんの「学生アルバイトが見た！マグネッツの3つの驚き！」がアップされた後に、数名の方から「バランスボールってどうなんですか？」と質問をいただきましたが、今のところこれといった変化は感じていません。 巷ではダイエット効果なども謳われているみたいですね。 乗り始めて半年ほどですが順調に太っているので、バランスボールのみで痩せようというのは虫が良すぎるということなんでしょう。 さて、今回はjQueryを使って簡単なアニメーションを作ってみます。 一昔前にFLASHで作っていたような、サイトのメインビジュアルをちまちま動かすものです。 「米やまぐ蔵」の文字が一文字ずつ出現し、最後におにぎりの画像へ変わるアニメーションを作ってみたいと思います！ 目次 デモ htmlとcss html CSS
サイトで右クリックしたら他のサイトへ飛ばすjQuery
こんにちは、かしゅうです。 右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。 デモページ デモページは以下から。右クリックすると別ページの飛ぶので注意。 右クリックしたら他のサイトへ飛ばすのデモページ JavaScript デフォルトだと、みんな大好きyahoo.jpに飛びます。optionのurlを指定し、飛ばしたいサイトのurlを入れておけばそちらのサイトに飛ぶようになります。 (function($){ $.fn.rightClickEscape = function(options){ var defaults = { url : 'http://www.yahoo.jp/' }; var setting = $.extend(d
シンプルで汎用性が高くてめちゃ軽いJQueryプラグイン『Glide.js』を使ってスライダーを作ろう - あのねノート。
2013-09-09 シンプルで汎用性が高くてめちゃ軽いJQueryプラグイン『Glide.js』を使ってスライダーを作ろう やり方 Glide.jsは、画像や動画だけじゃなく、どんな要素でも組み込めるスライダーを作れる軽量JQueryプラグインです。 Glide.js | Simple, Lightweight & Fast jQuery Slider Glide.jsは以下の仕様となっています。 シンプルかつ軽量 レスポンシブ対応 タッチ対応 スワイプ対応 キーボード対応 OOCSS Demoを見るとわかりますが、めちゃめちゃ軽いです。 ではドキュメントにしたがって、コードを書いてみましょう。 チュートリアル ドキュメントにしたがってコードを書いていきます。 まずはJQueryとGlide.jsを読み込みます。 <script src="http://code.jquery.com/
Fullscreen Slit Slider with CSS3 and jQuery
A bene placito You have just dined, and however scrupulously the slaughterhouse is concealed in the graceful distance of miles, there is complicity. Ralph Waldo Emerson Regula aurea Until he extends the circle of his compassion to all living things, man will not himself find peace. Albert Schweitzer Dum spiro, spero Thousands of people who say they 'love' animals sit down once or twice a day to en
【★★★ - ｊＱｕｕｅｒｙ】 - クリックで開くアコーディオンメニュー
スマートフォンにも使える、クリックで開くアコーディオンメニューjQuery スマートフォン等、限られたスペースで複数のコンテンツを設置できるアコーディオンメニュー。 シンプルなコードで動作しますので、実装してみてはいかがでしょうか。 デモページ DEMO 説明 今回は2種類のアコーディオンを紹介します。 1つは「ul」で組むリスト、もう1つは「dl」で組むリストです。 なお、「ul」リストは複数開くことができ、「dl」リストは別のタブが閉まるようになっていますので使い分けて見て下さい。 JS $(function(){ $(".accordion p").click(function(){ $(this).next("ul").slideToggle(); $(this).children("span").toggleClass("open"); }); $(".accordion dt"
.htaccess(mod_rewrite)でスマートフォン向けページへリダイレクトさせる方法 | Another Sky
.htaccess(Apacheのモジュールmod_rewrite)を利用して、スマートフォンでWebサイトにアクセスされた時に、自動でスマートフォン向けページにリダイレクトする方法を検討してみたので、記録しておくことにします。 前提条件 同一ドメイン内にスマートフォン向けページのディレクトリを用意する スマートフォン向けページのディレクトリを「/spn」とする ユーザーの希望に応じてPC向けサイト・スマートフォン向けサイトを選択して閲覧できるようにする .htaccessの設定例 RewriteEngine On RewriteCond % !^/spn/.*$ RewriteCond % (iPhone|iPod|Android.*Mobile|BlackBerry|Windows.Phone) [NC] RewriteCond % !iPad [NC] RewriteCond % !
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法｜BLACKFLAG
このところ立て続けに、 Webページ上に初回アクセスのみ動画を表示させたい、 Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、 など、初回アクセス時に処理・制限を変える要望があり、 「jquery.cookie.js」を使ってのクッキー処理にて それらを制御するサンプルを作ってみたので、 メモ書き程度に紹介してみます。 今回のサンプルでは、 初回アクセス時のみページ上に「初回アクセスです。」の メッセージテキストを表示するサンプルです。 jQuery Cookie First Access Control まずは動作サンプルから。 下記のリンクをクリックして表示されるページは、 初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。 ※リロードしてアクセスが2回目以降となるとテキストは非表示になります。 ≫jQuery Cookie First A
とんかつQ&A「スクリプト」 | ホームページ作成サービス「グーペ」のキャラクターブログ「とんかつ教室」
ロースおじさんこんにちわ。わたくしとある会社で技術職をしておりますが、今回弊社のホームページに画像ギャラリーを設置しようと思っています。 http://robertnyman.com/picture-slides/demo-packages/gallery/index.html こちらのスクリプトが理想に近いのですが、最後の画像を表示したあとに最初の画像に戻るように、また最初の画像のときに「戻る」で最後の画像が表示するようにしたいのです（要するに画像の並びをループさせたい）。どうしたらいいのかわからないので助けてください！ ふーむ、なるほどねぇ。おじさんの見たところ、このプラグインには予め“loopSlideshow”っちゅうオプションが用意されとるようやから、これを“true”に設定すればええんやないかな。 ただ“loopSlideshow: true”にしても最初の画像の戻るが最後につ
jQueryプラグイン - 多角形レーダーチャートを作成 - Canvas Chart
多角形レーダーチャートを作成するプラグイン「Canvas Chart」を紹介します。 jQueryプラグイン「Canvas Chart」jQueryプラグイン「Canvas Chart」は、html5のcanvasを使って、レーダーチャートが簡単に作成できるプラグインです。このプラグインは、オプションが豊富で、項目数・線色・背景色・半径などなどレーダーチャート作成に必要なすべてが用意されています。便利なプラグインなので、おすすめです。レーダーチャートが必要なときはぜひぜひ。 デモで多角形のレーダーチャートを作成してみましたので、ご覧ください。 「Canvas Chart」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content=
404 Not Found!
404 Not Found ご指定のURLが存在しないか、ページが削除されたかも。 Powered by Toypark.in. 電脳企画法人 | 超便利COM | サブアド
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryプラグインを使わずに画像をフェードで切り替える方法 ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部