[Category] javascript

外部HTMLをポップアップする

外部HTMLをポップアップするjavascriptです。jQueryを使用しています。jQueryバージョンは3.2.1です。 ・外部HTML(同一ディレクトリ内)をポップアップ・ポップアップした状態で次の外部リンクへ移行する・ポップアップ部分以外をクリック(タップ)した場合、ポップアップを閉じる・…

フル画面のスライドショー

ブラウザ画面いっぱいに広がるスライドショーです。結構楽しかった。 以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。読み込み時が気持ち悪いので、loading画面とか設定すれば良いと思います。 デモ…

CSSとjQueryで作るアコーディオンボタン

クリックすると中身が出てくるアコーディオンボタン。可変すると周知するために最初の一つは開けています。一応開いた状態の要素に.activeをつけています。 See the Pen 171004 by M.Ueda (@nekuta) on CodePen. js(jQuery)

メニュー以外の箇所をタップするとメニューが自動で戻るナビゲーション

UIを意識したくて作ったやつ。メニューをスライドさせる動きとclassを付けるのをjQueryで行っています。 ハンバーガーメニューは以前作ったこちらを使いました。CSSだけで作るハンバーガーメニュー 縦にメニューが出てくるナビゲーションですが、メニュー以外をタップした時に自動でナビが戻ります。 S…

CSSとjQueryで作るローディング

遊んでたら出来上がったもの。firefoxでいい動きをしなかったので、userAgentで振り分けました。firefoxだとloadが完了するとloading画面がふわっとフェードし、それ以外のブラウザだと、波が引くようにloading画面が下に下がります。動きの部分は全てcssアニメーション。fi…

Google Maps APIを使って地図をカスタマイズする

GoogleMapsAPIを使って地図をカスタマイズします。 ▼埋め込みGoogle Mapのスクロール防止対策はこっち 埋め込みGoogle Mapをスクロールさせないようにする ・スクロールしてもズームされない ・デフォルトのUIを非表示 ・色を変更 ・マップピンをアイコンに変更 ↑こんな感じの…

ブラウザ幅いっぱい広がるビジュアル

ブラウザ幅(横または縦)を変更してもビジュアルがブラウザ幅に合わせて可変します。 デモページ HTML CSS jQuery onで複数のイベントを設定できます。今回はloadとresizeを使用しました。loadはhtmlを込みこんでから処理を実行、resizeはブラウザは幅が変わったら処理を実行…

  • コーダーのための計算機