[jQuery] ものすごくシンプルなタブメニュー | IT女子のお気に入りフォルダ
タブメニューを実現する方法は検索すればいろいろ出てきますが、これが一番シンプルなんじゃないかなーと思います。 Result $(function() { $(".tab li").click(function() { var num = $(".tab li").index(this); $(".tabContent").removeClass('active'); $(".tabContent").eq(num).addClass('active'); $(".tab li").removeClass('active'); $(this).addClass('active') }); }); css ul.tab { list-style: none; } ul.tab li { float: left; margin-right: 10px; padding: 10px; backgr
![[jQuery] ものすごくシンプルなタブメニュー | IT女子のお気に入りフォルダ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8ff61e37cea4bc70ba80fdbe58c1fc3045e80753/height=288;version=1;width=512/https%3A%2F%2Fsachips.byeto.jp%2Fwp%2Fwp-content%2Fuploads%2F2013%2F10%2Fdonatutakusan.jpg)
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
「Stellar.js」を使ったパララックスエフェクト | ブログ - Blog | 佐藤純平 - Jumpei Sato
Stellar.js とは パララックスの実装に使えるjQueryプラグインです。 それぞれの要素の縦横のスクロール速度をずらすことができます。 デモ それぞれで縦のスクロール速度をずらしています。 DEMO 使ってみる ますダウンロード こちらから 設置する jQueryも忘れずに読み込みましょう。 <script src="js/jquery.stellar.min.js"></script> 対象の要素またはwindowに対して使用します。 $(function(){ $(window).stellar(); }); ソース まず縦横のスクロールを設定します。 horizontalは横、verticalは縦を指します。 $(window).stellar({ horizontalScrolling: true, verticalScrolling: true, }); 要素を動かした
レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 - ONZE
レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。 初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。 bxSlider 最初に紹介するのが［bxSlider］です。 設定が簡単で初心者にも扱いやすく、本当に初めてjQueryに触れるなら一番初めに試してみることをお勧めするスライダーです。 ただしカルーセル化するとレスポンシブ機能に不具合があるのが残念なところ。 ダウンロードURL
jQuery Plugin - ページ内リンクをゆっくりスクロール - Smooth Scroll
ページ内リンクのゆっくりスクロールを実装するプラグイン「Smooth Scroll」を紹介します。 jQueryプラグイン「Smooth Scroll」「Smooth Scroll」は、IDや要素を指定するだけで簡単にページ内リンクのゆっくりスクロールが実装できます。 IDや要素の選択についてはこちらを参考にしてください。 jQuery入門オプションでは「スクロールの速度」や「アニメ効果」を指定することもできます。 デモをご覧ください。左サイドに固定メニューがあるので、リンクをクリックしてみてください。ゆっくりとスムーズにスクロールします。 「Smooth Scroll」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>Smooth Scrollのデモ - jQueryまとめのカル
iPhoneやiPadで2回タッチしないとリンクが反応しない問題について【スマートフォン】 フラップイズム
どうも、くーへいです。 制作している段階で少し詰まった部分がありましたので、メモの意味も含めて記事にしたいと思います。 iPhoneやiPadでタッチが反応しない？ あるお客さんから、サイトの動作が重いということで、改善できないかという相談をいただきました。 そのサイトは、レスポンシブによって構築されており、タイトルをタッチすると中身が開く仕組みになっていたのですが、その動作が重いという相談でした。 私は所持しているスマートフォンはAndroidで、お客さんはiPhone。 Androidではサクサク動くため、社員にiPhoneを借りて検証していましたが、不思議な現象が起きていたのです。 ざっと動作をまとめると以下のような感じでした。 Android ： 不具合無し iOS 8.1.1 ： 不具合無し iOS 8.4.1 ： タイトルを2回タッチしないと内容が開かない どうやら、タイトルを
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
jQueryでタブメニューを実装（画像メニュー版）
jQueryでタブメニューを実装（画像メニュー版） jQuery2010年8月12日 こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。 私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル HTML <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a><
マウスオーバーした画像にフェードイン効果（半透明）をつけるjquery - WEBデザインを学ぶ｜こゆきんのWEBの細道
ポートフォリオで使用した、画像をマウスオーバーすると、半透明にフェードインして行くjqueryを備忘録用に記録。 このリンク部分で使用しました。 http://webdesign7.main.jp/portfolio/ CSSで半透明効果を出す方法 しかし、徐々に透明になるふわっとした感じは出ない様です。 a:hover img{ opacity:0.6; filter: alpha(opacity=60); } jqueryで、マウスオーバーしたら透明度を変える方法 1：最初にheaderに，jQuery本体を読み込む <script type="text/javascript" src="js/jquery.js"></script> 2：Queryの処理を記述する $(document).ready( function(){ $("#gallery img").hover(funct
スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!が終了しました。
スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!が終了しました。 2014年12月10日に67WSで行われた無料のイベント「スマートフォンサイトマークアップ viewportとjQueryを改めて理解しよう!」が終了しました。 viewportやjQueryのバージョン情報など狭いテーマでしたので多くの方にご参加いただきありがとうございました。 セミナーで利用したスライドを公開します。 また、以下の様な質問をいただきました。 Q.テスト環境が外部公開されていない(IP制限等)ことがおおいのですがそういった場合の検証方法はどのようなものがありますか？ 単純な開発はGoogle ChromeのスマホのエミュレーションやMacの方はiOSシミュレータを利用するとよいでしょう。 (参考：Google Chrome 37でスマホのエミュレーションを行う - to-
IE8 + jqueryでselect要素を複製(clone)した後にoption要素を編集するとエラーが生じる | アバダバー＠ブログ
アバダバー＠ブログ なにを勘違いしたか、会社辞めてWEB系フリーランスエンジニアになっちゃったキチガイの備忘録ブログ。ジョキアーモ！！ jQueryでselect要素をまるっと複製(clone)して、その後に＄(this).append(“～～”)や＄(this).empty().html(“～～”)などでoption要素を編集すると、IEでのみ、かな～りヘンな挙動になり、問題が生じる（Firefox、Chromeでは無問題）。 option要素は正しく追加されているのに、プルダウンを出してみると変更前の表示が残っていて、選択すると新しいデータが反映される・・とか意味わからん現象になる。 ↓初期表示は「＜option＞ほげほげ＜/option＞」としとく。 ＄(this).empty().append(“＜option＞うがうが＜/option＞”);としてoption要素を入れ替える。
2014年総まとめ、jQueryのプラグインとスクリプト100選
毎年末にjQueryのプラグインをまとめていましたが、今年はプラグインの他に単体で動作するスクリプトも加えて、jQueryのプラグインとスクリプトの総まとめとして記事にしました。 今年目立ったのは、去年から引き続きアニメーション系、縦長ページ用のスクリプトでしょうか。 1カラムのレイアウトが流行っているためか背景関連も充実していました。それとSVGをより簡単に利用できるようになったのも大きな目玉ですね。 また、jQueryに依存しない、単体で動作するスクリプトも多く開発されるようになったと思います。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェ
非プログラマーがまとめた完結版！初心者でも解る WordpressでjQueryが動かなかった時の3つの直し方
非プログラマーがまとめた完結版！非プログラマーがWordpressを使ってサイトを作って使用したjQueryが動かない時にやる３つのことを紹介しています。またWordpressにjQueryを読み込ませる方法も紹介しています。wp_head()はWordpressで運営している人なら必ず記述しないといけないタグの１つです。 wp_head()とwp_footer()が抜けているとlight boxやらプラグインやら色々動かなくなる事があります。 そしてよく間違えて記述してしまうのが、wp_head()の直後にjQueryを記述してしまうことです。 本来の正しい記述は下記。 <title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?>
これだけは抑えておきたい！ jQuery や CSS の「イージング」の基礎知識
この"easeInQuad"にあたる部分が、イージングです！ イージングを設定することで、動きに、勢いや波をつけることができます。 イージングを設定して、ボールを左右に動かしたものがこちら！ ちなみに、イージングがないとこんな感じです。 イージングを使いこなそう！ イージングは結構、種類が多いです。 例えば、jQuery Easing Pluginでは、なんと30種類以上のイージングが用意されています！ でも、30種類もあっても、ぱっと見、違いがよくわからないなんてことありませんか？ 今回は、私の独断と偏見で、jQuery Easing Pluginのイージングを中心に、 それぞれのイージングの特徴と、使いどころを紹介します！ ちょっと、注意事項 CSSや、jQueryでのアニメーションのやり方 今回はアニメーションのやり方そのものについては、説明を省き、イージングの話を中心に書きます。
jQueryプラグインで背景画像をスライドショー「Backstrech」
背景画像全面に画像を置いて、切り替えるとインパクトがあります。 また写真さえよければ、その上にテキストを載せるだけでも良いデザインにすることができちゃいます。 jQueryプラグインのBackstretchはもともと画像をウィンドウ幅にあわせて背景ぴっちりに表示してくれるスクリプトですが、これをスライドショーにも活用できます。 sponsors 使用方法 Backstretchからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.backstretch.js"></script> <script> var images = [ "画像パス1", "画像パス2", "画像パス3" ]; $
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery タブ切り替え | 私的雑録
http://mmenu.frebsite.nl/
色やサイズが自由に変更できる星形レーティング機能実装「starwarsjs」:phpspot開発日誌
Galleriffic
Easy & Responsive jQuery Carousel Slider Plugin - FilmRoll