transformプロパティとjQueryでアナログ時計を作ってみた【CSS Advent Calendar 2017】4日目 - ハンドルネームの由来は乳製品好きから
はじめに この記事は CSS Advent Calendar 2017 4日目の記事です。 Webデザインの参考になるものを探しにギャラリーサイトを見ていたところ、以下のサイトを見つけました。 www.kotorinoyu.jp 現在時刻がアナログ時計風に表示されていることにかなり興味を持ちました。 自分でも作れるかも？と思い、CSS と jQuery で作ってみました。 概要 時間の針、分の針の div 要素を用意 JS で現在時刻を取得 時間と分の数値から角度を計算し transform 要素の rotate で角度をつける 秒針も作ってみた スムーズに回転するように transition をつけてみた この秒針と transition によってかなり厄介なことに…… 完成物 Codepen にアップしました。 codepen.io 制作のメモ transition-timing-fu
jQuery のバブリング、preventDefault() や stopPropagation() の使用例 ｜ Tips Note by TAM
2014.06.16 jQuery のバブリング、preventDefault() や stopPropagation() の使用例 jQuery のイベントのバブリング (伝播) については下記のサイトがほんとに分かりやすくて、読んでいただければもうあらためて書くことはないのですが、 jQueryのバブリングと、「return false;」「e.stopPropagation();」「e.preventDefault();」について (ふじこのプログラミング奮闘記 3行でまとめると、 クリックなどのイベントは、子要素から親要素へと伝播される（バブリング） preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 return false; を使うと、その要素のイベントも親要素への伝播も両方キャンセルす
【jQuery】シングルページでナビゲーションに現在地を表示する ｜ Tips Note by TAM
jQueryを使用して、シングルページでナビゲーションに現在地を表示するサンプルを作成しました。 デモページはこちらになります。 ■HTML ナビゲーション部分とコンテンツ部分のHTMLの抜粋です。 ページ内リンクで各コンテンツに遷移します。 <ul id="gnav"> <li><a href="#contents01">コンテンツA</a></li> <li><a href="#contents02">コンテンツB</a></li> <li><a href="#contents03">コンテンツC</a></li> <li><a href="#contents04">コンテンツD</a></li> </ul> ～略～ <div id="contents"> <div class="inner"> <div id="contents01"> <h2>コンテンツA</h2> コンテンツAの
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
jQueryでaタグとボタンに対する2重送信を防止するための方法 - 【鋭利団体】PK-Brothers
どんどん技術系のTipsで攻めてみます。また実験的にわけわからない記事を書くかもしれませんが、そっちの方が楽しめると思うのでもしみたら確認してみてください。くそが。 それでは今回のjQueryでクリック系処理に対して2重送信を防止する方法を残していきます。 フロントエンドエンジニアや、WEB系エンジニアは結構使うことが多いと思うのでやり方というよりはロジックは理解したほうが今後の為になると思うぞ。 今回は大多数を占めるであろう2パターンを紹介します。 ボタンタイプの場合 1回目のクリック時にボタンを無効にする方法です。 ボタンの場合はアトリビュートで無効にできるものがあるのでクリックイベントをとってそのアトリビュートを付加させたらいいだけです。 $('#login_submit').on('click', function(){ // ボタンを押せなくする $(this).attr('di
jQueryで親要素・子要素・兄弟要素を取得する方法｜Gimmick log
兄弟要素を取得する prev() 直前の要素を取得する prev()は直前の兄弟要素を取得します。 サンプルでは .wrap の直前のdiv要素に対し、CSSを追加しています。 <div> <h2>ここのタイトルが赤くなります</h2> <p>ここのテキストが赤くなります</p> <p>ここのテキストが赤くなります</p> </div> <!--ここから取得--> <div class="wrap"> <h2>見出し</h2> <p>テキスト</p> <p>テキスト</p> </div> <!--ここまで取得-->
jQueryでフッターまでスクロールしたらアクションを起こす | NeGiMeMo.net
bell賞味期限切れコンテンツ この記事は公開または最終更新から1272日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 現在作成中のテーマで、 ヘッダー メイン部分 position:fixed なフッター 普通のフッター みたいな構造で、position:fixed なフッターにはページ上部に戻したり、パンくずをいれるような作りにしていて、それがページ下部に張り付き、 ページを下までスクロールして普通のフッターが現れたらそこで fixed を解除、フッターの真上に position:fixedだったフッターを配置する、というのがやりたくて（文字だと説明が難しいな…）いろいろ調べてたのですが、なんとかなったのでとりあえずメモ。 そもそも何がしたいのかこれじゃ伝わりにくいですね。 ようは、フッターが上
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで親要素を取得する：parent(), parents(), closest()
HTMLとCSSだけで簡単に作れる！ トグルボタンの作り方！！