jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずは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
javascriptで任意のデザインのソーシャルブックマークボタンとカウントを作成する | CreativeLife
CreativeLifeソーシャルブックマークボタン設置方法 はてなブックマーク数、facebookいいね数、Twitter言及数等の数を取得して、上の画像のように任意のデザインで表示する方法です。そのままの公式のjava scriptを使うよりかは軽量化できていると思います。 スポンサーリンク コードの記述 以下はwordpressで使っている記述ですが、コードを弄ればアメーバブログやFC2等他のブログでも対応させる事ができます。TOPページなどの複数の記事が表示されるページで使っています。 html jqueryを使うので読み込ませて置きましょう。あと、jsファイルも作るので読み込ませておきます。最新のjQueryではIEのoldバージョンは切り捨てているので、IEとその他のブラウザで読み込ませるjQueryを分けています。 if(is_home() || is_category()
jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法
jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。 ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。 が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたところ、jQuery UIのtoggle()で期待する動作になることが分かりました。 jQuery UIのtoggle()については、公式ドキュメントのAPIで公開されているのですが、本エントリーで紹介するような詳細な指定方法が書かれていないので、備忘録で本エントリーに残しておきます。 １．jQueryのslideToggle()でスライドさせる まず、jQueryのslideToggle()と使った
[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions
画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.js"></script> <script src="js/jquery.hcaptions.js"></script> Step 2: スクリプトの準備 キャプションを表示に付与するclassを定義します。 $(window).load(function(){ $('.hcaption').hcapt
jQuery 1.9 final, jQuery 2.0 beta, Migrate final released | Official jQuery Blog
jQuery 1.9 final, jQuery 2.0 beta, Migrate final released Are you sitting down? Well sit down, in front of your computer, and start downloading. We have several new jQuery releases for you to test. For your convenience, jQuery can even be downloaded while standing. First up are the final versions of jQuery 1.9 and jQuery Migrate 1.0. We think these releases are pretty solid, because very few of yo
[JS]エクセルやスプレッドシートのように美しく機能的な表を作成するスクリプト -ParamQuery grid
HTMLで作成した普通のテーブルでも、Microsoft OfficeのエクセルやGoogleのスプレッドシートのように美しく機能的なテーブルにする軽量のjQueryのプラグインを紹介します。 ParamQuery grid ソート、セルサイズの変更、インライン編集などもできます。 ParamQuery gridの特徴 ParamQuery gridのデモ ParamQuery gridの使い方 ParamQuery gridの特徴 商用利用可のオープンソース。 データのフォーマットはHTML, Array, XML, JSONなど。 ソート、ページング、カラムのリサイズに対応。 デザインはテーマでカスタマイズ可能。 バーチャルスクロール・レンダリング。 セルのインライン編集。 対応ブラウザはIE6/7/8をはじめ、主要な全てのブラウザ。 サーバーサイドのフレームワークはASP.NET,
【jQuery】画像をセンタリングして指定エリアに収めてくれるimgCentering.js – CamCam
指定したブロック範囲にいろいろなサイズの画像をセンタリングしてきっちり収めてくれるjQueryプラグイン、imgCentering.jsが便利だったのでご紹介。 この手のプラグインはいくつかありますが、色々試した中では一番シンプルで使いやすかったです。 imgCentering.js デモはこちら 上下左右余白無しにきっちりフィットさせる一番下のタイプがよく使われそうです。 $('.imgset4 img').imgCentering({ 'forceSmart': true //centering without showing background }); ‘forceSmart’: true と言うオプションを入れるだけ。 HTML上でも簡単に実現できてPHPやGDなど画像処理エンジンを必要としないので手軽でいいですね。 jQuery 1.7.1 以上が必要です。
マウスホイールで画像をズームさせるjQueryプラグイン・jQuery Wheelzoom - かちびと.net
マウスホイールで画像を拡大、ドラ ッグ操作によるスクロールが可能な jQueryのプラグイン、jQuery Wheelzoomのご紹介です。シンプルで いいですね。IEは9からの対応だそう なので利用シーンは若干限られそ うですけど。 マウスホイール操作による画像のズームや、ズーム後にドラッグ操作でスクロールも可能にするスクリプトです。 マウスホイールで画像をズームします。それだけと言えばそれだけなんですけど、結構軽量なので一応覚えておくといいかも。 Sample 動作サンプルですー ドラッグ操作も可能です。タッチイベントへの対応は・・・別途コードを用意しなきゃかな（確認してない タッチイベントと合わせてスマフォ向けのECサイトなんかに導入したり、というのも良さそうだけどピンチイン/アウトにも対応しないとですかね、多分。 コード <script src='http://ajax.googl
YOUNG FLAVOR | ちょっとがんばるぶろぐ！
Young Flavorは、ウェブ開発やWordPressに関する情報を提供する日本のブログサイトです。近年、このサイトは金融市場におけるトレーディングプラットフォームとの協力を拡大しています。 FxPro Trading Platformの紹介 FxProは、世界的に有名なオンライン外国為替ブローカーであり、先進的な取引ツールと豊富なリソースを提供しています fxpro mt4 ダウンロード。ユーザーフレンドリーなインターフェースと高度な分析機能により、初心者からプロフェッショナルまで幅広いトレーダーに支持されています。 Young Flavorの役割 Young Flavorは、FxProの日本市場への展開をサポートしています。具体的には、ブログ記事やチュートリアルを通じて、FxProの使い方やトレーディングの基本について解説しています。これにより、日本のトレーダーはFxProのプラッ
+BLOG
+BLOG ヤバイ！AMAZONプライムデーでこれ買った！ベスト1 2023/7/12 地元民が選ぶ名古屋グルメおすすめ12選 2022/7/22 モンブランクレープが食べられる『IVY’s GELATO&Coffee』 2022/7/8 2022/7/11 洗車後のコメダ新作『ミルクロネージュ』が身体に染みた 2022/7/3 真夏日PM3:00地獄のジムニー洗車 2022/7/2 『ブルーボトルコーヒー』でワッフルコーヒータイム 2022/7/1 灼熱地獄で食べるレッドチリスモーキーワッパー 2022/6/30 毎年恒例のすき家でニンニク祭してきた 2022/6/29 2022/6/30 小袋ナッツどれがいいんだ問題を解決する 2022/6/28 買うべき名品！ドンキの『ナッツ&デザート』 2022/6/27 +BLOGは名古屋のフリーランス個人ブログです！ 人気記事 ヤバイ！AMAZ
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」
画像を遅延ロードする定番jQueryプラグイン「Lazy Load」を紹介します。 １．概要 jQueryプラグイン「Lazy Load」を使って画像を遅延ロードさせることで、ページロード時のHTTPリクエストを減らすことができます。 以前、「Lazy Load」を使っても新しいブラウザではHTTPリクエスト回数が減らない問題があったようですが、2012年11月現在は改善されています。 参考：HTML5時代のjquery.lazyloadは画像のdata-original属性を使う 改善後の仕組みは、img要素のsrc属性にダミーの画像ファイルを指定しておき、ページロード後にスクロールによってimg要素が表示領域に入った段階でdata-original属性に指定した画像を読み込みます。 <img src="grey.gif" data-original="foo.jpg" width="6
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
ノンプログラマーのためのjQuery生成ツール
変更履歴 2013.03.13 toggleClassが2つ表示されていたため、1つに修正しました on/offを追加しました（1.7）※イベントには追加していません。別途対応します addBackを追加しました（1.8） finishを追加しました（1.9）
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
+BLOG
+BLOG ヤバイ！AMAZONプライムデーでこれ買った！ベスト1 2023/7/12 地元民が選ぶ名古屋グルメおすすめ12選 2022/7/22 モンブランクレープが食べられる『IVY’s GELATO&Coffee』 2022/7/8 2022/7/11 洗車後のコメダ新作『ミルクロネージュ』が身体に染みた 2022/7/3 真夏日PM3:00地獄のジムニー洗車 2022/7/2 『ブルーボトルコーヒー』でワッフルコーヒータイム 2022/7/1 灼熱地獄で食べるレッドチリスモーキーワッパー 2022/6/30 毎年恒例のすき家でニンニク祭してきた 2022/6/29 2022/6/30 小袋ナッツどれがいいんだ問題を解決する 2022/6/28 買うべき名品！ドンキの『ナッツ&デザート』 2022/6/27 +BLOGは名古屋のフリーランス個人ブログです！ 人気記事 ヤバイ！AMAZ
jQuery 1.8.0 ～ 1.8.3 での変更箇所の自分なりのまとめ | 私的なjQuery他
jQuery 1.8 , 1.8.1 , 1.8.2 , 1.8.3 のリリースノートを読んで、自分なりにまとめました。 といっても、1.8.1 と 1.8.2 、1.8.3は ほぼバグ修正メインなので、 1.8.0 だけのまとめとあまり違いありません。 誤訳による勘違いなどもあると思われるので、 読まれる際はご注意を。（※ページをそのまま訳したわけではありません） 箇条書きにすると以下のような感じ： Sizzle の書き直し アニメーションの見直し オプションにコールバックprogress, always, done, failを 追加 オプションにコールバックstart追加 animation オブジェクト Prefilters tween, tweener, jQuery.Tween.propHooks CSS のプレフィックスを自動化 $(html, props)のpropsでの指
WOW Slider - ｋ本的に無料ソフト・フリーソフト
jQuery で動くスライドショーを、超簡単な操作で作成することができるソフト。 ドラッグ＆ドロップで放り込んだ画像ファイルを元に、スタイリッシュでエフェクト感のあるスライドショーを手軽に作成することができます。 基本的に、素材画像 / スライドショーのテンプレート / トランジション効果 （画像の切り替え効果） の種類 / 出力サイズ 等を指定するだけで使えるようになっています。 「WOW Slider」は、超簡単に使えるスライドショービルダーです。 ドラッグ＆ドロップで放り込んだ画像ファイルを元に、jQuery で動くエフェクト感たっぷりなスライドショーを作成することができる... というシンプル （だけど高性能） なスライドショー作成ツールです。 （スライドショーは、Flash なしの環境でも再生できます） デモギャラリー 操作は基本的にテンプレートを選ぶだけで、インターフェースも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
超絶簡易的、画像のaltをtooltipで表示するjQueryのコード | CreativeLife
Loading...