DEMO - wrapSingleByteTexts.js
和欧混植で指定した場合、欧文が和文より一回り小さかったり、数字・記号で別々のフォントを指定したいけどできない…など、 Webフォントを使用していて「もう少し細かい指定ができたら」という思いから、本プラグインを作成しました。 半角英数記号をそれぞれ任意のclass名のspanで囲み、汎用性を持たせるために、CSSで調整できるようにしています。 判別できるのは、半角英文字、半角数字、半角記号の3つです。それぞれ個別に指定できるのでfont-familyやfont-sizeを調整して、 より綺麗にWebフォントを組むことができます。 本来の目的はWeb上で合成フォントを綺麗に見せることですが、使い方次第では、それ以外にも使えるかもしれません。 HTML まず、jquery本体を読み込んだ後、本プラグインを読み込みます。 <head> <script type="text/javascript"
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
その場で検索して結果に素早くアクセスする·jQuery Live Search MOONGIFT
インターネットの世界では素早さを求める動きが強まっている。それこそ、サイト内検索で欲しい情報が見つからなかったり、レスポンスが遅れたりすればあっという間にユーザがいなくなってしまう。 JavaScriptだけで検索を行う そんな高速なサーバ検索は難しいかもしれないが、クライアントサイドであれば意外と高速化できる。 今回紹介するオープンソース・ソフトウェアはjQuery Live Search、jQueryを使ったリスト検索ライブラリだ。 jQuery Live SearchはWebページ上にあるリストを検索するライブラリだ。リアルタイムにフィルタリングが行われるのでインクリメンタル検索に近い。デモでは1,000件のリストに対してフィルタリングを行っている。 文字を入力するたびに絞り込まれていく レスポンスはブラウザの性能によるだろうが、思っていた以上に高速だ。検索結果の件数も表示されるので
jQueryプラグイン - リストやテーブルから文字列を検索（絞り込む） - Searcher
デモのインプットフォームに文字列を入力し、テーブルのコンテンツを検索してみてください。 「Searcher」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Searcherのデモでーす。"> <title>Searcher - jQueryプラグイン</title> </head> <body> <h1>Searcherのデモでーす。</h1> <input id="tablesearchinput" /> <table id="tabledata"> <tbody> <tr><td>1992</td><td>スペイン（Spain）</td><td>バルセロナ（Barcelona）</td></tr> <tr><td
Intense Images
Intense Image Viewer A javascript library for viewing images in a fully full screen. Click the images to see it in action!
関数や変数のネーミングに悩んだら「codic」に日本語名を入力するとある程度解決するかも
codicとは codicは、日頃、変数名や関数名に頭を悩ませるプログラマのためのネーミング辞書です。 以前は、プログラマ向けの単語辞書といった感じだったのですが、Ver.3からは、「日本語を入力すると、ふさわしい名前を勝手に生成してくれる」という仕様になりました。 例えば関数名を作るのに、「従業員数を取得する」と入力するだけで「get_employee_count」という名前を勝手に生成してくれます。 これだけでも、かなり便利なんですが、codicにはその他にも、プログラミングのための便利な機能が満載だったので、その使い方などを紹介したいと思います。 codicの使い方 codicの主な機能は、日本語を入力すると、勝手にネーミングを生成してくれると言うことです。 ただ、ちょっとした使い方次第で、より便利に利用できるので、その使い方などの紹介です。 基本機能 まずは、基本的な機能、「日本語
ブラウザ全面を使用したページでスクロール位置を自動的に一定の場所にスナップさせる【jQuery連載14】 | HTML5でサイトをつくろう
最近のウェブサイト構造の1つに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。 シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐ事ができ、また最近のスマートフォンでのサイト閲覧においても、片手でスムースにスピーディに情報を得る事ができるので、とくに新商品、新サービスのキャンペーン系の特設サイトやランディングページに適した構造と言えるでしょう。 しかし、こういったシングルページサイトの構造は、どこからどこまでは1つの情報になるのかが分かりにくい場合があります。もちろん、デザインでそれを分かりやすく伝える事は大切でありますが、伝え手側がうまくユーザを誘導するようにすることも1つの方法です。今回は
jQueryで要素がアニメーション実行中かそうでないかを判別する処理まとめ｜BLACKFLAG
jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、 指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。 アニメーションの実行判別方法はいろいろなやり方があり 使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうので いくつかの判別パターンをまとめてみます。 【.is(‘:animated’)】 jQueryで要素がアニメーション実行中かそうでないかを判別する処理 いろいろある判別処理の中で扱いやすかったものとして まず、if文と「.is(‘:animated’)」を使っての判別について。 「.is(‘:animated’)」を使って 要素がアニメーション実行中の場合の処理は以下のようになります。 ◆SCRIPT if($('セレクタ').is(':animated')){ ～ ここにセレクタ要素がアニメーション実行
ブラウザの幅全体をメイングラフィックにするスライドショーを作成する【jQuery連載11】 | HTML5でサイトをつくろう
前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ
ブラウザの背景全体に画像を表示する（ランダム配置とアニメーション）【jQuery連載03】 | HTML5でサイトをつくろう
今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。 一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。 写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサンプルになっていると思います。 今回作成したサンプル 背景に写真を配置したサンプルを見る 背景画像をランダムにし一定時間でアニメーションさせるサンプルを見る ビジュアル画像をHTMLに読み込ませる 今回は背景に表示させる画像はCSSでの背景画像指定ではなく、表示させる領域を制御するためにdiv#background内にimg要素にて配置した画像を画面全体に表示させます。 画像が拡大縮小されるからと
[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS
最近よく見かける垂直に配置した複数のパネルそれぞれをブラウザいっぱいに表示し、CSS3のかっこいいアニメーションでスクロールさせるjQueryのプラグインを紹介します。 デスクトップだけでなく、スマホ・タブレットのスワイプ操作にも対応している優れもの！ デモページ：2ページ目 ホイール操作時には、ちょうどいい位置に自動で移動します。 FSVSの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/assets/js/fsvs.js"></script> </head> スワイプ対応にするには、スクリプトを加えます。 <script src="/assets/js/jq
![[JS]縦長1ページのスクロールコンテンツをシンプルなHTMLで実装できるスクリプト -FSVS](https://cdn-ak-scissors.b.st-hatena.com/image/square/811172ca6306ab35b8c730bf9af1a2f005e4fab0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014092203.gif)
画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」:phpspot開発日誌
jQuery fullsizable by MSchmidt 画像をフルスクリーンに拡大できるギャラリー作成jQueryプラグイン「fullsizable」。 HTML5のフルスクリーンAPIなども使ってLightBoxの代替として大きい画像を楽しむサイトに使えそうなプラグインです。 関連エントリ Google画像検索風のイメージギャラリーが作れる「jQuery.GI.TheWall.js」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」
jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ | ARAKAZE NOTE
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい！」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 （まあ、そんな簡単な動
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
複数の要素をタイル状に配置するために、ブロック要素の高さを揃える軽量なjQueryプラグインjquery.tile.jsを公開します。このプラグインを使用すると、ブロック要素を簡単にタイル状に並べることができます。 スマートフォン向けのWebサイトでは、タイル状に並べた要素をタッチしてもらう、というユーザインターフェースが主流になっています。 当サイトのトップページは、このプラグインを使用して、記事の一覧をタイル状に並べています。 本プラグインはブログ形式のWebサイトでサイドバーと本体の高さを揃えたい場合などにも使用することができます。 javascriptを使用しない場合は、htmlのテーブル要素を使う、CSSのdisplay: tableを使用する、float: leftで横に並べてmargin-bottomを大きくするなどの方法が考えられますが、いずれもデザイン面で融通が効きにくい
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://infinityforest.net/home/archives/1787
jquery-tubular - Project Hosting on Google Code