jQuery 特定文字列や特定要素の削除及び置換方法 | Stronghold Archive
どうもこんにちは。今回のtipは【jQuery 特定テキストや特定要素の削除方法】です。ちょっとした時に使える方法ですので覚えておいても損は無いかもしれません。 要素の削除 jQueryを使った要素の削除方法、jQueryの読み込みをお忘れなく。 <script src="js/jquery-1.X.X.min.js"></script> 以下の例では【target】というIDを持っている要素を削除します。 $(function(){ $(‘#target’).remove() }); 特定テキストの削除及び置換 jQueryを使った特定テキストの削除方法。以下の例では【target】というclassを持っている要素の中にある【rainbow】というテキストを削除します。 $(function(){ $(‘.target’).each(function(){ var txt = $(thi
jQueryスライドショー「bxslider」がIE9,IE8,IE7で動かなかった件 | ハイジで歯維持
表題のとおりで bxsliderのかルーセルでスライドショーをやりたかったのですが、 IE9、IE8、IE7で動きませんでした。 jqueryは全くの素人で、というかプログラミング自体、 よく分かってない状態なのですが、 ネットで検索して、 以下のページなどを参考にさせていただきました。 jQueryスライドショー「bxslider」の使い方まとめ 最初に書いた、というかいろいろなページを参考にして 作ったコードはこちら。 イメージとしては横並びに二つの画像を常に表示させておいて、 一つずつずれて表示されていく、という感じです。 <!-- jQuery library (served from Google) --> <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> <!-- bx
IE11でJavaScriptやjqueryのコードが動かなくなった場合の緊急対処法 | メディカルデザイン株式会社のブログ
IE11がWindows7などでも使えるようになって、早2ヶ月を過ぎようとしております。 ちらほらと今迄動いていたJSのプログラムが動かない・動作が不安定など色々と問題が発生しているようですが、みなさんはいかがでしょうか。 特にIE11からユーザーエージェントも変更となりUAでプログラムのフローを制御している場合などは必ず問題が発生するのではないでしょうか。 ロジックもIE11からIE10からかなり変わっておりjavascriptの動作に関しても大幅に変わっています。 IE11の大きな変更点としてまとめると １ ユーザーエージェントの変更 ２ JavaScriptで取得可能なブラウザー名の変更 ３ ドキュメントモード（描画エンジン）の変更 ではないでしょうか。 １ ユーザーエージェントの変更
快適な無限スクロールを実現するために「jQuery AutoPager」を導入したぞ!! | ガジェットタッチ
しかしこのプラグイン、よくよく調べてみる最下部に付く度にどんどん記事を読み込んでしまう仕様だったのです(読者さんからの指摘で気づいた…)。さらに今回のリニューアルを行った後に不具合が続出。 そこでごりゅご.comで紹介されていたこのプラグインを試して見ることに。 AutoPagerをブログに導入する まずは以下のリンクから元ファイルをダウンロードします。 解凍すると「jquery.autopager-1.0.0.min.js」と「jquery.autopager-1.0.0.js」が出てくると思うので、今使ってるテーマの中に突っ込みます。 ヘッダーにファイルへのリンクを書く テーマの中にファイルを入れたら、HTMLからそのファイルを読み込めるように設定します。 この「AutoPaper」はjQueryで動いているので、同時にjQueryへのリンクもしておきます。 このブログではjsフォルダ
AutoPagerizeのように自動読み込みができるjQueryプラグイン - テクメモ
GreasemonkeyスクリプトのAutoPagerizeやFirefox add-onのAutoPagerのように、スクロールするだけで自動ページングできるjQueryプラグインを作ってみました。 ※10/22 全面的に書き直したv1.0.0をリリースしました。 詳しくはhttp://lagoscript.org/jquery/autopagerを参照してください。 サンプル $.autopager({ nextLink : '#nav a:last', // 次ページリンクのセレクタ pageElement: '#res' // ページコンテンツ部分のセレクタ }); jQuery.autopager(options) サイトに次ページの自動読み込み機能を付け加えます。 options nextLink: 次ページのリンクを持つ要素へのセレクタ pageElement: ページコンテ
ページ読み込み後にjavascript(jQuery)を実行する方法
こんにちは。まりもです。 ひさしぶりにweb系の備忘録です。 わざわざ記事にすることじゃないかもしれませんが、javascriptなんて全然理解してなくてjQueryもなんとな〜く使ってる無能コーダーな僕には有用な事で、しかも物忘れが激しいので残しておきます。 jQueryのプラグインを多用してると、その実行のタイミングが思い通りに行かなくてイラッとする事ってあると思う。 例えば、ブロックの高さを揃えるプラグインや、画像のサイズを一定にして並べてくれるギャラリーなど。 他にも、CSSでブロックの大きさを制御しているのに、html・CSS・javascriptの読み込みタイミングが微妙にずれてレイアウトが崩れることもある。 ハイスペックなマシンで高速インターネット接続だと大丈夫だったりするけど、汎用スペックマシンの共有ネットワークだったり、スマホやタブレット端末だと処理が追いつかないから崩れ
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
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
jQuery でイメージマップ：ほんっとにはじめてのHTML5 サンプル
jQuery プラグイン ImageMapster で、イメージマップのロールオーバーを変化させる このサンプルは、jQueryベースの「ImageMapster」というプラグインを使っています。 画像を最低2種類（ノーマル、ロールオーバー用）だけ用意すれば良いので簡単です。 「九州」のみ、リンクを外部サイトにしています。（他はこのページの下部にリンク） ★イメージマップは本来「target="_blank"」が設定できますが、「ImageMapster」を使うと無効になるようです...。 サンプルを修正しました（2013年4月） このサンプルは「リンクできない」というご指摘をいただき、ソースを修正しました。 ご迷惑をおかけした方々、申し訳ございませんでした。 解決のソースを送信してくださった中村様、ありがとうございました！！ 以前のソースはこちら。 ロールオーバーで japan2.gif
jQuery UIのDatepickerでカレンダーから楽々日付入力
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の１機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
テックノート – 【jQuery UI】 datepickerのFrom日付とTo日付の選択範囲を制限する方法
日付のカレンダー入力をするためのdatepickerですが、日付の選択範囲が制限されているサイトをよく見ます。 わたしもdatepickerを使って、日付の開始日(from)と終了日(to)を入力させるロジックを書く時は、選択範囲の制限をよくかけます。 システム上不整合を起こさせないために、終了日(to)は開始日(from)より前の日付が入力できないようにするなどの対策をとっています。 datepickerの日付の選択範囲(From-To)を制限するサンプルソースjQuery部分のソースコード <script> $( function() { var dates = jQuery( '#datepickerFrom, #datepickerTo' ) . datepicker( { showAnim: 'drop', changeMonth: true, numberOfMonths: 3
NHKスタジオパーク
NHKスタジオパーク その２ NHKスタジオパークをVRで！大人気だったアニメのアフレコやキャスター体験をどうぞ！ NHKスタジオパーク 閉館について ２０２０年５月１１日 平素よりＮＨＫスタジオパークをご利用いただき誠にありがとうございます。 新型コロナウイルス感染拡大防止のため臨時休館中のＮＨＫスタジオパークは、６月の再開をめざしてきましたが、このたび閉館させていただくことといたしました。 緊急事態宣言が延長されるなど新型コロナウイルスをめぐる状況の先行きが見通せないことと、東京オリンピック・パラリンピックの延期に伴い、放送センターの建て替え工事の準備作業にスケジュールの変更が生じたためです。 当初はことし９月いっぱいでの閉館を発表していましたが、諸般の状況の変化に伴い、閉館時期を早める判断に至りました。 長年、多くの方々にご利用いただき、心より御礼を申し上げます。 既に団体予約をされ
jQuery Masonryを使う際にわりと大事なimagesLoadedプラグイン | WEB SHOWZINE
WEB SHOWZINE Live as if you were to die tomorrow. Learn as if you were to live forever. jQuery Masonryを使っている場合、このメソッドの実行前に画像をすべて読み込んでおくようにしておいたほうがよかったりする。と思います。たぶん。 自分がやってみたものだと、これをしてないとSafariやChrome（webkit系ブラウザ）で、たまにボックス（タイリングさせている要素）が潰れたように重なってしまったりして表示崩れを起こしたので。 そのために利用できるのがimagesLoadedプラグインです。 jQuery Masonry – Images http://masonry.desandro.com/demos/images.html その潰れたようになってしまうという不具合を解消するには、im
afekenholm.se – Att synas online
Som medborgare i det moderna samhället har du troligen inte kunnat undgå att se hur tillvaron har förändrats. Det gäller i så gott som samtliga områden – men det är särskilt sant när det kommer till företagande och försäljning. Tidigare gick det att hålla sig någorlunda i skymundan som företag så länge det fanns en lojal kundkrets eller en traditionell affärsmodell som gick ut på långsiktiga klien
スマートフォン（iPhone,Android,iPad）をjQueryで簡単に判別する方法 : おばけノート
下記のように書くと、各スマートフォン別にCSSを適用することが出来ます。 （「display:block;」とか「display:none;」とか） userAgentの名前を指定すれば良いので、CSSハックより見た目で分かりやすいです。 <script type="text/javascript"> $(document).ready(function(){ var agent = navigator.userAgent; if(agent.search(/iPhone/) != -1){ $('#hogehoge').css({display : 'none'}); }else if(agent.search(/iPad/) != -1){ $('#hogehoge').css({display : 'block'}); }else if(agent.search(/Android/)
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
Color animation jQuery plugin
Bitstorm.org > JavaScript > jQuery plugins > Color animation Animating colors With jQuery's animate function, you can animate all kinds of css-properties. What's really missing from jQuery is animating colors. This plugin will add this feature. With this plugin, you can animate the following properties: color backgroundColor borderColor borderBottomColor borderLeftColor borderRightColor borderTopC
Ambiant-light image viewer with greyscaled non-selected images
You are now viewing this carousel: #35Ambiant-light image viewer with greyscaled non-selected images HTML <div id="wrapper"> <div id="carousel"> <div class="empty"></div> <div style="background-color: #cec;"> <img src="img/bugs.jpg" width="554" height="313" /> <img src="img/bugs-grey.jpg" width="554" height="313" /> <span>A Bug's Life</span> </div> <div style="background-color: #ecc;"> <img src="i
pjax - 実装｜PORTFOLIO PAPER by FAT
pjax - jquery plugin 10 pjaxはデータの読み込みと描画の冗長部分を省略することで非常に高速かつ低コストなページ移動を実現する、HTML5で実装される次期標準ブラウジング機能です。 pjaxはこのプラグインを使用することでサーバーに手を加えることなく簡単に導入できます。 最新版のダウンロード プラグインの最新版はGitHubで公開していますのでそちらからダウンロードしてください。 GitHub：https://github.com/falsandtru/jquery.pjax.js ファイル：https://raw.github.com/falsandtru/jquery.pjax.js/master/jquery.pjax.js 概要 サイト内のページ移動において指定したHTML要素（異なるコンテンツを持つ領域）のみ更新することでページ移動を高速化します。ajax
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Transit - CSS transitions and transformations for jQuery