エラー箇所など指定した要素にスクロールで移動する
photo by mollyali 縦長Webページの入力フォームなどで、バリデーション後にエラーを表示したいことがある。その方法はいくつもあるが、今回はエラー箇所にスクロールで移動する方法を実装する。 ※サンプルではjQueryを使用しているが、使わなくても対応可能（アニメーションが面倒だけど） 特定の要素にスクロールで移動する var position = $('セレクタ').get(0).offsetTop; $('body').animate({scrollTop: position}, 'slow'); 要素の位置を取得するには $('セレクタ').get(0).offsetTop を使う。 $('セレクタ').offset().top で位置を取得するとズレる場合があるので注意。 また、複数ある要素のうち1番目に移動したい場合は、 $(‘セレクタ:first’).get(0).
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
BeautyTips Demo Page
BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called "talk bubbles" or "help balloons") associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways. The canvas element is supported in modern versions of FireFox, Safari, and Opera. However, Internet
jQueryとCSS3で手軽に実装できるスクロールエフェクト
jQueryとCSS3で手軽に実装できるスクロールエフェクト近頃Webデザインのギャラリーサイトで見かける素敵Webサイトって、どれもアニメーションなどのエフェクトがかっこいいですよね。という事で今回は、中でも簡単に実装できそうな効果をひとつ。スクロールすることで要素が可視範囲に表示されると、CSS3のアニメーションを使ったエフェクトが実行される、というのを実装してみようと思います。なんだか難しそう…と、食わず嫌いでいた人でも、基本さえおさえておけば、あとはアイデア次第で自分好みにカスタマイズできると思いますよ！ 基本：スクロールでテキストをぼわ〜んと表示画面をスクロールすると、下からぼわ〜んとテキストが表示されるエフェクトを実装してみましょう！ HTMLまずはエフェクトを与える要素を HTML に記述。安心してください、まだ何も変わったことはしてませんよ。 <p>Nobody likes
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
CoffeeScript と TypeScript をそれぞれ実務案件で使ってみた感想 | DevelopersIO
そんな訳で、CoffeeScript を触り始めて半年弱、TypeScript を触り始めて1ヶ月弱ほど経ちました。まだまだ日は浅いですが、いちおう両方とも実務案件にて使用したということで、ここらで双方に対する振り返りを簡単にしておくとします。 CoffeeScript について http://coffeescript.org/ 学習開始時期: 2014年1月頃 始めたきっかけ: Middleman や Ruby on Rails が標準サポートしているため、面倒な環境構築等をしなくて済んだから Ruby や Haml のようなテキスト量の少ない文法が好みだったから そんな訳でとっかかりとしての基礎学習期間はだいたい2〜３日くらいで、そこから既存のプロダクションコードを CoffeeScript に書き換えつつ実案件に取り入れていきました。 おおまかな特徴 要は JavaScript をよ
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
jQuery deferredの使い方 | 前編 deferredの基本
jQuery deferredの使い方 前編 deferredの基本 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基本機能までをおさえます。 なぜ、今、jQuery deferred？ この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと
$.post() | jQuery 1.9 日本語リファレンス | js STUDIO
$.postは$.ajaxの略記です。$.ajax関数で次のように指定した処理と同じ処理を実行します。 $.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType }); デモ test.phpにリクエストを送信します。サーバが返す値について、処理は行いません。 $.post("test.php"); test.phpにデータをリクエスト(POST)送信します。サーバが返す値について、処理は行いません。 $.post("test.php"); test.phpに配列データをリクエスト(POST)送信します。サーバが返す値について、処理は行いません。 $.post("test.php", { 'choices[]': ["Jon", "Susan"] } ); test.phpにフォームの
JavaScriptによる簡易パスワード認証
サンプル パスワードは「secret」になっています。お試しください。 ソースプログラム <form> <input type="password" size="20" name="pass"> <input type="button" value="認証" onClick="location.href = this.form.pass.value + '.html';"> </form> なお、ジャンプ先の秘密ページの<head>～</head>内に、以下の設定を入れておくことをおすすめします。（googleなどの検索ロボットに秘密ページを探られてしまい、検索ページに載ってしまうことを防ぎます。） <meta name="robots" content="noindex, nofollow"> また、秘密ページのあるディレクトリのデフォルトページ(普通はindex.html。Window
JavaScriptでパスワード認証を設定！ 簡単な閲覧制限 [ホームページ作成] All About
パスワードを入力しないとアクセスできない秘密のウェブページを作りたい場合、いくつかの方法があります。例えば、ウェブサーバのBasic認証(基本認証)機能を利用したり、パスワードの入力を求めるCGIを作成して使ったりする方法があるでしょう。 しかし、個人サイトなどでは「そこまで強固な認証機能は要らないので、複雑なことはせず、とにかく簡単にアクセス制限を設定したい」という場合もあるでしょう。そのような場合は、JavaScriptでパスワードの入力を求める手軽な認証方法を使ってみてはいかがでしょうか。 完全ではない(脆弱な)代わりに、簡単に作れるJavaScriptでの認証機能 JavaScriptを使ったパスワード認証は「なんちゃって認証」とでも呼べばよいか、完全なアクセス制限にはなりません。URLを直接指定すれば誰でも閲覧可能なため、認証後のURLがバレるだけでパスワードを入力せずにアクセス
![JavaScriptでパスワード認証を設定！ 簡単な閲覧制限 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/112accb6de011511eb52251d9695a915d168ef2e/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fix-aa.aacdn.jp%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F3%2F9%2Ftopimg_original.png%3Fim%3DAspectCrop%3D%2816%2C9%29%3BResize%3D%281600%2C900%29)
jQueryでリンクをクリックさせたい時 - Qiita
javascriptから、特定のリンク要素をクリックさせたい時があるかもしれないですね。 今回その必要が生じたのは、javascriptのlocation.hrefではInternet Explorerでリファラが送信されないことが発覚したから。 本来、そのような実装は避けるべきだが、どうしても特定箇所のリンクをクリックさせたいときは下記のように書く。
Autocomplete | jQuery UI
Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source
Select2 4.0.0 jQueryプラグイン 新バージョンここがすごいよ - Qiita
先日jQueryで使えるドロップダウン代替プラグイン5選でご紹介したSelect2プラグインですが、もうすぐメジャーバージョンアップを控えていて、この記事を作成している現在リリース候補版となっています。 Select2 https://select2.github.io/ ここで新バージョンがどのように改善されているのかいくつかご紹介したいと思います。 公式ドキュメントからの情報をまとめています。 コードのフルリファクタリング これまで3年間維持してきたコアのコードを全て書き直したとのこと。 ソースの見やすさやパフォーマンス向上が期待できますね。 後方互換性ももちろん持たせているそうです。 新しいプラグインフレームワーク プラグインを簡単に実装しやすくするためにアダプタシステムが用意されています。 本体に手を入れずに気軽に拡張できるのが良さそうですね。 代替input要素の排除 これまで、
ng-inspector - The AngularJS inspector pane for your browser
ng-inspector is a browser extension for Chrome, Safari and Firefox that adds an inspector pane to help you develop, debug and understand your AngularJS applications. Crypto users will benefit from these browser extensions in order to get the most out of their research. There are similar browser extensions for crypto users and traders that helps them with cryptocurrency trading and help them to tak
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Javascriptで前のページに戻るを実装 - Qiita
Enterキーを無効にする方法 - Qiita
Twitter Bootstrap使い方-javascript-v2.0.4
Loading...
jQueryで使えるドロップダウン代替プラグイン5選 - Qiita
