3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
aタグの無効化 - preventDefaultとreturn falseの違いとか - Qiita
preventDefault(); を使う 親要素へのバブリング（伝達）を保ちながら、aタグのリンク機能を無効化する。 <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="./hoge.js"></script> </head> <body> <section id="Container"> <div id="Content"> <a href="#">クリックは無効化されるけど、divにhogeクラスが追加される</a> </div> </section> </body> </html>
JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる - Qiita
レスポンシブデザインとかの横幅100%をJQueryで処理 こんな時に便利 video要素ではwidthおよびheight属性は、パーセントでの値指定が出来ない レスポンシブデザインされていないページを処理する場合 読み込み時とリサイズ時を同時に処理する 読み込み時だけで処理するとブラウザサイズを変更した時に対応出来ないので、 JQueryではloadとresizeを合わせて記載すればOK!
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 – bl6.jp
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
jQueryで子要素を取得するいくつかの方法〜children,find,contents
セレクタで子要素を指定 >（大なり）でつなげる $(‘div > p’) 親要素の直下にある子要素を取得し、孫要素などは取得できません。 スペースを空ける $(‘div p’) 親要素内にある子要素や孫要素を取得できます。便利なのでよく使います。 サンプル
jQuery ドロップダウンメニュー | 私的雑録
$(function () { $('span').click(function() { if ($(this).attr('class') == 'selected') { // メニュー非表示 $(this).removeClass('selected').next('ul').slideUp('fast'); } else { // 表示しているメニューを閉じる $('span').removeClass('selected'); $('ul').hide(); // メニュー表示 $(this).addClass('selected').next('ul').slideDown('fast'); } }); // マウスカーソルがメニュー上/メニュー外 $('span,ul').hover(function(){ over_flg = true; }, function(){ ov
jQueryでドロップダウンメニューを手作りするを理解する入門。 : 森のコーディング
7月30 jQueryでドロップダウンメニューを手作りするを理解する入門。 カテゴリ:jQuery Tweet 今日ちょっとつまったので調べながら解決した。 まずこちらをの記事をご覧あれ。 「jQueryで作る多階層ドロップダウンメニュー」 http://ascii.jp/elem/000/000/475/475908/ cssまわりは、はしょります。 jquery部分の記述を見ると、こうなっている $(function(){ $("ul.sub").hide(); $("ul.menu li").hover(function(){ $("ul:not(:animated)",this).slideDown("fast") }, function(){ $("ul",this).slideUp("fast"
is(expr) - jQuery 日本語リファレンス
要素集合のうち、1つでも条件式に合致する要素があればtrueを返します。 もし何の要素も一致しないか、条件式が不正であればfalseが返されます。 jQuery 1.3からは、引数に全てのセレクター書式が指定できるようになりました。例えば"+"や"~"、">"のような以前は常にtrueを返していた階層構造を示す書式も、きちんと評価されます。 内部的にfilterを使っているので、条件式のルールは同じになります。 divがクリックされた場合に、以下のルールでメッセージを表示。 要素が最初の子要素である → “It's the first div” blueもしくはredというクラスを持っている → “It's a blue or red div” “Peter”という文字列を含む → “It's Peter!” 上記以外 → “It's nothing special” <div></div
【jQuery】 $(this)の親要素、子要素、隣接要素を指定する – マーカーネット株式会社
jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの～!? なんて思いましたが大きな違いですよね。 そして次につまづいたのが、$(this)の親要素、子要素、隣接要素やらは一体どうやって指定するのだろ～～～でした。 <div> <ul> <li class=”menu01″><span class=”sp01″>メニュー01</span></li> <li class=”menu02″><span class=”sp02″>メニュー02</span></li> <li class=”menu03″><span class=”sp03″>メニュー03</span></li> </ul> </div>
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
darktooltip: A simple customizable tooltip with confirm option and effects
darktooltip Star Tweet darktooltip is a simple customizable tooltip with confirm option and effects Basic usage: <div id="def" class="box" data-tooltip="Hello world">default</div> $('#def').darkTooltip(); Advanced options You can specify some options to customize the appearance of darktooltip. Like this: $('#def').darkTooltip({ animation: 'flipIn', gravity: 'west', confirm: true, theme: 'light' ..
Lazy Load(画像の遅延読み込み)を実装する方法
レイジーロード(遅延読み込み)とは、その名の通り、画像を遅れて読み込ませるテクニックのことです。具体的には、ユーザーがスクロールをして、目的の画像が画面内に映るタイミングで、初めて読み込みを実行します。「遅れて」というよりは、「適切なタイミングで」と言った方が正確でしょうか。さて、このことはどのような意味を持つでしょうか？ 転送量の節約ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問して「やっぱ止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。基本的に、ブラウザは訪れた時点で、ページの全ての画像を読み込みます。 このページに、仮に100枚の画像が掲載されていたとしたらどうでしょうか。ちょこっと訪問されるだけで、毎回、見られてもいない大量の画像の転送が発生してしまいます。余計な転送が発生することで、運営者側にとってはサーバーコストが増える、閲
今風になった！Web制作で使える最近のjQueryプラグインまとめ
作成：2014/10/14 更新：2014/11/01 Web制作 > 比較的最近のプラグインで、今風の動きをするものなど、制作前に知っておくと助かるjQueryプラグインをまとめました。国内のサイトであまり取り入れてないようなものや、定番のものまで。ページにちょっとした工夫を凝らしたいときや、少しめずらしい仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動き １．ジオメトリック 背景 ２．フルスクリーンでスライドさせる ３．ドロアー風ライトボックス ４．動画を再生するタイプ３つ スクロール ５．スクロールでクロスフェード ６．スクロールで奥行きを表現 ７．スクロールで分割 画像 ８．APNG ９．Google 画像検索風ライトボックス １０．トイカメラ風のフィルター ポップアップ １１．おしゃれなアラート １２．
StackTrace
StackTraceとは フリーランスプログラマーいけまさの、プログラミングやシステム開発に関する雑多なStackの形跡です。 日々のプログラミングや、システム開発で得たことをまとめています。 もっと雑多な内容はブログに。 更新情報 2011/ 7/ 5 Sortable のrevertの説明を修正しました。 2010/11/14 jQuery API 1.4.4 日本語リファレンスに、jQuery.type(obj) を追加しました。 jQuery API 1.4.4 日本語リファレンスに、jQuery.isWindow(obj) を追加しました。 2010/11/13 jQuery API 1.4.4 日本語リファレンスに、jQuery.fx.interval を追加しました。 jQuery API 1.4.4 日本語リファレンスに、fadeToggle([duration], [ea
スクロールスパイ ≪ JavaScript ≪ Bootstrap3日本語リファレンス
使い方 ポイントは３つ。 body要素のdata-spy属性に、scrollを指定する。 ナビゲーション（タブ・メニュー、カプセル・メニュー）やナビゲーション・バーのナビゲーション系コンポ—ネントを配置。 body要素のdata-target属性に、スクロールに連動させたいナビゲーション系コンポ—ネントのid属性値やclass属性値を指定する。 <body data-spy="scroll" data-target="#sampleNavbar"> ・・・ <div id="sampleNavbar"> <ul class="nav nav-pills nav-stacked"> <li ><a href="#">ページ内リンク１</a></li> <li ><a href="#">ページ内リンク２</a></li> <li ><a href="#">ページ内リンク３</a></li> <
Bootstrap 2.1「Affixプラグイン」がわかりにくかったので少し紐解いてみました | hijiriworld Web
仕組みは以下 Affixプラグインの仕組みを図解 まず、Affix要素はスクロール量とoffset引数によって、「.affix-top → .affix → .affix-bottom」と、クラスが自動的に変化していく。 offset引数（offset:top, offset:bottom）は以下の高さを指定する。 そうすると、状態変化と共にクラスが変化していく。 という仕組みがわかれば、さきほどの動作サンプル3でいいように見える。 でもこれは不完全。 正確には、”BootstrapのCSSを読みこんでいる場合”は不完全。 Bootstrapのサイトで実装されているAffixへの疑問 BootstrapのCSSを読み込んでいる場合、これだけではうまくいかないはず。 Affixが発動すると親要素の高さがゼロになるはず 追従を開始する（.affix）と、通常フローから逸脱する、つまり「posi
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
js STUDIO | JavaScript、jQuery日本語リファレンス
AngularJS 1.2 ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス このサイトについて リファレンスの翻訳を中心に、JavaScriptに関する情報を取り扱うサイトです。 現在、公開しているJavaScript関連の情報です。 JavaScript Mozilla Developer Networkの内容を翻訳して公開しています。 jQuery jQuery
jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法
可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
