CVRアップにこれが効く！フォーム検証jQueryプラグイン10本をサンプルで徹底比較
エラーメッセージや、入力サポートメッセージの表示は、ユーザーにメリットがあるだけではなく、フォームでの離脱を防ぎます。jQueryで簡単に実装、カスタマイズできるプラグインを中心にサンプルコード付きでまとめました。 HTML5では新しいform属性が導入され、ブラウザーがフォームのバリデーションを直接実行できるようになりました。基本的なフォームバリデーションは、この記事に書かれているようなプラグインを使わなくても、CSS3とJavaScriptで実現できます。とはいえ、HTML5を使ったフォームバリデーションには次のような制限があります。 エラーメッセージについてはブラウザーに任されており、自分で設定できるのは入力フィールドのタイトルのみ。 エラーメッセージのスタイルはカスタマイズできない。 入力フィールドのパターンは自分で作成しなければならない。 次の10個のjQueryフォームバリデー
html – lesson me
JQueryを使ってプルダウンでコンテンツ内の要素表示切替 正直ネタがないのでメモ的感じで。 初回読み込み時は、すべてのエリアの情報を表示して、プルダ
IcoMoonの使い方・ライセンス一覧など!Webフォントで扱えるアイコン素材サイト
IcoMoonとは IcoMoonは、Webフォントとして扱えるアイコン素材を配布するほか、自作のアイコンや他の素材サイトでダウンロードしたSVGアイコンをWebフォント化することができるサービスです。 【URL】 IcoMoonのサイトはこちら それでは、IcoMoonの使い方をご紹介します。 アイコンのダウンロード方法 （1）トップページで右上のIcoMoon Appをクリックします。 （2）アイコン一覧が表示されるので、使いたいアイコンを選びます。 もし好みのものがなければ、「Add Icons From Library…（ライブラリからアイコンを追加する）」、または、画面上部の本のアイコンをクリックすると、ライブラリを開き、他のアイコンを追加することができます。 ライブラリを開くと、このような画面が表示されます。 Purchase（購入）のボタンがあるものは有料、Remove（外す
Material Design Lite
COMPONENTS Material Design Lite (MDL) is a library of components for web developers based on Google's Material Design Philosophy: "A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science." Understanding the goals and principles of Material Design is critical to the proper use of the Material Design Lite co
生JSとjQueryの基本操作比較 - Qiita
<p>jQueryの練習</p> <ul id="main" data-hoge="datahoge"> <li>0</li> <li class="item" data-index="one">1</li> <li class="item">2</li> <li> 3 <ul id="sub" class="hoge" style="padding: 5px; border: solid 10px #0000ff;"> <li><div>hoge</div></li> <li id="sub1">3-1</li> <li id="sub2" class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> </li> </ul>
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
動画をWebサイトの背景にするjQueryプラグイン「VIDE」 | ホームページ作成、システム設計 glic株式会社
Webページの背景を動画にできるjQueryプラグインを見つけたので紹介します。 例えばページ全体の背景を動画にするなど、うまく使うとかっこいいサイトができると思います。 インストール方法 1. Bowerを使う場合 bower install vide 2. 手動でインストールする場合 GithubからZIPファイルをダウンロードし、展開します。 distフォルダの中にあるjquery.vide.min.jsをページに追加します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.vide.min.js"></script> 使い方 背景にしたい動画を用意します。 クロスブラウザ対応のため、動画形式はいくつか用意する必要があります。
パララックスエフェクトの基本
Sample #7 | jQuery × CSSの合わせ技 最後に今回の集大成を作りましょう。先ほど作ったCSSのみのサンプルに、jQueryを駆使してよりリッチな動きを加えていきます。 まずはjQueryで各要素を操作しやすくするために、Sample #6のHTMLに以下のように追記していきます。 <section id="first" class="content"> <p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p> <article> <h1>Parallax sample.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p> </article> </section
ど素人のJavaScript入門 - 郵便番号の入力チェック
郵便番号の入力条件を以下のように設定します。 123-4567 のような、数字3ケタと数字4ケタの組み合わせとする。1123-4567 や 123-45678 のような、合計7ケタを超える入力をはじく。ハイフンのない、1234567 のような入力でも可とする。 フォームを作って上の入力チェックを行ってみましょう。 <!-- function postcheck(){ if(document.postform.posttext.value.match(/^\d{3}(\s*|-)\d{4}$/)){ alert("正しい形式の郵便番号です。"); }else{ alert("正しくない形式の郵便番号です。"); } } // --> </script> </head> <body> <form name="postform"> 郵便番号を入力してください。<input type="text"
Pull Down for Navigation | Tom Kenny Design
Mobile screen real estate is at a premium and one of the biggest problems to solve is how to display navigation when screen widths become quite narrow so I decided to have a look and see what I could come up with using some nifty CSS and a touch of jQuery. Trying to condense a navigation down onto a mobile screen tends to push the actual content of the site down and out of initial view. Luke Wrobl
技術系サイトに必需品！ ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK！「Syntax Highlighter」の使い方
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
jqueryのanimateでbackground-positionを動かそう | 日記の間 | あかつきのお宿
※この記事の内容で動かすことが赦されるのは、小学生までだよね～……じゃなくって、ここに書いてあることは、jqueryのバージョンが1.7以下の場合に有効なようです。バージョン1.8以降を使ってる人は、こっちの記事（jquery1.8にしたらanimateでbackground-positionを動かせなくなったって人は挙手をどうぞ）をよろしくよろしこ。 （11月8日追記） jqueryのおかげで様々なアニメーションを簡単に実装できるようになった。 一昔前はflashを埋め込まないと実現できなかったような動きもjqueryのおかげで、flashを知らない、phpとjavascriptくらいしか知らない僕みたいなプログラマでも実現できるようになった。 また、jqueryの普及に伴いプラグインの数も大量に増えたため、かなり複雑な動きでもほんの1、2行コードを書くだけでできるようになった。 便利な
wp_head()で展開されるjqueryのリンクをgoogleapiから読み込ませる方法 | WordPress攻略本
wp_head();を記載した箇所をブラウザからhtmlソースでみると [html] <script type='text/javascript' src='http://domain.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script> [/html] とjqueryを読み込むhtmlが展開されます。 これをgoogleapisから読み込む方法です。 [html] wp_deregister_script( 'jquery' ); wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js'); [/html] wp_head()より上の行にwp_deregister_script('jquery');を記
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Progressbar - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
dbpas :: dbpasCarousel
syntaxhighlight.in
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
GitHub - p-m-p/slider: A modern, light weight content slider
