HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

jQuery

【脱jQuery?】jQueryみたいなセレクタが使えるdocument.querySelectorが便利

この記事でできるようになること jQueryを使わずに#myID .myClassみたいなセレクタが使えるようになる ちょっとしたjavascriptを書くだけなのにCSSっぽいセレクタを使って楽したいがためにjQueryライブラリを読ませるのは面倒。 document.getElementById('aa…

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。 qiita.com これがすごく便利! このscriptでできる…

マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery

.hogehoge { pointer-events: none; } 例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を .soldout { position: relative; } .soldout:after { content: "" display…

.load()メソッド IE10で読み込まれない原因は

IE11では正常にhtmlが読み込まれるのに対して、IE10では表示されない。 IE10は.load()メソッドは対応しているはずなのに・・・。 まず疑ったのはキャッシュ。 キャッシュを全て削除して更新してみたが改善されない。 原因は・・・・。 <script> $(function() { // 文…

要素内のtextをタグで囲むスクリプト jQuery

タイトルではちょっとわかりづらいかな・・・。 例えば <h1>見出し</h1> というHTMLがあったときに、jQueryで <h1><div>見出し</div></h1> というふうに内側のテキストなどをタグで囲める。 通常なら普通にタグを記述すればいい話なのだが、 サイトを立ち上げてからかなり時間がたち全ての…

【jQuery】htmlページをパーツごとに分けて読み込む方法

最近仕事で使った方法なのですが、今時はあまり使われないかも。 この記事でできるようになること ヘッダー、フッターなどの共通部分のHTMLを別ファイルとして管理 切り出したHTMLファイルをjQueryで動的に読み込む PHPなしで制作するWEBページは管理が煩雑…

ページ内リンクをすべて滑らかにスクロールさせるjQuery

ページ内でのリンクを貼る場合 <a href="#pagetop">ページトップへ戻る</a> などと書きますよね。Q&Aのページなどの場合大変便利。 でもこれ、普通にリンクを貼るだけだと瞬間的に画面が切り替わってスクロールされている感が少ない! ちょっとこだわったサイトだとすーーっとスクロ…

【jQuery】ホームページ読み込み時にローディング画面を表示させる

仕事でWEB制作している時に使ったもののメモ書きです。 年々回線速度はアップしているが、画像が多いページの場合は完全にページを表示するまでに時間がかかってしまうもの。 読み込んでいる間に右画像のようなローディング画面を表示する方法のうちなるべく…