jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
いまどきWEBデザイナーはWordPressもjQueryも出来て当たり前なの？
いまどきWEBデザイナーはWordPressもjQueryも出来て当たり前なの？ 2013.01.10 | ディレクター一問一答 | 初心者向け こんばんは。 いつからでしょうか。自分がIT系と呼ばれている事に少し違和感を覚えつつも、まぁ飯の種なんで仕事を頂ければ小躍りして喜んでおります。 夜のノマドワーカー。WP-オレンジです。 と言う訳で結論です。 デザイナーが全部出来る必要はない。 はいもう結論言っちゃったんで、答えだけ求めていた方はここまででダイジョブです。 なんでこんな事書くかって言うと、ちょいちょいそういう「WEBデザイナーもこれくらい覚えよう」意見も耳にするんですね。 つまりタイトルは釣りです。 あくまでワタシ個人の意見ですガネ。 そりゃぁ出来た方がいいですけドネ。 できるに越したことはないですヨネ。 性格がいい女性もいいですが、性格が良くて見た目もいい女性の方が尚いいです。
[WordPress]これでフッターに重ならない！ ブログのサイドメニューを固定してスクロールに追従させる方法 | NANOKAMO BLOG
photo credit: Eric M Martin via photopin cc どうも@kuroji1987です。 ブログのサイドメニューに、スクロールに追従するメニューを設置いたしました。「オススメ記事」というタイトルで、同じカテゴリの記事をランダムで表示させています。 広告を表示させることもできるのですが、Googleの規約で禁止されているという話なのでやってません。結構やっているブログあるので、もしかしたら大丈夫なのかなぁとも思うのですが……。どうなんでしょうかねｗ ということで、その追従するメニューの設置方法をご紹介します。 フッターにめり込まないメニューがいい スクロールに付いてくるだけならとっても簡単に実装できるのですが、多くのブログがそうであるようにスクロールしきったのち、そのままメニューがフッターにめり込んでしまうという現象が発生します。これが僕はどうしても許せま
WordPressで外部のjQueryを読み込むときに注意すべきひとつのポイント
いやー、ちょっとハマっちゃったので備忘録的に書き残しておこうと思います。 久々に管理画面を触っていたら、メディアアップローダーがちゃんと動かない! という状況に陥りまして、その原因がjQueryの読み込みに関係してたんですよねー。。 Photo:Designing a new feature, with jQuery! By Peter Hellberg WordPressを使う上のに切っても切れないのがjQuery。 各種プラグインがさまざまなjavascriptのフレームワークを使うため、そもそもWordPressに包括されるかたちで、jQueryは導入されることになります。 そのため、特にjQueryの公式サイトからダウンロードしてくる必要もありません。 ただ、ちょっと気になるのがそのロード時間。 内蔵されたjQueryを呼び出すこと自体が、ロード時間の増加につながっている可能性もあ
WordPress ページングはやめてAjaxローディングにする | hijiriworld Web
ページングはやめて、Ajaxによる非同期ローディングにしてみましょう。 最初は5件の記事が表示されています。 「もっと見る」ボタンをクリックするとAjaxにより次の5件が非同期で読み込まれます。 以後、記事がなくなるまで同じ動作です。 テンプレート <section id="content"> <?php query_posts('posts_per_page=5'); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <article> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div class="excerpt"><?php the_excerpt(); ?></div> </arti
[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll
ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 Infinite Scroll 一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。 Infinite Scrollのデモ Infinite Scroll -jQueryのプラグイン Infinite Scroll -WordPressのプラグイン Infinite Scrollのデモ デモはテキストだけのページです。 ページ下部の「more」をクリック Infinite Scroll -jQueryのプラグイン Infinite Scroll -jQueryのプラグイン Infinite Scrollの使い方 Infinite Scrollの実装は簡単です。 まずは、外部ファイルをセットします。 <sc
ショートコードで文中に脚注を加えるWordPressプラグイン・Simple Footnotes - かちびと.net
脚注リンクをショートコードで 加える事が出来るWordPressの プラグイン･Simple Footnotes のご紹介。ユーザビリティの 工場にもなりそうですね。専門 的な内容を扱うサイトでは導入 したいところです。 GW中なので軽めの話題。文中にショートコードで脚注を加えるプラグインです。複数加えても自動で順番どおり番号を振ってくれます。 こういうやつです。Wikipediaなんかでよく見かけますよね。 プラグインを有効化して以下のように書けばOK。 今日はカレー[ref]レトルトですけどね[/ref]を食べようと思います。 [ref]で囲うと、その部分は数字とリンクが追加され、文章最下部に脚注が加わります。 プラグインのファイルを開けると分かりますが、複雑なコードで実装してるわけじゃ無さそうなので、functions.phpで管理してもいいかもですね。 Simple Footnot
WordPressのコメントとトラックバックをjQueryでタブ分けするカスタマイズ法 - かちびと.net
コメント頂いたので、記事にして みます。このブログで実装してい るような、コメントとトラバをタブ で分けるカスタマイズ法。方法は 多数あると思いますので参考 程度にして頂ければと思います。 内容は、コメントとトラバをプラグインを使わずに分ける方法と、それをjQueryを使ってタブ分けする方法です。 コメントとトラバを分ける まず、コメントとトラバを分けます。既にWordPress: コメントとトラックバックを分けるのにプラグインは不要という記事がありますので、コチラもご参照くださいね。この点は全く同じ内容です。 STEP.1 お使いのテーマファイル内にあるcomments.phpのバックアップを取ってからファイル開いて以下のコードを探します。 <?php foreach ($comments as $comment) : ?> このコードがコメントやトラバを表示するコードになります。 ST
WordPressの投稿画面で、記事のカテゴリーを1つしか選べないようにする - かちびと.net
少々気になった記事があったので備忘録。WordPressの投稿画面でカテゴリーを選択出来る部分があって、そこはチェックボックスになっています。当然複数選べるようになっているわけですが、仕様上、1つしか選べないようにしたい、という場合のTipsです。 少し前にWptuts+で「ラジオボタン化して1つしか選択できない様にする」という記事がありました。 (How to Use Radio Buttons With Taxonomies) おおーちょっといいかも、と思ったんですけど、若干面倒くさそうだったのでもう一つの選択肢としてjQueryの方法を書いておこうと思います。 実装 単純に1つしか選択できないようにすればいいならチェックボックスにチェック出来る数を制限すればいいです。上図は、1つ選択すると他はdisabledになるようにしています。 尚、チェックボックスの動作は以下のような感じです。
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
jQueryによる背景のスライドショーを手軽に実装出来るWordPressプラグイン・Site Background Slider - かちびと.net
Webサイトの背景に画像をいっぱいに 広げて、jQueryでスライドショー化、 というのを手軽に実装出来るWordPress のプラグインです。jQueryとWPでよく 困ってる方を見かけますのでプラグイン に頼るのも手かなと思います。 WordPressでjQueryを使う、という方で結構困っている方が多いので、以前傾向と対策的な記事を書いたのですが、プログラマーじゃないから難しい、という方はプラグインに頼ってみては如何でしょう。 こんな感じで簡単に背景を素敵なスライドショーにする事が出来ます。背景は常にいっぱいに広がってくれます。キャプチャじゃ分かりませんけど画像が切り替わります。 プラグイン配布先でデモがありましたのでご覧下さい。 Demo フードやファッションサイトなど、トレンドに関係が深いコンテンツと相性良さそうですね。写真で訴求力を高めたい時に有効な手段だと思います。 インスト
WordPressのトップページを雑誌や新聞のような段組にする方法
WordPressのブログは一般的に記事タイトルと記事の概要が単純に縦に並ぶだけですが、jQuery Masonry という jQuery プラグインを使用すると、このブログのトップページのように雑誌や新聞のような段組で記事一覧を並べることができます。 jQuery Masonry は WordPress 用に作られたわけではありませんが、WordPress テーマに組み込んでトップページ等で使用することができます。 ただ、公式のドキュメント通りに JavaScript を書いただけでは WordPress テーマではうまく動かないので、やり方をここにまとめておきます。 ここでは、WordPress 3.3 のデフォルトテーマ「TwentyEleven」をベースに解説します。 準備 まず jQuery Masonry 公式サイト のページ中央にある「Download the script
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
https://www.inspirationmix.com/15-free-unique-jquery-navigation-menus/