IEではoptionタグに対してdisplayが効かないバグ - Qiita
optionタグをdisplay: none;したくてもIEではできません。 2018/01/27追記：iPhoneのSafariとかChromeでもこの現象が発生してました。 検証用コード(IEでは動かないバージョン) 本来であれば、連動して日本を選択したら日本の地域だけで絞られるんですが、IEではそうならないです。 See the Pen 単一選択プルダウンの連動(IEでは動かないバージョン) by momosetkn (@momosetkn) on CodePen. 解決策 要素を削除するやり方にする See the Pen 単一選択プルダウンの連動 by momosetkn (@momosetkn) on CodePen.
はじめてajaxを使うときに知りたかったこと - Qiita
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する（タイムアウトを設定する） 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
tipso
There is also a Wordpress version of this plugin. GET IT HERE Getting started 1. Include jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Requires jQuery 1.7+ 2. Include plugin's code <link rel="stylesheet" href="/path/to/tipso.css"> <script src="/path/to/tipso.js"></script> To use css3 animation effects please include Animate.css <link rel="stylesheet" hre
【jQuery】正規表現いろいろ - Qiita
正規表現はフォームのバリデーションなどでよく使うことがありますが、忘れてしまうのでメモ。 DEMO 半角数字が含まれる
JavaScript・jQueryの関数について - Qiita
jQuery 最高の教科書を読んで、 javascript・jQueryを改めて勉強・まとめていこうと思いました。 よく使う「関数」についてまとめてみた。 関数とは 「何らかの一連の処理を行う、複数の命令の集まり（命令群）」 関数は、同一コード内は元より、他のコードからも呼び出すことができる。 繰り返し実行する処理 何度も利用する処理 また、一連の処理をまとめることによって、処理内容を変更する際の手間を大幅に軽減することができる。（保守性） 関数を使用しない場合 $(function(){ $('#typo') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('header') .on('mouseover', function(){ // 処理A // 処理B // 処理C }); $('footer') .on('mous
イモムシでjQuery入門 | 第0回デザイナーがイモムシで覚えるjQuery
イモムシjQueryは、jQueryは覚えたいけど、 作りたいサイトはなくて、試す対象がなくて、モヤモヤしてる人にオススメです。 ブログバーツみたいにサイトにこっそり設置しよう！ 名前をつけて愛でよう！ うちの子はクロスケです。クロスケかわゆす。
.on()と.off()を使いこなす 1 | CodeGrid
実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
if文（ANDやOR条件編） - jQuery syntax
if文使ってると「○○かつ××であるとき」とか「○○か××であるとき」みたいな、かゆい所が出てきます。そういう時if文に複数の条件を持たせることができます。else ifとはちょっと感覚の異なる「一度に複数の値を判別する」ものです。論理演算子と言います。 複数の条件全てに合致してほしいとき（AND検索みたいな状態）&&を使います。 $(document).ready(function(){ var numA = 1; var numB = 2; if (numA == 1 && numB == 2) { alert("numAが1かつnumBが2です。"); } });この場合numAは1でないといけませんし、numBも2でないといけません。両方が合致して初めて命令が実行されます。 複数の条件いずれかに合致してほしいとき（OR検索みたいな状態）||を使います。 $(document).re
jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等 | Stronghold Archive
どうもこんばんは。今回のTipは【jQuery 兄弟要素の取得と操作 – 自分以外の兄弟、自分以降の兄弟、自分以前の兄弟等】です。兄弟関係は出現頻度が高いのでメモしておきますね。他にも色々実装する方法がありますが以下の方法が一番シンプルかと思います。 まずは自分以外の兄弟要素を操作する方法です。兄弟関係の中から一つクリックで実行としています。自分以外を対象とする場合【siblings()】を使用します。 HTML（共通） <ul id="ex"> <li>list</li> …. <li>list</li> <li>list</li> </ul> JS $(‘#ex’).children().click(function(){ $(this).siblings().css({‘background’:’#007374′}); $(this).css({‘background’:’none’
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
jQueryでリストなどに連番でIDやクラスを追加（ナンバリング）する方法｜BLACKFLAG
以前ここで「jQueryでの連番要素を制御する方法」と題して、 jQueryで連番要素の制御を簡単に行う方法を紹介しましたが、 同じ様にjQueryを使って簡単に連番でのIDを追加したりクラスを追加したりする方法を紹介してみます。 例えば＜li＞を使ったリストを5行で用意します。 HTML側では＜li＞自体にはIDもクラスも付けません。 ◆HTML【BASE】 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> そしてこれらのリストに対して、下記スクリプトを実行させることで 自動で連番でのクラスを追記することができます。 （クラス名は「.number1」～とします。） ◆SCRIPT【SAMPLE01】 <script type="text/javascript" src="http://ajax.googleapis.
jQueryでテキストボックスの変更を監視/検知する - Qiita
はじめに テキストボックスの変更を検知したくてイベントの挙動を調べたりしたのでメモ。 change, keypress, keyupの挙動まとめ キー操作したときにどんなイベントが発生するのかは日本語入力時に発生するキーイベントのテストを使って確認させていただきました。 ポイント changeはフォーカスが外れたときに発生する keypressは全角やdelete,backspaceを入力しても発生しない keyupはカーソル移動や全角・半角の切り替えなどすべてのキー操作を拾ってしまう change changeイベントを使うと変更を検知できます。
jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法｜BLACKFLAG
今やTwitterで有名になった、入力フォームに文字を入力した際のリアルタイム文字カウント表示。 この様なINPUTやTEXTAREAに入力されたテキストの文字数を数えるには jQueryの「$(●●●●).val().length;」を使うと簡単に取得することが出来るようだったので 文字カウント、カウントダウンのいろいろな取得パターンを作ってみました。 jQueryで入力フォームに文字カウント（カウントダウン）を設置【SAMPLE１】 まずは単純に入力された文字数を表示するパターン。 HTMLには文字数を表示するエリアと 入力フォーム（ここではTEXTAREA）を設置します。 ◆HTML <span class="count">0</span> <textarea name="textarea" rows="10" cols="30"></textarea> CSSは特に動作には関係しな
[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog
クライアントから「サイト内の画像を保存できないようにしてほしい！」というご要望をいただくことがたまにあります。 ウェブサイトに画像を掲載している以上、画像保存を完全に阻止するということは不可能です。 ソース読めば画像のパスなんてわかるし。最後は画面キャプチャしちゃえばいいし。 なので完全に阻止することはできませんが、できる限り画像保存までの手間を増やす対策をご紹介します。 １：jQueryで「contextmenu」イベントを使って右クリックを禁止にする ２：スマホの場合 CSSを使って長押しアクションを禁止する ３：スマホの場合2 jQueryのタッチイベントを使って画面の長押し後に表示されるメニューを表示させないようにする ４：jQueryライブラリ「dwImageProtector Plugin」を使って対象画像の上に透過画像を重ねる １：jQueryで「contextmenu」
![[PC・スマホ]サイト上の画像の保存をできる限り阻止する対策法 | hi-posi Front-End blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3dc975c11ef80489c34cee076c9d6afb23bc3dc/height=288;version=1;width=512/http%3A%2F%2Fhi-posi.co.jp%2Ftech%2Fwp-content%2Fuploads%2F2015%2F04%2FdwImageProtectorPlugin.jpg)
指定した背景画像をx秒毎に切り替えるjQueryプラグイン - Rewish
img要素ではなく背景画像（background-image）を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御（開始/停止/リセット） ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
jQueryでiframe内のページから親ページを操作する方法｜BLACKFLAG
少し前に「jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法」と題して、 iframeの親ページから子ページを操作する方法を紹介しましたが、 その逆の、iframeの子ページから親ページを操作をする方法について 簡単なサンプルを交えて紹介してみます。 親ページ側では特にjQueryファイル自体を読み込む必要は無く、 iframe内に表示するページ側で、jQueryファイルと共に 下記の様なスクリプトを書くことで操作することが可能になります。 ◆SCRIPT $(function(){ $('p',parent.document).css({color:'#ff0000'}); }); この記述方法（参考例）の場合だと、iframe内のページからの操作で 親ページの＜p＞タグのテキスト色を「赤」に変更します。 スクリプトを実行させる該当要素の後に「,pare
Basic Table (jQuery) Demo
Demonstration of different settings for Basic Table. For full documentation of settings and method visit http://www.jerrylow.com/basictable or https://github.com/jerrylow/basictable. Basic Implementation The basic implementation using all default settigs. The table will use responsive mode when the viewport is less or equal to 568px in width. Name Age Gender Height Province Sport
Responsive Tabs
Bootstrap Responsive Tabs Notes on design: Inspired by Safari-style browser tabs. Tabs shrink/grow based on specified min and max width. There is a 300ms delay after a resize, for performance reasons. If tabs don't fit across the container width, a dropdown appears to the right of tabs. For devices with screen width of < 768px, the tabs dropdown becomes an overlay. How to Test: Resize your browser
Home
Simple flat file CMS WonderCMS is the smallest flat file CMS Free, fast & easy editing, only 5 files 1-step install Simply unzip and upload 5 files anywhere on your server. WonderCMS is a flat file CMS, meaning it uses a text file as a database. It's installed without any configuration, since no relational database (like MySQL) is required. Privacy CMS, no commercial gain Free and open source sinc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryクイックリファレンス
