ヘッダー固定でページ内リンクをページ遷移で指定した時のズレを解消するJavaScript | HPcode（えいちぴーこーど）
ページ遷移時のページ内リンクでズレを解消する ザックリ処理を説明すると、ページ読み込みが終わったらURLの#hogeを取得して、ヘッダー分の高さだけ移動（アニメーション）するという動きになります。 /* ページ内リンク（別ページ） */ jQuery( window ).on( 'load', function() { id = location.hash; speed = 0; headerHight = 128; // 固定ヘッダーの高さ if ( '' != id ) { pos = jQuery( id ).offset().top - headerHight; jQuery( 'html' ).animate({ scrollTop: pos }, speed ); } }); それぞれの処理は以下のような動きをしています。 jQuery( window ).on( ‘load’
[jQuery] クリックでセクションの表示・非表示を切り替える
目次みたいなリンク一覧がって、リンクをクリックをすると、そのセクション（ブロック）だけが表示され、クリックするたびにセクションが切り替わるような画面を作ったのでメモ。 アプリ名一覧みたいなのがあって、アプリ名をクリックすると、そのアプリの紹介だけが表示されるようなやつ。 一覧が、リンクの場合と、ボタンの場合の 2 種類を作った。 リンクの場合は、 href の値と id で表示・非表示を切り替える。 ボタンの場合は、 id と class 名を使って切り替える。 セクションの切り替えは、 hide() で非表示 show() で表示、または toggle() で表示（クリックするごとに表示・非表示を繰り返す） 表示・非表示のメソッドは、 fadeIn() / fadeOut() や slideDown() / slideUp() などアニメーション付きのもあるので、それらを使ってもいい。
![[jQuery] クリックでセクションの表示・非表示を切り替える](https://cdn-ak-scissors.b.st-hatena.com/image/square/ce3ffe521c95897fec1cbecf9ad0ed5540e5fc4b/height=288;version=1;width=512/https%3A%2F%2Fagohack.com%2Fwp%2Fwp-content%2Fuploads%2F2019%2F08%2Fjquery-logo-200.png){kind=logo}
スマホでhoverを有効にする方法 – WEB-Geek-Site.com
を加えるだけ！ bodyにontouchstart=""を指定すれば、子要素がタッチ時に反応するようになる。属性のプロパティは空でOKです。 ※ ontouchstart=""である必要はない ontouchendでも可能。 <span class="nt"><div</span> <span class="na">class=</span> <span class="s">"box"</span> <span class="na">ontouchstart=</span> <span class="s">""</span> <span class="nt">>これは設定例です</div></span> ただ、iphoneでテストしてみると、PCのhoverのようには動かず、ボタンとしての認知性は向上しないように感じた。 もう少し頑張ってリサーチ。 いろいろ調べてみると、JQueryを使う
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
CSSとjQueryで作るメニュー表示時にコンテンツのスクロールをさせないドロワーメニュー｜I'll be NET
最近よ見かける画面の左や右からにゅるっと出てくるドロワーメニューです。 バーガーメニュー・ナビゲーションドロワーなどとも呼ばれます。 スタイルシートだけで実現するもの、jQueryプラグインを利用するものなど様々ありますが、今回はCSSとjQueryでメニューを開いた時に画面の余白部分（コンテンツ）をスクロールさせないドロワーメニューを作成してみます。 参考にさせていただいたサイトは記事最下部に記載させていただきました。 DEMO ドロワーメニューのHTMLサンプル たとえば下記のようなHTMLでドロワーメニューを実現します。 <div id="wrap"> <header> <h1>タイトル</h1> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input
jQuery ラジオボタンの値を取得/設定するサンプル | ITSakura
値を取得する ボタンを押すと選択したvalue値を取得するサンプルです。 選択した色 赤 黄 青 上記サンプルのコードです。 <p>選択した色 <span id="span1"></span></p> <input type="radio" name="c1" value="red" checked> 赤 <input type="radio" name="c1" value="yellow" > 黄 <input type="radio" name="c1" value="blue" > 青 <input type="button" id="button1" value="ボタン1" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(
javascriptやcssをユーザーエージェント毎に読み分けさせる – ［ウォンブログ］
もうこれももう毎度もうググっとるからもうメモじゃ。 ◆各デバイスを振り分けてcssやjavascriptあてたり、アラート出したり、リダイレクトさせたり。[code language=”javascript”] <script type="text/javascript"> var ua = navigator.userAgent; if( ua.indexOf(‘iPhone’) > 0 || ua.indexOf(‘iPod’) > 0 || (ua.indexOf(‘Android’) > 0 && ua.indexOf(‘Mobile’) > 0) || ( ua.indexOf(‘windows’) > 0 && ua.indexOf(‘phone’) > 0) || ( ua.indexOf(‘firefox’) > 0 && ua.indexOf(‘mobile’) > 0)
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
スマホの時だけTELリンクを適用する | 星のソムリエのフロントエンド雑記。
皆さんもスマホでサイトを見ているとき、電話番号をタップすると「電話をかける」というダイアログが出てきたことがあると思います。 これをHTMLで書くとこうなります。 <a href="tel:0120123456">TEL:0120-123-456</a> これでテキストをタップすると電話をかけることができるようになります。 ところがPCのブラウザでクリックすると「外部プロトコルリクエスト」と出て、なんだか変なサイトに登録されそうな不安を煽るダイアログが出てきます（笑） レスポンシブサイトの場合、さすがにこれではいただけないので、スマホの時だけ機能するようにしたいですよね。 というわけでユーザーエージェントを確認して、スマホの時だけ電話リンクを付与するようにしましょう。 jQueryはこちら $(function(){ var ua = navigator.userAgent; if (ua
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【javascript】jQueryだけでタブ切り替えサンプル（ローテク版） at softelメモ
jquery.ui を使えば、美しいタブ切り替えをあっという間に作成可能です。 uiを導入していないとき、あまりあれこれ入れたくないとき、美しくなくていいとき（？）など、何かしらの事情がある場合は、jqueryだけで十分です。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQueryだけでタブ切り替えサンプル</title> <style type="text/css"> /* タブっぽく並べて */ #tabs ul {list-style:none;} #tabs li {float:left; width:150px;} #tabs a {display:block; margin:5px; border:1px solid #ccc; paddi
jQueryで画像を自動で切り替えてみる。
最初ぐぐって出てきたスクリプトそのまま使ってたのだが、要件に満たさないところがあったのでごっそり書き換えたので良いだろうということで書いておく事にした。 何をやっているかというと、同じ場所に切り替えたい画像を全部重ねて置いておき、JavaScript の setTimeout を使用して順番に表示している。 今回は画像が4枚を3秒毎に表示していき、最後の画像だけ10秒ほど表示としている。あまりこういった細かな制御ができるプラグインは無いのかな、すぐ出て来なかったので既存のものを改造した。その既存のものがどこからとってきたものなのか忘れてしまった...。見つかったらリンクはろう。 html <header> <h1>画像が自動で切り替わるアレ</h1> <ul id="header-images"> <li><img src="/images/image_top_01.jpg"></li>
【JQuery】自動切り替え＋サムネイルクリックで画像切り替え ｜ Tips Note by TAM
※※※URLが変更となりました。 以前のURLはこちら （http://tam-tam.co.jp/tipsnote/javascript/post3351.html） ブックマークをされている方はお手数ですが変更をお願いいたします。※※※ サムネイルつきのギャラリーで、キャプションつき、 画像もサムネイルもキャプションも一定の時間で切り替わって、、というギャラリーを作りたいときが多々あります。 まず、やりたいことをまとめます。 指定した時間で、自動的に画像やテキストが切り替わる サムネイルをクリックしても切り替わる 切り替わるエフェクトはクロスフェード 開始場所を指定できる（コメント欄参照ください） JQueryを使用して、この全てを満たすJavascriptを作ってみました。 イメージとしては以下のようなものです。 【HTMLはこちら】 <!-- images--> <div clas
jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します｜Webpark
jQueryとCSS3を使ったアコーディオンメニューを作ってみましたので、作り方を紹介します。かなり長くなりますが、お役に立てばうれしいです。 色々事情があってIEでご覧になっている方のためにスクリーンショットも載せておきます。カテゴリー３にマウスを乗せているところです。 それではコードを解説していきます。 HTML まずはHTMLです。無駄に長いですが一応載せます。 <ul id="accordion"> <li><a href="#">カテゴリー１<span class="arrow rotate"></span></a> <ul id="active"> <li><a href="#">サブカテゴリー１</a></li> <li><a href="#">サブカテゴリー２</a></li> <li><a href="#">サブカテゴリー３</a></li> </ul> </li> <l
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><
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでスクロールに合わせて少しずつ背景画像を動かす方法 | cityJumperWEB.com
http://felica.boy.jp/grid/
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/
showjin.me
Michael Leigeber