スクロール途中から位置が固定されるナビゲーションを作ってみる
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
様々なJavaScriptライブラリをコレクションしているWebサイト・JSDB.IO
様々なJSライブラリのまとめサイトのご紹介。主にクライアントサイドのJSライブラリを中心にコレクションしているみたいです。シンプルで探しやすかったのでメモ。 JSのコレクションサイト。サクサク動作して広告などの余計なコンテンツも無いので非常に探しやすい印象です。
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
[JS]ページ上部にアニメーションでスライド表示するパネルを手軽に実装できるスクリプト -Notification
2秒後に自動で閉じるデモ [ad#ad-2] Notificationの実装 外部ファイル 「jquery.js」と当スクリプト、パネル用のスタイルシートを外部ファイルとして指定します。 <script src="jquery.js"></script> <script src="js/jquery_notification_v.1.js"></script> <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/> JavaScript showNotification(params); 「params」には「message：表示するメッセージ」「type：パネルのタイプ」を記述します。 showNotification({ message: "This is a sample Success
Zeonjs.com
Zeonjs.com Related Searches: Health Insurance Healthy Weight Loss music videos Work from Home Free Credit Report Parental Control Credit Card Application Related Searches: Health Insurance Healthy Weight Loss music videos Trademark Free Notice Privacy Policy|Do Not Sell or Share My Personal Information
[JS]フォームのフィールドにテキストを表示する軽量スクリプト -autoclear
フォームのテキストフィールドに、入力補助になるテキストを表示し、ユーザーの入力時にそのテキストを消去するjQueryのプラグインを紹介します。 jQuery Plugin: autoclear デモ [ad#ad-2] テキストフィールドに表示されるテキストには、class名を付与し、スタイルシートでカラーなどを設定することもできます。 デモは、「color:gray;」が指定されています。 autoclearの実装 HTML 表示されるテキストは、title属性内のデータを利用します。 <form method="post"> <label for="name">Name:</label><input type="text" id="name" name="name" title="John Smith" value="<?php echo $_POST['name'];
JavaScriptにおける良く使う正規表現｜web bibo
よく使う正規表現例 メールアドレスを検索 例1：[\w.-]+@[\w.-]+ 例2：[\w\d_-]+@[\w\d_-]+\.[\w\d._-]+ 例3：[a-zA-Z0-9!$&*.=^`|~#%'+\/?_{}-]+@([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,4} ※例3はメールアドレスを厳しくチェックする場合 URLを検索 (\S+)://([^:/]+)(:(\d+))?(/[^#\s]*)(#(\S+))? IPアドレスを検索 (\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3}) 郵便番号を検索 \d{3}-\d{4} [ ]で囲まれた文字列を検索 \[[^\[]*?\] HTMLタグを検索 <("[^"]*"|'[^']*'|[^'">])*> 正規表現を使うにあたって注意すること new RegExp()の引数には正規表
埋め込まれたiframeをリロードさせる方法 - ヒルズで働く@robarioの技ログ
iframeを更新させるためにこんな処理が書いてあって、 <iframe id="foo" name="foo" src="/bar.html"></iframe> <a target="foo">更新</a> 一応動くには動くんだけど、a要素の使い方がなんだかなーと。 軽く調べても出てこなかったので、ちょいと試してみたら document.getElementById("foo").contentWindow.location.reload(); でいけたっぽい。JavaScriptだけど。（ちなみにreload(true)とすればスーパーリロードになるよ） "contentWindow.location.reload()"で調べ直したら色々出てきた。
竹取 JS
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
縦書きを可能にするjavascriptライブラリ「竹取JS」
SEO的にも問題の無い縦書きのコンテンツを作りたい。そんな時に便利なのが、今回紹介するjavascriptライブラリ「竹取JS」です。javascriptで指定されたブロックを縦書きに変換してくれます。 HTMLのみで縦書きというのは非常に面倒でしたが、これなら気軽に縦書きコンテンツを作れそうです。 詳しくは以下 上記のように文字だけではなく、リストや、取り消し線、テーブルなど様々なHTMLで創られた基本要素を縦書き化してくれますので、従来のサイトの構造を保ったまま縦書きのコンテンツを制作することが可能です。また切り替えボタンやダブルクリックで横書きへ瞬時に切り替わる機能も実装されています。 対応ブラウザはInternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+と幅広いブラウザで利用可能。ライセンスは
テキストを好きなフォントで表示できるJavaScript「cufon」
twitter facebook hatena google pocket 最近多くの英語サイトのソースで見られるJavaScriptにcufon.jsと言うのがあります。 これはJavaScriptを使用して、テキストを好きなフォントで表示できるものです。 Google Font APIが出ましたが、まだまだ数が少ないです。 こだわりのある方は、フォントを選択できるcufo'n - fonts for the peopleを使用するのも良いのではないでしょうか。 ※フリーフォントのみで・・ sponsors 使用方法 cufo'n - fonts for the peopleからcufon.jsをダウンロードします。 また、表示させたいフォントをjs化します。 今回は、1001 Free Fonts - Download Free Fonts for Windows and Macint
縦書きを実現するJavaScript「nehan」
twitter facebook hatena google pocket 日本人ですし、WEBでも縦書き使いたいですよね？ はいJavaScript！ 縦書きjQueryで実現するnehan - Project Hosting on Google Codeです。 （追記） ※作者の方からご指摘いただき、jQueryがなくても動くとのことです。 sponsors 使用方法 nehan - Project Hosting on Google Codeからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="nehan.js"></script> <script type="text/javascript">
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」
twitter facebook hatena google pocket 最近のサイトはフッターに多くの情報を載せて回遊率の向上を図っています。 これをJavaScriptを利用して、もっと印象的にさせられます。 via：End of Page Slide Out Box with jQuery | Codrops sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(window).scroll(function(){ //idがlastの高さを取得 var distanceTop = $('#
縦書きを実現するJavaScript「nehan」
日本人ですし、WEBでも縦書き使いたいですよね？ はいJavaScript！ 縦書きjQueryで実現するnehan - Project Hosting on Google Codeです。 ※作者の方からご指摘いただき、jQueryがなくても動くとのことです。 jQueryないバージョン sponsors 使用方法 nehan - Project Hosting on Google Codeからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="nehan.js"></script> <script type="text/javascript"> $(function(){ Nehan.LayoutMa
JavaScriptでiPhoneライクなフォームを作成 via「iPhone Style Radio and Checkbox Switches using JQuery and CSS」
twitter facebook hatena google pocket 世の中にiPhoneが溢れ返る時代だから、PCのフォームもiPhoneライクにしてみませんか。 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowで紹介されているチュートリアルでラジオとチェックボックスをiPhoneぽくしてみましょう。 sponsors 使用方法 iPhone Style Radio and Checkbox Switches using JQuery & CSS | DevGrowからファイルをダウンロードします。 使うのはjQueryとswitch.gifです。 まずはhtmlを以下のように記述します。 <p class="field switch"> <input type="radio" id="rad
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2013年チェックしておきたいスタイルシートやスクリプトのスゴ技たち -Top Pens of 2013
Loading...
treesaverjs.com
IDEA * IDEA
