$(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！ | WEMO
$(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！ 2019 8/13 先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。 どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。 コンソールを見てもエラーログは出ていない。 これまで通り記述しているのにconsole.log()さえ動かない…。 という内容でした。非常に焦ったのでその時の原因と対処法をメモしておきます。 結論から言うと、使用するjQueryのバージョンを3に変えたことが原因でした。 jQuery3からはdocument-readyが常に非同期になっている 専門的な細かいことまでは分かりませんが、 jQuery3での変更点を分かりやすくまとめてくれているQiita
Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About
Masonryの使い方：サイズの異なるBOXをタイル状に整列大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。
![Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d598cb7c9e1437f59a7459deffaf32757e9eedb/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F9%2Ftopimg_original.png)
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
レスポンシブにも対応したドロップダウン FlexNav
「FlexNav」は、クロスブラウザー（IEは7以降）対応のドロップダウンメニューを簡単に実装できるjQueryプラグインです。レスポンシブに対応しているほか、ネスト（入れ子構造）のメニューも作れるので、非常に使い勝手のいいプラグインですね。 Android 2.2以降に対応しているので、古いスマートフォンへの対応を求められる案件で特に重宝します。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、FlexNav を配布ページからダウンロードしましょう。FlexNav は github で公開されており、ページ右下の「Download ZIP」ボタンからダウンロードします。 jQuery本体と「jquery.flexnav.min.js」を、利用するWebページの body の閉じタグ直前に読み込みます。 //(中略) <script src="
BaseDemo - HorizontalNav
HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. If you've ever had to create this effect on a project, you'll know it's pretty annoying to do. But this plugin makes it easy and adds support for IE7. Example One This is an example so you can see the difference between a horizontal navigation with no fixed widths and then with a navigation
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
Ajax簡易投票所
Ajax簡易投票所は、投票所をウェブページ内に設置できる、無料のPHPスクリプトです。 Ajaxで書かれているので、投票する際にページ遷移は起きません。投票所が埋めこまれた場所で 投票結果が表示されます。ページ内の他のコンテンツを表示したまま、投票所をページに追加したい時に便利です。 Ajax簡易投票所は、インストールしたサイトで完全に独立して動作するスクリプトです。外部のサイトに依存いたしません。
Facebook中毒者に捧げるリアル「いいね！」スタンプ – 【アンケート】日本語版があったらほしい？ | Token Spoken
日本でも利用者がそろそろ200万に到達するのでは？と言われているFacebook。 皆様の周りでも使われている方が増えているのではないでしょうか？ 実際に、Facebookは私の環境でも公私ともにソーシャル・メディア・マーケティングで重要な位置につき始めています。 そんなFacebookの利用者が世界で2億人を超える中、ロンドンのNationというデザインスタジオがあるFacebook関連グッズを発売して世界中で大反響です。 それがこれ。 そうです。その名も「Like!スタンプ」。日本語にして「いいね！スタンプ」です。 スタンプの裏はこんな感じです。 そして、紙に押すとこうなります。 同社では、いいね！の逆の「Dislike!」のスタンプも取り扱っていますから、弊社としても企画書用の公式稟議スタンプとして採用したいところです。 なお、このスタンプの価格は9.99英ポンド+日本向け送料2.5
[jQueryプラグイン]jCounterを作りました。 « hayasaka修行ブログ～裏目人生脱却計画～
たまに管理画面内のログを見るのですが、以外とjQueryで数字カウントを検索している方がいらっしゃるみたいでしたので、勢いで作ってみました。 jCounterについて jCounterはカウントアップ、カウントダウンの両方を備えた入力値カウンターです。 プラグインなので、簡潔にカウンターを実装する事が出来ます。 ダウンロードはこちらから。 jCounterデモ デモページにて動きを確認する事が出来ます。 jCounterの使い方 jQueryプラグインですので、以下のようにscriptタグで呼び出します。 <script type="text" src="jquery.js"></script> <script type="text" src="jcounter/jcounter.js"></script> 次に以下のように文字数をカウントしたい要素のID等を指定してあげます。 <scr
Slimbox 2 | Webサイト制作支援 | ShanaBrian Website
Slimbox 2の使用方法をご紹介しています。 Slimbox 2は別ウィンドウ（ポップアップ）ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。 公式サイト ※ このライブラリは、jQueryが別途必要です。 目次 ダウンロードと設置 JavaScriptおよびCSSの読み込み 適用方法 キャプション オプション ダウンロードと設置 こちらからダウンロードして解凍します。 解凍後、css、jsディレクトリを任意の場所に設置します。 JavaScriptおよびCSSの読み込み 次のHTMLをhead要素内に記述します。 CSSファイルとJavaScriptファイルのパスは適宜変更してください。 HTML <link href="css/slimbox2.css" type="text/css" rel="stylesheet" m
prototype版LihgtboxからjQuery版Lightboxへの移行
2011.4.11 追記: 現在、画像の拡大表示には FancyBox を使っています。 この投稿が役に立つという方はかなり少数だと思いますが 検索しまくってやっと解決方法が見つかったので情報として載せておきます。 長時間検索して、「 コレだっ !!」 っていうのが見つかるとうれしいですよね。 そんな喜びをご提供したいと思いまして Lightbox 2 から jQuery lightBox plugin 0.5 へ 序章 リニューアル前に写真集のページで使っていた Lightbox (ページ全体が暗くなって中央に写真が表示されるエフェクト・右の画像参照) は WordPressプラグイン :: Lightbox2 prototype 版だったのですが、他のプラグインとの相性なのか、ちょっとヘンな動きをする時があったのでリニューアルついでに jQuery 版 Lightbox に入れ替えよう
jQuery
Lightboxを最新版にしたら動作がおかしくなった事などあって、Lightbox互換のSlimboxに変更しました。FC2ブログへの設置方法を、備忘録的にメモ。 Lightboxを一応解説すると、「サムネイルをクリック→同じウィンドウで拡大画像を表示する」という、あれです。下の画像をクリックしてみてください。 画像のグループ化や、拡大画像の下に解説を入れたりも出来るので、「イラスト系サイトでギャラリーみたいなのを作る」といった時に結構便利かと。→Lightbox2公式サイト Lightboxがうまく動かない 古いバージョンから最新版（v2.04）にしてみたら、いろいろおかしくなってしまった。 一部画像でLightboxが全く動作しない これは自分のミス。 Lightboxを有効にする場合、 <a rel="lightbox" href="拡大画像のURL"><img src="サムネイル
[作って学ぶ！jQuery] 第4回 ページスクロールを作って学ぶ | バシャログ。
ページ内リンクを選択したときにアニメーションしながらスクロールする機能をスムーズスクロールというみたいです。スムーズスクロールの例がjQuery でページスクロール - daily dayflowerで紹介されていましたので、そちらを参考にして、ページ内リンクに対応したものを紹介いたします。 デモ スムーズスクロール サンプル ページの最後に、TOPと中間地点へのページ内リンクを設置しました。 ソースコード $(document).ready(function(){ $('a[href^=#]').click(function(){ var target; target = $( $(this).attr('href') ); if (target.length == 0) { return; } $('html, body').animate({scrollTop: target.off
![[作って学ぶ！jQuery] 第4回 ページスクロールを作って学ぶ | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
[jQuery] ページ内をスムースにスクロールする | 広島、晴れのち晴れ
WordPressについて、というよりはホームページ作成での便利な事ですが…。 ここの記事を参考にしてページ内をスムースにスクロールする関数を作成しました（ほぼ丸写しですけど）。 使用条件としては必ずjQueryが読み込まれている事です。 // Easingの追加 jQuery.easing.quart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; /*------------------------------------- ページ読み込み中 -------------------------------------*/ jQuery(document).ready(function(){ // // <a href="#***">の場合、スクロール処理を追加 //
interiorclip.com - このウェブサイトは販売用です！ - interiorclip リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
yuguri.com
http://aroun-d.com/2012/02/21/3724/
CSS Lecture: LightBoxのJQuery版 jQuery lightBox plugin
ｊQueryを使ったスムーズスクロール | やまゆりのウェブサイト制作日記
