GitHub - humaan/Modaal: An accessible dialog window library for all humans.You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
jQueryで上スクロールと下スクロールで違う処理をする！
こんにちは。 今回はjQueryで上スクロールと下スクロールで違う処理をする！です。 広告とかを表示したい時等にたまに上スクロールと下スクロールで違う処理をしたい時ってありますよね。 今回はそれのメモ書きです。 [javascript] $(function() { var before = $(window).scrollTop(); $(window).scroll(function() { var after = $(window).scrollTop(); if(before > after) { 上スクロールした時の処理 } else if(before < after) { 下スクロールした時の処理 } before = after; }); }); [/javascript] beforeという変数が最初のスクロールの位置を取得しています。 afterが後のスクロールの位置を
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
偏見？参考にならないjQueryのページの見分け方 - Qiita
最初に 独断！参考にならないJavaScriptページの見分け方 こちらの記事が秀逸だったので、触発されてjQueryに寄った記事を書いてみようと思います。 動機 jQueryも随分と広く使われるようになり、『JavaScript使えます』って意味合いの中にjQueryしか使えないってのも含まれてしまうようになったりするのも若干なんだかなぁとは思いますが、 それはさておき、「チームメンバーになんでこんな書き方してんの？」って聞いたらそういう書き方をしているページが検索で出てきたりして…そういう苦い思い出を思い返しながら、この記事を書こうと思います。 この記事の対象者 コピペで動けば良いやという人以外 コピペより先にまだ進めていない人 この記事を書いてる人のスペック PHPというかLaravelが好き JavaScript始めたのはprototype.jsの頃 ES6まだよくわかってないです
jQuery・実務で必要な12項目をクリアしたレスポンシブドロワーメニューを作りました [IE11以上]
2017/07/29 余計なCSSを削除し、jQueryの見直しを行いました。 2017/01/29 Mac OS・Safari限定でスクロール不可に。Mac版Safariはクソブラウザ化しているので放置。 ※iOS、Androidは問題なし。 2015/10/16 発火後にリンクへ飛んでしまうバグを修正 2015年9月時点における、ドロワーメニューの実務要件を考えた。 Android 4.1 で動作するPCのクリック / スマホのタップ、両方に対応スマホアプリのように滑らかにスライドスマホでタップすると、一瞬で開閉するオーバーレイをクリックで戻る閉じるボタンも設置トリガーボタンを複数設置可オープン時、ドロワーメニュー部分のみスクロール ※コンテンツ側のスクロール無効ドロワーメニューの横幅をCSSで変更可 ※レスポンシブviewport に余計なコードを追加しない意味不明なHTML/CSS
![jQuery・実務で必要な12項目をクリアしたレスポンシブドロワーメニューを作りました [IE11以上]](https://cdn-ak-scissors.b.st-hatena.com/image/square/70ed47a51176ee01a65443ac18c45363990ced39/height=288;version=1;width=512/https%3A%2F%2Fkeitahirai.net%2Fwp-content%2Fuploads%2F2015%2F09%2F0.jpg)
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery タグを指定して、ページ途中にある要素がスクロールしてトップの位置に来た時に固定するjqueryを紹介します。 ページ最上部を固定するならposition:fixed;でも対応できると思いますが、それ以外の中段にある要素（タグ）で固定したい場合に使ってみてはいかがでしょうか。 今回ご紹介するのは、○○PXスクロールしたらという物ではなく、この要素の位置に来たら固定するというものです。 応用すれば、サイドバーなども固定出来ますので、使い勝手は良いと思います。 まず、CSSとjQuery本体を読み込ませ、スクリプトを記述します。 （今回はグローバルナビで説明） HTML記述例（HEAD部） <html> <head> ・ ・ <link href="style.css" type="text/css" rel="st
FlexSlider 2
// Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
脱jQuery Tips Advent Calendar 2015 - Adventar
jQueryからNativeJavaScriptへの変換規則的なTips 1個1個の記事は薄めでも25個で脱jQueryを目指します。 blog：https://q-az.net/ Twitter：https://twitter.com/gzzdino
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
NoCode jQuery Slider : jQuery Slideshow : 2024 WOW!
An image slider is an image slider, and they're all roughly the same, correct? Not so quickly. What are the primary criteria for selecting any kind of web component? Compatibility, simplicity of setup, great performance, and an attractive design and feel. With our Slider we've tried to create the perfect html slider that covers all these needs and even more: Compatibility with the widest feasible
jQueryでたった5行の記述で長いテキストを「…」で省略する
テキストをJavaScriptで省略して語尾に「･･･」を付けたいケースは割とよくある。jQueryプラグインなども存在するがjQueryを読み込んでいるのであれば下記のように5行の記述で長いテキストを「…」で省略することが可能。 半角0.5文字、全角1文字版を追記
Grid Updated | Matt's 411
Matt's 411A Web Developer's Blog · Javascript, CSS, HTML and more I've updated MooGrid with some performance tweaks and documentation. Additionally the dependence on Mootools is gone. This will hopefully clear the path for anyone using jQuery or plain old Javascript.= View Grid Demo = For those who are new to this blog, first, welcome! Second, I'll describe what Grid is. Grid is an open source pro
jQuery Coding Standards & Best Practices
All variables that are used to store/cache jQuery objects should have a name prefixed with a $. Always cache your jQuery selector returned objects in variables for reuse. var $myDiv = $("#myDiv"); $myDiv.click(function(){...}); Use camel case for naming variables. Use ID selector whenever possible. It is faster because they are handled using document.getElementById(). When using class selectors, d
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
select2
jQuery Plugin To Create Sparkling Stars Animations - Canvas Sparkles
GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
GitHub - liabru/jquery-match-height: a responsive equal heights plugin
http://plugins.adchsm.me/slidebars/
GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin
