[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js
デモページ：Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ：Default デモページ：Gradient デモページ：Sections デモページ：Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指
[JS]ページのツアーガイドをjQuery無しで実装するスクリプト -Shepherd
Shepherdの使い方 Step 1: 外部ファイル 当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="shepherd-theme-arrows.css" /> </head> <body> ... <script src="shepherd.min.js"></script> </body> Step 2: HTML HTMLは普通に実装してOKです。 ガイドを表示する要素には、それが指定できるようclassを付与しておきます。 Step 3: JavaScript ガイドを表示するタイミングや内容はスクリプトで記述します。 基本書式は下記のようになり、classesに表示する場所、scrollToで自動スクロールの有無を指定します。 tour = new Shepherd.Tour defa
[IE6|IE7|IE8]cloneNodeで複製したエレメントのidをjQueryから参照出来ない時のTips - Web 業界の技術屋 | VIVID Labs.
var content = document.getElementById('listBox'); var clone = document.getElementById('list1').cloneNode(true); clone.id = 'temp'; clone.style.position = 'absolute'; clone.style.left = '600px'; content.appendChild(clone); $('#temp').animate({left: 400}); cloneNode して、id を書き換えて親要素に appendChild して動かそうとした訳です。 IE 以外のブラウザはこれで問題無く動きます、IE 以外は。 IE だけは #temp を呼ぶと複製元である #list1 を参照して、そちらを動かそうとします。ちなみにリスナを仕掛け
jQueryやJavaScriptでパスワードフィールドの文字を表示する方法
jQueryやJavaScriptでパスワードフィールドの文字を表示する方法を紹介します。 １．はじめに パスワードフィールドに入力した文字を確認したいことがあると思いますが、デフォルトのパスワードフィールドでは「●」しか表示されません。 ということで、パスワードフィールドの文字を表示するサンプルを作ってみました。 通常のパスワードフィールド チェックボックスをチェックすればパスワードフィールドを表示 ウェブサイトなどで入力したパスワードを確認したいときに便利です。 ２．パスワードフィールドの文字を表示する（jQuery） パスワードフィールドの文字を表示するには次のようにします（jQuery2.1.1で確認）。 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function()
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
複数のソーシャルボタンを設置し動的に呼び出す - という話
サイトシェア用と記事シェア用に、同じ種類のソーシャルボタンを置くことになった時のメモ。 ソーシャルボタンは一つ置くだけでかなりレンダリングに時間がかかるので、記事シェア用は静的に設置し、サイトシェア用は動的に呼び出すようにした。 動的に呼び出すのはTwitter,Facebook,Google,はてブの4つ。 まずは普通に記事シェア用のボタン群を各SNSの説明に書かれている通りに設置する <!-- twitter --> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'htt
CSS3からの新しい単位「rem」をIE8でも利用できるようにするスクリプト -REM unit polyfill
当ブログで紹介した「フォントのサイズ指定はpx？ em？ 既存の再検討とこれからのテクニック」でこれからのfont-sizeの単位に「rem」を使う方法など、CSS3の新しい単位「rem」は非常に魅力的ですが一つ問題があります。 それは「rem」はIE8をサポートしていないこと。 ここで紹介するのは、その問題を解決するIE8でも「rem」を使えるようにするスクリプトです。使い方はスクリプトを外部ファイトとして記述するだけなので簡単！ REM unit polyfill REM unit polyfill -GitHub CSS3からの新単位「rem」とは REM unit polyfillのデモ REM unit polyfillの使い方 CSS3からの新単位「rem」とは まずは、「rem」のおさらいを簡単に。 サイズの単位には「px」「pt」などの絶対単位、「em」「%」などの相対単位
PCのブラウザでiPhoneやAndroidのようなパスワードフォームを実現するJavaScriptライブラリ「FormTools」
PCのブラウザでiPhoneやAndroidのように、直前に入力した文字が見えるパスワードフォームを実現するJavaScriptライブラリ「FormTools」を紹介します。 １．はじめに PCのパスワード入力では、入力した瞬間に文字が黒丸でマスキングされてしまうので、入力文字の確認ができません。 PCのパスワードフォームのマスキング（入力文字が確認できない） これにひきかえ、iPhone（iOS）やAndroidといったスマホのパスワード入力では、直前に入力した文字が表示されるようになっています。 パスワードの1文字目を入力 パスワードの2文字目を入力（1文字目がマスキングされる） すべてのパスワードを入力してフォーカスをはずしたあと（すべてマスキング） 本エントリーで紹介するJavaScriptライブラリを利用すれば、PCのブラウザでiPhoneやAndroidのパスワード入力のような
ajaxzip3 郵便番号検索 株式会社人気組
株式会社人気組, ajaxzip3, 郵便番号検索ajaxzip3 世界一、簡単に設置できる郵便番号検索を目指して！ 設置サンプル このページのHTMLソースコードを確認してみてください。 ajaxzip3は既存のHTMLページにたった2行のコードを加えるだけで設置できます。 プログラミングやサーバの設定は必要ありません。 郵便番号を入力すると自動的に住所が表示されます。 1ボックスで郵便番号7桁を入力させる場合の設定例 都道府県と以降の住所を分ける場合 郵便番号： 都道府県： 以降の住所： 都道府県と以降の住所を分けない場合 郵便番号： 住所： 郵便番号を3桁-4桁形式で入力させる場合の設定例 郵便番号：－ 都道府県： 市町村区： 以降の住所： Powered by 株式会社人気組
スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com
（追記: 2018年10月）何年か経ってから見ても内容大丈夫そうでした。 この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。 どうやったらスムーズに動くかってのを解説したいと思います。 なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。 先に結論 概念的なの GPU合成レイヤーを適切に使うと早い いわゆるハードウェアアクセラレーション 何がCPUで、何
» スマホでスクロールを禁止させる方法 | negic
軽めのjQuery Advent Calendar 2012の24日目の記事です！ PCサイトでスクロールを禁止させるには、bodyにoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。 スマホでスクロールを止めるには、jQueryを使うと便利です。 スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。 方法は下記のとおりです。 $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); あるタイミングでスクロールさせたくなったら、off()すればいい。 $(window).off('.noScroll'); イベント名に、.noScrollとあるが、
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
いまさら聞けないCSS3入門＆スマホ対応6つの問題点
いまさら聞けないCSS3入門＆スマホ対応6つの問題点：スマホ向けサイト制作で泣かないための秘伝ノウハウ（4）（2/2 ページ） CSSのスマホ対応におけるOS／機種依存事例6選 では、スマートフォン向けWebサイトを制作するに当たって、CSSのOS／機種依存事例をご紹介します。 【1】position: fixedを利用する場合には注意が必要 これはCSSの依存事例としては有名なものです。サイト上で、メニューなどを固定位置に配置するためにpositionプロパティを利用することがあります。画面のスクロールの状態に関係なく固定位置にするには、fixedを指定しますが、これはすべてのスマートフォンで有効なわけではありません。 まずOSバージョンとして完全に対応しているのは、iOS 5.1.1以上、Android 3.1以上となります。Android 2.3でも設定はできますが、viewport
json.human.js - Json Formatting for Human Beings
json.human.js: Json Formatting for Human Beings Provide JSON and get a DOM node with a human representation of that JSON. Why? At Event Fabric we need to display JSON to people from all technical levels without being too technical but also without losing information about the underlying JSON object. How? you can see js/demo.js in the repo for an example, here is a short one var node = JsonHuman.fo
Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に
Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に
Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.js
Googleのスプレッドシートをデータベースのように利用出来るようにするスクリプト・Sheetsee.jsのご紹介。シートを元にグラフや地図などを作成出来るみたいです。 スプレッドシートをDB化する、というライブラリです。利用するには他のいくつかのライブラリを併用して実装するようですね。 利用するにはいろいろと前準備が必要です。 シートの書き方もルールに沿う必要があります。 スプレッドシートは公開設定にし、Tabletop.jsでデータを取得します。 長くなるので詳細は本サイトをご確認ください。Sheetsee.jsを使った動作サンプルもあるので合わせてご覧頂ければと思います。 ライセンスはBSDとの事です。触る暇があれば触って見たいです。 Sheetsee.js
Skeuocard by kenkeiter
Skeuocard progressively enhances credit card inputs to provide a skeuomorphic interface. Learn more about the concepts behind the design: "Redesigning The Credit Card Input" by Ken Keiter. Tweet View the Project on GitHub kenkeiter/skeuocard Download ZIP File Download TAR Ball View On GitHub Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seein
Google ChromeでJavaScriptエラーを通知してくれるChrome拡張「JavaScript Errors Notifier」
Google ChromeでJavaScriptエラーを通知してくれるChrome拡張「JavaScript Errors Notifier」を紹介します。 １．概要 Google Chromeでページを表示したとき、そもそもJavaScriptエラーが発生しているかどうかが分かりません。 JavaScriptエラーと分かった場合でも、次のようにコンソールを開かないと詳細を確認することができません。 このアドオンを利用すれば、ページを表示した時点でJavaScriptエラーを知ることができます。 なおコンソールを使ったJavaScriptエラーの確認方法については、「JavaScriptエラーを表示・確認する方法のまとめ」をご覧ください。 ２．インストール 「JavaScript Errors Notifier」のページを開きます。 右上にある「CHROMEに追加」をクリック。 表示された
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://repopgl.org/