Javascript（jQuery）による全角/半角/数字/ひらがな/カタカナ変換
フォーム入力で、メールアドレス・電話番号、郵便番号などをユーザーに入力してもらうとき、全角半角変換がしたい時があるので備忘録として貼り付けときます。【※追記】カタカナ・ひらがな変換機能も追加しました。 (function() { $(document).ready(function() { /** * ------------------------------------------------------------ * クラスにバインド */ $(document).on('change click blur', '.nospace', function() { $(this).val(del_space($(this).val())); }); $(document).on('change click blur', '.trim', function() { $(this).val
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
スマートフォンで簡単に横スクロールメニューを導入する方法
最近スマートフォンで横スクロールを導入しました。スマートフォンの表示の時には右上にバーガーボタンをおいているのですが、これじゃわからない人が多くいると思ってバーガーボタンはそのままおきつつ、横スクロールでもう少しわかりやすくなるようにしました。 いや意外とこれが結構簡単でした。 一応ソースコードもコピペ出来るようにしておりますので、ぜひみなさんも横スクロールを導入してみてください。今は横スクロールで見せる時代ですよ！
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับมิได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่พวกเรามีให้เฉพาะ
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
ページの画像を非同期で読み込んでくれる「Lazy Load」 「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード | 画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」 「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ 表示パターン豊富なスライダー「flexslider 2」 「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示 わずかなコー
Form Buttons with Love
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
以前、紹介した「Page Scroller」のバージョンアップ版「Page Scroller ver.3」の紹介です。 追記： 2013年10月26日 ver.3.0.9をリリース jQueryの旧版によるXSSに対応しました。 2011年5月4日 デモおよびダウンロードファイルをjQuery1.6に変更しました。 2011年1月31日 ver.3.0.8をリリース 機能を追加しました。 2010年11月19日 ver.3.0.7をリリース ライセンスを変更しました。 2010年11月17日 デモおよびダウンロードファイルをjQuery1.4.4に変更しました。 2010年9月19日 デモおよびダウンロードファイルをjQuery1.4.2に変更しました。 2009年7月6日 対応ブラウザ（IE8, Fx2.5, Chrome2）を更新しました。 2009年2月23日 ver.3.0.6をリ
![[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
見た目を綺麗に整列する！ブロックレベル要素の高さを揃えるJS3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 コーディング中にいざ本番の文言を入れたら、予想以上に長さがバラバラで見た目が揃わない…！なんてこと、ありますよね。今回はそんな時に活躍してくれるブロックレベル要素の高さを揃えるjsを3つご紹介します。 heightLine.js 配布ページ <script type="text/javascript" src="heightLine.js"></script> class名のつけ方によって高さを揃える要素をコントロールできるJavascriptです。 子要素の高さを統一できる「heightLineParent」が便利で良くお世話になっていました。 jQueryAutoHeight.js 配布ページ※このページは現在削除されています。 <script type="text/javascript" src="jquery.js"></script> <s
text-overflowはFirefox7から使える／複数行の時はJavaScriptで対応 - with the flow
まんまです。使えるようになってるのを最近知りました。 text-overflowはIEが6から独自仕様として実装していたものですが、 Microsoftの珍しく素晴らしい先見性によって、CSS3の仕様にも組み込まれたものです。今までもwebkit,Operaでは使えていました。 それが、Firefox7からようやく実装されたということですね。 以下のクラスを作っておいて、横幅の指定された対象要素のクラスに追加してあげれば良いです。 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; -o-text-overflow: ellipsis; } はてなはCSSが使えるようなので、以下実際にやってみますね。 わかりやすいようにボーダ
まとめ：ThickBox の使い方 (記述例＆Tips) – attosoft.info
ThickBox は画像や動画など任意のコンテンツをポップアップ表示する jQuery プラグイン。Lightbox や fancyBox などと並ぶ代表的な人気スクリプトの一つ。すでに開発は終了しているが、その汎用性の高さやシンプルさから未だに多くの Web サイトで使われている。 そんな ThickBox の使い方 (記述例や Tips など) を体系的にまとめてみた。開発が終了して久しい ThickBox に関する説明ページを、今更ながらに作成した理由は主に次の 3 つ。 Auto ThickBox Plus を開発している関係で ThickBox の情報をまとめる必要がでてきた “thickbox” を含む検索キーでこのサイトにたどり着いてしまう人が非常に多い 未だに多くの Web サイトやソフトウェア (WordPress など) で採用されている ※ 注：このページのデモで使わ
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
jqueryの基礎
よく使うようになった JavaScript ライブラリの jQuery を簡単に紹介。 jQueryの使い方 まず jQueryをダウンロードして利用する html でロードするようにします。そして、CSSクラスやCSS ID に対して動作させたい内容（アクション）を関数で定義します。どのように jQuery が動作するか簡単な図を以下に示します。 この例では、"ボタン"リンクがクリックされたら、隠れている"panel"をスライド表示されるものです。 実際の動作例： ↓ボタン $()関数 jQuery のもっとも基本となる操作は $() 関数を利用することです。この関数で操作したい対象を選び、様々な操作を行うことができます。$()の指定方法は、CSSとXPathどちらでも利用できます。 指定場所（セレクタ） 概要 例
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Parallax Slider with jQuery
monopocket.jp - このウェブサイトは販売用です！ - monopocket リソースおよび情報