jQueryを使い、ボッス要素を自動スクロールする方法
実装例（サンプル）の動作について ページを読み込むと、背景色が黄色のボックス要素を、自動的に最後まで縦スクロールする。最後までスクロールし終わると、最初に戻り、自動スクロールを繰り返す。 ソースコード JavaScript <script type="text/javascript"> jQuery( function() { autoScroll(); } ); var $scrollY = 0; function autoScroll() { var $sampleBox = jQuery( '#sampleBox' ); $sampleBox.scrollTop( ++$scrollY ); if( $scrollY < $sampleBox[0].scrollHeight - $sampleBox[0].clientHeight ){ setTimeout( "autoScroll
【JavaScript・jQuery】ボックスの中の要素を自動でスクロールさせる方法
jQuery、または JavaScript を使って、ボックスの中の要素を自動でスクロールさせて、テキストが流れているように見せる方法を紹介します。 実装したサンプルは以下。 ボックス・スクロール：サンプル・デモ HTML の記述サンプルは以下。 <div id="scroll-box"> <ul> <li>テスト 1行目</li> <li>テスト 2行目</li> <li>テスト 3行目</li> <li>テスト 4行目</li> <li>テスト 5行目</li> <li>テスト 6行目</li> <li>テスト 7行目</li> <li>テスト 8行目</li> <li>テスト 9行目</li> </ul> </div> CSS 側ではボックスのサイズと［overflow:hidden］を指定しておきます。 #scroll-box { height:200px; overflow:hi
jQuery でセレクトボックスを操作！value 値の取得や選択項目の指定、プルダウンテキストの取得方法
select ボックスに対する jQuery の操作をまとめてみました。 JavaScript では value 値が取得・設定に特化することが多いですが、jQuery を使うことで option タグ内のテキスト（プルダウンに表示している文言）も簡単に取得することができます。 以下、サンプルプログラムでは id 属性「select_test」を持つセレクトボックスを用いて解説していきます。 <select id="select_test"> <option value="1">選択肢１</option> <option value="2">選択肢２</option> <option value="3">選択肢３</option> <option value="4">選択肢４</option> </select>
サイトでおしゃれに動画再生！オリジナルUIの全画面動画を実装！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、制作部デザイナーのぺちこです。 近頃動画を使ったサイト制作に関わらせていただく機会に恵まれておりますが、 お恥ずかしながらvideo実装をしたことがなかったので、 ひたすら勉強三昧でした。 背景に動画を使ったサイトも、今ではだいぶん主流になってきた印象ですが、 動画を1つのコンテンツとして、長めにしっかりと載せているサイトも増えてきましたね！ 動画を大事なコンテンツの一部とすると、 YouTubeやVimeoで簡易的に載せるだけではどうしても物足りず…。 せっかくなので<video>タグを使用してオリジナルのコントローラーやシークバーを作ってしまおう！というのが今回の記事の内容です。 では早速行きましょう！ オリジナルUIの全画面動画を<video>で実装する方法 JSを使用すればvideoをがっつりコントロールできるのですが、 これがまた調べてもスクリプトが出てくるばかりで、
【jquery】テーブルを検索して合致するセルをハイライト
テーブルのセルの文字列を検索して、合致したセルの背景色を変えるサンプルです。 ブラウザの検索とほぼ同じ機能なので、あまり使わないかもしれませんが。。 jqueryの勉強も兼ねているので・・・ということでサンプルです。 サンプルは、 テキストボックスに検索したい文字を入力、検索ボタンをクリックすると、 入力した文字列が含まれるセルの背景色が黄色に変わります。 HTMLのサンプル 検 索 北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 山梨県 長野県 新潟県 富山県 石川県 福井県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 その他 都道府県を羅列している
テーブルのオプション - シュンツのつまづき日記
【前提条件】 [環境] jQuery 1.9.0 DataTables 1.9.4 参考サイト DataTables 公式ページ DataTables | Table plug-in for jQuery 【概要】 テーブルのOptionで個人的に覚えたほうが良いなと思った プロパティについてつらつらと書きます。 そのプロパティはiDisplayLengthとsDomです。 【iDisplayLengthプロパティ】 iDisplayLengthプロパティはテーブル内に表示するレコードの件数です。 デフォルトでは10が設定されているので、 10件を超えるデータの場合は2ページ目以降の表示となります。 デフォルトの設定ではページング機能が有効になっていますが、 次に説明するsDomの設定によっては 次ページ/前ページを表示させないこともできます。 1ページに全て表示させたい場合は-1を設定し
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」
スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」 Check Tweet 配布元：Switch stylesheets with jQuery ライセンス：クリエイティブコモンズAttribution, Share Alike License Switch stylesheets with jQueryはユーザー操作により簡単にスタイルシートを切り替えることができるjQueryプラグインだ。 クッキーにも対応している為、一度選択されたスタイルシートはこのライブラリが読み込まれているすべてのページで優先的に表示されるようになります。 使い方 変更したいスタイルシートをhead要素などで読み込みます。デフォルトのスタイルシート以外はrel属性をrel=”alternate stylesheet”としデフォルトのスタイルシートはre
jQueryを使った簡単なAJAXロードの実装方法 - Wordpressテーマ「Googlist」
AJAXロードテーマ「Optimizer」の次の更新に実装している機能に、アーカイブページのAJAXロードがあります。今まで実装しようと思っていたんですが、昔試した方法でうまくいかなかった理由がようやく分かり、ついに簡単な実装をするに至りました。昔試した方法は、実は管理画面用の方法だったみたいで、道理でうまくいかなかったわけです。で、紹介するアーカイブページのAJAXロードですが、使用するのは「AJAXロード テーマ「Optimizer」の次の更新に実装している機能に、アーカイブページのAJAXロードがあります。 今まで実装しようと思っていたんですが、昔試した方法でうまくいかなかった理由がようやく分かり、ついに簡単な実装をするに至りました。昔試した方法は、実は管理画面用の方法だったみたいで、道理でうまくいかなかったわけです。 で、紹介するアーカイブページのAJAXロードですが、使用するの
Infinite Scrollを実装してみました | スターフィールド株式会社
Infinite Scrollとは、 ページャーの代わりに、ページ内で次のページのレコードを読む出すライブラリのことです。 http://www.infinite-scroll.com/ WordPressのプラグインもあって、jQueryのプラグインもあります。 下記のサイトで体験できます。 http://kachibito.net/sample/jquery-masonry/ 今回実装したのは、jQueryのプラグインです。 １、ライブラリをダウンロード https://github.com/paulirish/infinite-scroll ２、htmlソース <div id="container"> <ul> <li>hogehoge1</li> <li>hogehoge2</li> <li>hogehoge3</li> <li>hogehoge4</li> <li>hog
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 | Stronghold Archive
jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応 – infinititescroll等 どうもこんばんは。今回のtipsは【jQuery スクロールで記事の自動読み込みを実現する方法 – グリッドレイアウトにも対応】についてです。自動読み込みと書きましたが、クリック等の手動も可能です。結構見かける手法ですのでメモしておきます。 自動読み込み用プラグイン【infinitescroll 】 インフィニティスクロール、このプラグインを使えば簡単に自動読み込みを実現してくれます。設置方法も簡単で非常に優秀なプラグインです。 スクロールで自動読み込み <div id="blogBody"> <div class="post">….</div> <div class="post">….</div> <div class="post">….</div> </d
WordPressで作られたWebサイトを無限スクロール出来るようにする - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 WordPressで作ったWebサイトを、 スクロールすると、次ページが 自動でロードされる無限スクロー ルが出来るようにする、という 方法です。今更感満載ですけど。 よく見かける、「スクロールするだけで次ページが次々とロードされる」みたいなサイトをWordPressで作ろう、みたいな話。既出な話題なので基本的な導入方法だけ書きます。 無限スクロール(Infinite Scroll)出来るようにする WordPressを無限スクロール出来る様にします。 以下、手順。サンプルコードはTwenty Elevenで動作テストしています。 スクリプトを用意する 無限スクロールさせるスクリプトを用意します。いろいろあるのでお好みで構いません。今日はWordPressのプラグイ
[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」
大したものではないんですけど、jQueryの直書きに慣れ親しむ為に自分で前から欲しかったものをプラグインにして作ってみました。 ol要素の通し番号の種類 olにつける通し番号のバリエーションには、HTML側からだとtype属性で普通の数字、ローマ数字(小文字or大文字)、アルファベット(小文字or大文字)が指定できます。詳しくは以下のHTML5.jpのページで。 ol 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP そして次にCSSの方からは何が出来るかですけど、これは結構種類がありますね。 スタイルシートリファレンスから参照しますと黒丸、白丸、黒四角等の定番の他、0つきの数字、漢数字、果てはヘブライ語、グルジア語なんてのもあるようです。 list-style-type－スタイルシートリファレンス ①、②がない？ でもなんで①とか
![[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」](https://cdn-ak-scissors.b.st-hatena.com/image/square/161bc62a98ab9bbdd056e7eceacde579662f12ed/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F06%2Fjquery-orderd-list-01-150x150.png)
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
forked: jQueryでタブ切り替え上下にボタンがあるバージョン - jsdo.it - Share JavaScript, HTML5 and CSS
// forked from wdbox's " jQueryでタブ切り替え上下にボタンがあるバージョン" http://jsdo.it/wdbox/bDRH // forked from gihyojp's "jQueryアニメーションのお題" http://jsdo.it/gihyojp/lesson04_work $(function(){ var $tabs = $('li'); var $contents = $('.content'); // タブボタンのナンバリング $('.tabs_top li').each(function(i){ $(this).addClass('btn' + (i+1)); }); $('.tabs_bottom li').each(function(i){ $(this).addClass('btn' + (i+1)); }); // コンテンツ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで画像にマウスオーバーした際見出しをスライド表示する | CSS Lecture
【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog
finefinefine.jp
CYOKOLOG — colspan付きtableレイアウトでwidth指定が思うようにならない時の処置
iDangero.us